Introduction

 
In this article, we are going to learn how to do CRUD operations in React applications with Firebase. Previously, we saw an article on Angular CRUD using  Firestore Database and a real time database:  Angular CRUD using Firebase
 
What is ReactJs ?
 
React is an open-source JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.
 
What is Firebase ?
 
Firebase is a technology that allows us to create web applications without server-side-programming, making development faster and easier. It can control data without thinking about how data is stored and synchronized across different instances of the application in real-time.
 
It is a mobile platform from Google offering a number of different features.These features allow users to save and retrieve data to be accessed from any device or browser.
 
Prerequisites
  • Basic knowledge of React
  • Visual Studio Code must be installed
  • Node JS must be installed
  • Basic Knowledge of Firebase

Create ReactJS project

 
Step 1
 
The very first step is to create a new React.js project by using the following command.
  1. npx create-react-app reactcrud_firebase   
 How To Implement React CRUD Using Firebase
 How To Implement React CRUD Using Firebase
 
Step 2
 
Open the newly created project in Visual Studio code and install React bootstrap in this project by using the following command.
  1. npm install bootstrap
Step 3
 
Now, open the index.js file and import Bootstrap.
  1. import 'bootstrap/dist/css/bootstrap.min.css';
Step 4
 
To integrate our application with Firebase just visit my article, Introduction to Firebase. There I explained in detail how to create an account in Firebase and how to setup the project .
Open your browser then go to Google Firebase Console and log in using your Google account.
 
How To Implement React CRUD Using Firebase
 
Click the Add Project button, name it and click on Continue button.
 
How To Implement React CRUD Using Firebase
 
How To Implement React CRUD Using Firebase
 
Click on Create Project button then wait a few seconds and click on Continue button. You will be redirected to this page.
 
How To Implement React CRUD Using Firebase
 
After then click on </> the icon and you need to add firebase to our app and generate the configuration file. Give the app a name and click on register app.
 
How To Implement React CRUD Using Firebase
 
Next you can see the firebase SDK .
 
How To Implement React CRUD Using Firebase
 
You only need to copy the config object from this page.
 
Step 5
 
We use Firebase module to access the Firebase Firestore Database. Type the below command to install the module.
  1. npm install --save firebase   
Step 6
 
Now create a new file firebase.js and add our configuration code of our firebase. 
  1. import * as firebase from "firebase";  
  2.   
  3. var firebaseConfig = {  
  4.     /* 
  5.     replace this object with yours 
  6.     */  
  7.    apiKey: "AIzaSyCm54M-FmiVcYqeAofITgVdboAzhIpc0tU",  
  8.    authDomain: "reactcrud-d6fad.firebaseapp.com",  
  9.    databaseURL: "https://reactcrud-d6fad.firebaseio.com",  
  10.    projectId: "reactcrud-d6fad",  
  11.    storageBucket: "reactcrud-d6fad.appspot.com",  
  12.    messagingSenderId: "666106395244",  
  13.    appId: "1:666106395244:web:4eb7684e35149228c23649"  
  14. };  
  15.   
  16. // Initialize Firebase  
  17. var fireDb = firebase.initializeApp(firebaseConfig);  
  18.   
  19. export default fireDb.database().ref();  
Step 7
 
Next, open app.js then replace all codes with the following.
  1. import React from 'react'  
  2. import './App.css';  
  3. import StudentInfo from './components/studentInfo ';  

  5. function App() {  
  6.   return (  
  7.     <div className="row">  
  8.       <div className="col-md-8 offset-md-2">  
  9.         <StudentInfo />  
  10.       </div>  
  11.     </div>  
  12.   )  
  13. }  
  14.   
  15. export default App;  
Step 8
 
