Firebase Typescript with React example: CRUD Application
Tags: react, typescript, firebase, todayilearned
Published: 2021-09-03 05:06:47

In this tutorial, I will show you step by step to build a React Typescript Firebase CRUD example with Realtime Database.

Full Article: [https://www.bezkoder.com/firebase-typescript-react/](https://www.bezkoder.com/firebase-typescript-react/)

Using Cloud Firestore instead:
<a href="https://www.bezkoder.com/react-typescript-firestore/">React Typescript Firestore example: Build a CRUD App</a>

<h2>Firebase Typescript with React Overview</h2>
We're gonna build an React Typescript Firebase CRUD Application using <a href="https://www.npmjs.com/package/firebase">firebase</a> library in which:
<ul>
	<li>Each Tutorial has key, title, description, published status.</li>
	<li>We can create, retrieve, update, delete Tutorials (CRUD operations) from Firebase Realtime Database</li>
</ul>

Here are the screenshots:

- Create a new Tutorial:

![firebase-typescript-react-crud-create](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2k5hwjx4s7ujisafukp3.png)

Firebase Realtime Database right after the Operation:

![firebase-typescript-react-crud-create-db](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u9e9vyc9bcz6wxotbfep.png)

- Retrieve all Tutorials with details when clicking on a Tutorial:

![firebase-typescript-react-crud-retrieve](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfsk3tv11x4ye19ws8dw.png)

- Change status to <strong>Published</strong>/<strong>Pending</strong> using <strong>Publish</strong>/<strong>UnPublish</strong> button:

![firebase-typescript-react-crud-update-status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uumxqq31lqpfbd25ea60.png)

- Update the Tutorial details with <strong>Update</strong> button:

![firebase-typescript-react-crud-update](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tui3t0c8lkdbcg512ko8.png)

- Delete the Tutorial using <strong>Delete</strong> button:

![firebase-typescript-react-crud-delete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8l44m09gl4qmt8la4z42.png)

- Delete all Tutorials with <strong>Remove All</strong> button:

![firebase-typescript-react-crud-delete-all](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7er5f3d3b0i4dznc47b.png)

<h2>Technology</h2>
<ul>
	<li>React 17/16</li>
	<li>firebase 8</li>
	<li>typescript 4.3.5</li>
	<li>react-router-dom 5</li>
	<li>bootstrap 4.6.0</li>
</ul>

<h2>Project Structure</h2>
![firebase-typescript-react-crud-project-structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vlkot1wv1l8icajgo5q7.png)

- <code>firebase.ts</code> configures information to connect with Firebase Project and export Firebase <a href="https://firebase.google.com/docs/reference/js/firebase.database.Database">Database</a> service.
- <code>services/tutorial.service.ts</code> exports <code>TutorialDataService</code> that uses <code>firebase</code>'s Database <code>Reference</code> to interact with Firebase Database.
- There are 3 components that uses <code>TutorialDataService</code>:
<ul>
	<li><code>add-tutorial</code> for creating new item</li>
	<li><code>tutorials-list</code> contains list of items, parent of <code>tutorial</code></li>
	<li><code>tutorial</code> shows item details</li>
</ul>
- <code>App.tsx</code> contains Browser Router view and navigation bar.

For step by step instruction and Github source code, please visit:
[https://www.bezkoder.com/firebase-typescript-react/](https://www.bezkoder.com/firebase-typescript-react/)

You can also find how to create React HTTP Client for working with Restful API in:
<a href="https://www.bezkoder.com/react-typescript-axios/">React Typescript example Project with Axios and Web API</a>

Or Cloud Firestore for serverless:
<a href="https://www.bezkoder.com/react-typescript-firestore/">React Typescript Firestore example: Build a CRUD App</a>

<h2>Further Reading</h2>
<ul>
	<li><a href="https://reactjs.org/docs/react-component.html">React Component</a></li>
	<li><a href="https://firebase.google.com/docs/reference/js/firebase.database.Database">firebase.database.Database</a></li>
	<li><a href="https://firebase.google.com/docs/reference/js/firebase.database.Reference">firebase.database.Reference</a></li>
	<li><a href="https://firebase.google.com/docs/database/web/start">Firebase Web Get Started</a></li>
</ul>

Fullstack:
<ul>
	<li><a href="https://bezkoder.com/react-spring-boot-crud/">React + Spring Boot + MySQL: CRUD example</a></li>
	<li><a href="https://bezkoder.com/spring-boot-react-postgresql/">React + Spring Boot + PostgreSQL: CRUD example</a></li>
	<li><a href="https://bezkoder.com/react-spring-boot-mongodb/">React + Spring Boot + MongoDB: CRUD example</a></li>
	<li><a href="https://bezkoder.com/react-node-express-mysql/">React + Node.js + Express + MySQL: CRUD example</a></li>
	<li><a href="https://bezkoder.com/react-node-express-postgresql/">React + Node.js + Express + PostgreSQL example</a></li>
	<li><a href="https://bezkoder.com/react-node-express-mongodb-mern-stack/">React + Node.js + Express + MongoDB example</a></li>
	<li><a href="https://bezkoder.com/django-react-axios-rest-framework/">React + Django + Rest Framework example</a></li>
</ul>