React.js & Firebase Realtime Database Tutorial

Welcome to this comprehensive tutorial on how to connect a React.js website to Firebase Realtime Database. This series consists of 9 detailed videos, guiding you step-by-step on implementing CRUD (Create, Read, Update, Delete) operations using Firebase with React.

Instructor

Abdulhakim Luanda
YouTube Channel

Date

September-October 2023

Course Content

1. Creating React project

   • Installation of necessary packages, cleanup of React project folder

2. Creating Firebase project and connecting it React website

   • Creating a new Firebaser Realtime Database project
   • Configuring React components and files for firebase connection

3. Adding Routing

   • Adding Routing to our React website

4. Writing Data

   • Pushing new entries to Firebase Realtime Database by using input values

5. Reading Data

   • Fetching and displaying data in a React component by using a map function.
   • Understanding Firebase data structure and the get method.

6. Update Part - I

   • We will see how to grab identification number for each document/object from Firebase Realtime Database
   • We will display this id number on the frontend. Later we will need this id number for Update Part - II and delete operation.

7. Adding Navigation and a little CSS style

   • We will add navigation between components because we will need it for Update Part-II
   • Some styling to make website to look nicer

8. Update Part - II

   • We will create UpdateWrite component to update a specific object
   • We will use useEffect and and a update function

9. Delete operation

   • Creating a button and connecting it delete function. We will use "remove" method.

Prerequisites

• Basic understanding of React.js and JavaScript.
• A Google account to access Firebase Console.

Getting Started

1. Clone this repository or download the starter code (if provided).
2. Follow along with each video, pausing and implementing as you go.
3. Feel free to ask questions in the video comments or reach out for clarifications.

Acknowledgements

Special thanks to the Firebase team for granting extra project quota

Feedback

If you found this tutorial helpful, please give it a thumbs up, share with your peers, and subscribe for more content. Your feedback is valuable, and it helps in delivering better content in the future.

---

© Abdulhakim Luanda, 2023. All Rights Reserved.