Firebase Typescript with React example: CRUD Application

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/

Using Cloud Firestore instead:
React Typescript Firestore example: Build a CRUD App

Firebase Typescript with React Overview

We're gonna build an React Typescript Firebase CRUD Application using firebase library in which:

• Each Tutorial has key, title, description, published status.
• We can create, retrieve, update, delete Tutorials (CRUD operations) from Firebase Realtime Database

Here are the screenshots:

• Create a new Tutorial:

Firebase Realtime Database right after the Operation:

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

• Change status to Published/Pending using Publish/UnPublish button:

• Update the Tutorial details with Update button:

• Delete the Tutorial using Delete button:

• Delete all Tutorials with Remove All button:

Technology

• React 17/16
• firebase 8
• typescript 4.3.5
• react-router-dom 5
• bootstrap 4.6.0

Project Structure

• firebase.ts configures information to connect with Firebase Project and export Firebase Database service.
• services/tutorial.service.ts exports TutorialDataService that uses firebase's Database Reference to interact with Firebase Database.
• There are 3 components that uses TutorialDataService:
  • add-tutorial for creating new item
  • tutorials-list contains list of items, parent of tutorial
  • tutorial shows item details
• App.tsx 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/

You can also find how to create React HTTP Client for working with Restful API in:
React Typescript example Project with Axios and Web API

Or Cloud Firestore for serverless:
React Typescript Firestore example: Build a CRUD App

Further Reading

• React Component
• firebase.database.Database
• firebase.database.Reference
• Firebase Web Get Started

Fullstack:

• React + Spring Boot + MySQL: CRUD example
• React + Spring Boot + PostgreSQL: CRUD example
• React + Spring Boot + MongoDB: CRUD example
• React + Node.js + Express + MySQL: CRUD example
• React + Node.js + Express + PostgreSQL example
• React + Node.js + Express + MongoDB example
• React + Django + Rest Framework example