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
exportsTutorialDataService
that usesfirebase
's DatabaseReference
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 oftutorial
-
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
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
Top comments (0)