Now create a component folder and inside it create a file name studentInfo.js to store student information.
  1. import React, { useState, useEffect } from 'react';  
  2. import firebaseDb from "../firebase";  
  3. import AddOrEditStudent from './addOrEditStudent';  
  4.   
  5. const StudentInfo= () => {  
  6.   
  7.     var [currentId, setCurrentId] = useState('');  
  8.     var [studentObjects, setStudentObjects] = useState({})  

  10.     useEffect(() => {  
  11.         firebaseDb.child('Student').on('value', snapshot => {  
  12.             if (snapshot.val() != null) {  
  13.                 setStudentObjects({  
  14.                     ...snapshot.val()  
  15.                 });  
  16.             }  else{
  17.                setStudentObjects({});
  18.             }
  19.         })  
  20.     }, [])  
  21.   
  22.   
  23.     const addOrEdit = (obj) => {  
  24.         if (currentId === '')  
  25.             firebaseDb.child('Student').push(  
  26.                 obj,  
  27.                 err => {  
  28.                     if (err)  
  29.                         console.log(err)  
  30.                     else  
  31.                         setCurrentId('')  
  32.                 })  
  33.         else  
  34.             firebaseDb.child(`Student/${currentId}`).set(  
  35.                 obj,  
  36.                 err => {  
  37.                     if (err)  
  38.                         console.log(err)  
  39.                     else  
  40.                         setCurrentId('')  
  41.                 })  
  42.     }  
  43.   
  44.     const onDelete = id => {  
  45.         if (window.confirm('Are you sure to delete this record?')) {  
  46.             firebaseDb.child(`Student/${id}`).remove(  
  47.                 err => {  
  48.                     if (err)  
  49.                         console.log(err)  
  50.                     else  
  51.                         setCurrentId('')  
  52.                 })  
  53.         }  
  54.     }  
  55.   
  56.     return (  
  57.         <div className="card">  
  58.             <div className="card-body pb-0">  
  59.                 <div className="card">  
  60.                     <div className="card-header main-search dash-search">  
  61.                         <h3>  
  62.                             Student Information Details  
  63.                     </h3>  
  64.                     </div>  
  65.                 </div>  
  66.                 <div className="row">  
  67.                     <AddOrEditStudent {...({ currentId, studentObjects, addOrEdit })}></AddOrEditStudent>
  68.                     <div className="col-12 col-md-12">  
  69.                         <div className="card">  
  70.                             <div className="card-header">Student Management</div>  
  71.                             <div className="card-body position-relative">  
  72.                                 <div className="table-responsive cnstr-record product-tbl">  
  73.                                     <table className="table table-bordered heading-hvr">  
  74.                                         <thead>  
  75.                                             <tr>  
  76.                                                 <th className="active">Full Name</th>  
  77.                                                 <th>Roll No</th>  
  78.                                                 <th>Subject</th>  
  79.                                                 <th>Class</th>  
  80.                                                 <th width="60"> </th>  
  81.                                                 <th width="60"> </th>  
  82.                                             </tr>  
  83.                                         </thead>  
  84.                                         <tbody>  
  85.                                             {  
  86.                                                 Object.keys(studentObjects).map((key) => (  
  87.                                                     <tr key={key}>  
  88.                                                         <td>{studentObjects[key].FullName}</td>  
  89.                                                         <td>{studentObjects[key].RollNo}</td>  
  90.                                                         <td>{studentObjects[key].Subject}</td>  
  91.                                                         <td>{studentObjects[key].Class}</td>  
  92.   
  93.                                                         <td className="case-record">  
  94.                                                             <button type="button" className="btn btn-info"  
  95.                                                                 onClick={() => { setCurrentId(key) }}>Edit</button>  
  96.   
  97.                                                         </td>  
  98.                                                         <td> <button type="button" className="btn btn-danger"  
  99.                                                             onClick={() => { onDelete(key) }}>Delete</button></td>  
  100.                                                     </tr>  
  101.                                                 ))  
  102.                                             }  
  103.                                         </tbody>  
  104.                                     </table>  
  105.                                 </div>  
  106.                             </div>  
  107.                         </div>  
  108.                     </div>  
  109.                 </div>  
  110.             </div>  
  111.         </div>  
  112.     );  
  113. }  
  114.   
  115. export default StudentInfo;  
For Add and Edit we are getting data from its child component which is addEditStudent and pushing the data in. The object for adding current id will be blank.
 
How To Implement React CRUD Using Firebase
 
Follow the below code for fetching the created data from the firestore database.
 
How To Implement React CRUD Using Firebase
 
Follow the below code for delete operation. It will remove the records from firebase using .remove() method. 
 
How To Implement React CRUD Using Firebase
 
Follow the below code for binding the fetched records in react jsx. 
 
How To Implement React CRUD Using Firebase
 
Step 9
 
To seperate it out we are creating one more component, addEditStudent.js, inside component folder which is a child component of studentInfo.js file .
  1. import React, { useState, useEffect } from 'react';  
  2.   
  3. const AddOrEditStudent= (props) => {  
  4.     const initialFieldValues = {  
  5.         FullName: '',  
  6.         RollNo: '',  
  7.         Subject: '',  
  8.         Class: ''  
  9.     }  
  10.   
  11.     var [values, setValues] = useState(initialFieldValues)  

  13.     useEffect(() => {  
  14.         if (props.currentId === '')  
  15.             setValues({ ...initialFieldValues })  
  16.         else  
  17.             setValues({  
  18.                 ...props.studentObjects[props.currentId]  
  19.             })  
  20.     }, [props.currentId, props.studentObjects])  
  21.   
  22.     const handleInputChange = e => {  
  23.         var { name, value } = e.target;  
  24.         setValues({  
  25.             ...values,  
  26.             [name]: value  
  27.         })  
  28.     }  
  29.   
  30.     const handleFormSubmit = e => {  
  31.         e.preventDefault()  
  32.         props.addOrEdit(values);  
  33.     }  
  34.   
  35.     return (  
  36.         <form autoComplete="off" onChange={handleFormSubmit}>  
  37.             <div className="col-12 col-md-12">  
  38.                 <div className="card">  
  39.                     <div className="card-header" >  
  40.                         <input value={props.currentId === "" ? "Add Student Info" : "Update Student Info"} />  
  41.                     </div>  
  42.                     <div className="card-body">  
  43.                         <div className="center-form">  
  44.                             <div className="row">  
  45.                                 <div className="col-12 col-md-6">  
  46.                                     <div className="form-group">  
  47.                                         <label className="col-form-label">Full Name<span  
  48.                                             className="mandatoryFieldColor">*</span></label>  
  49.                                         <input value={values.FullName}  
  50.                                             onChange={handleInputChange} type="text" className="form-control" name="FullName"  
  51.                                         />  
  52.                                     </div>  
  53.                                 </div>  
  54.                                 <div className="col-12 col-md-6">  
  55.                                     <div className="form-group">  
  56.                                         <label className="col-form-label">Roll No<span  
  57.                                             className="mandatoryFieldColor">*</span></label>  
  58.                                         <input value={values.RollNo} onChange={handleInputChange} type="text" className="form-control" name="RollNo"  
  59.                                         />  
  60.                                     </div>  
  61.                                 </div>  
  62.                                 <div className="col-12 col-md-6">  
  63.                                     <div className="form-group">  
  64.                                         <label className="col-form-label">Subject<span  
  65.                                             className="mandatoryFieldColor">*</span></label>  
  66.                                         <input value={values.Subject} onChange={handleInputChange} type="text" className="form-control" name="Subject"  
  67.                                         />  
  68.                                     </div>  
  69.                                 </div>  
  70.                                 <div className="col-12 col-md-6">  
  71.                                     <div className="form-group">  
  72.                                         <label className="col-form-label">Class<span  
  73.                                             className="mandatoryFieldColor">*</span></label>  
  74.                                         <input value={values.Class} onChange={handleInputChange} type="text" className="form-control" name="Class"  
  75.                                         />  
  76.                                     </div>  
  77.                                 </div>  
  78.                                 <div className="col-12 col-md-12">  
  79.                                     <div className="btn-group mb-3 mt-2 cmn-btn-grp">  
  80.                                         <input type="submit" value={props.currentId === "" ? "Save" : "Update"} className="btn btn-success btn-block" />  
  81.                                     </div>  
  82.                                 </div>  
  83.                             </div>  
  84.                         </div>  
  85.                     </div>  
  86.                 </div>  
  87.             </div>  
  88.         </form>  
  89.     );  
  90. }  
  91.   
  92. export default AddOrEditStudent;  
How To Implement React CRUD Using Firebase
 
The form is divided into components, addEditStudent component to store the records, and studentInfo component for displaying the records. 
 
How To Implement React CRUD Using Firebase
 
Step 10
 
For styling purposes we are including a file which is app.css. Create the file and paste the below code.
  1. .App { 
  2.   text-align: center; 
  3. }  
  4.   
  5. .App-logo { 
  6.   height: 40vmin; 
  7.   pointer-events: none; 
  8. }  
  9.   
  10. @media (prefers-reduced-motion: no-preference) { 
  11.   .App-logo { 
  12.     animation: App-logo-spin infinite 20s linear; 
  13.   }  
  14. }  
  15.   
  16. .App-header { 
  17.   background-color: #282c34; 
  18.   min-height: 100vh; 
  19.   display: flex; 
  20.   flex-direction: column; 
  21.   align-items: center; 
  22.   justify-content: center; 
  23.   font-size: calc(10px + 2vmin); 
  24.   color: white; 
  25. }  
  26.   
  27. .App-link { 
  28.   color: #61dafb; 
  29. }  
  30.   
  31. @keyframes App-logo-spin { 
  32.   from { 
  33.     transform: rotate(0deg); 
  34.   }  
  35.   to { 
  36.     transform: rotate(360deg); 
  37.   }  
  38. }  
Now we are done with our coding part and it's time for the output. On the terminal type npm start to compile and run in our browser. So go to localhost:3000 and hit enter .

How To Implement React CRUD Using Firebase
 

Conclusion

 
In this article, we have seen how to perform CRUD operations in Reactjs.
 
Please give your valuable feedback/comments/questions about this article.