In this tutorial, we will build a todo application using React and Firebase. We will utilize Firebase’s Realtime Database to store and retrieve our todo items in real-time.<\/p>\n
Before we begin, make sure you have the following installed on your machine:<\/p>\n
npm install -g firebase-tools\n<\/code><\/pre>\n\n- Log into your Firebase account in the terminal:<\/li>\n<\/ol>\n
firebase login\n<\/code><\/pre>\n\n- Create a new Firebase project by running the following command:<\/li>\n<\/ol>\n
firebase init\n<\/code><\/pre>\n\n- Select Firebase Realtime Database and Firebase Hosting when prompted. Follow the instructions to initialize your project.<\/p>\n<\/li>\n
- \n
Once your project is initialized, open the Firebase console in your browser by running:<\/p>\n<\/li>\n<\/ol>\n
firebase open\n<\/code><\/pre>\n\n- In the Firebase console, create a new Realtime Database by clicking on “Create Database” and following the prompts. Choose “Start in test mode” for now.<\/li>\n<\/ol>\n
Setting Up the React Project<\/h2>\n\n- Create a new directory for your project and navigate to it in your terminal:<\/li>\n<\/ol>\n
mkdir todo-app\ncd todo-app\n<\/code><\/pre>\n\n- Initialize a new React project using Create React App:<\/li>\n<\/ol>\n
npx create-react-app .\n<\/code><\/pre>\n\n- Install the Firebase SDK by running the following command:<\/li>\n<\/ol>\n
npm install firebase\n<\/code><\/pre>\nConnecting React to Firebase<\/h2>\n\n- \n
In your project directory, open the src<\/code> folder and create a new file called firebase.js<\/code>.<\/p>\n<\/li>\n- \n
Open the firebase.js<\/code> file and import the necessary Firebase modules:<\/p>\n<\/li>\n<\/ol>\nimport firebase from \"firebase\/app\";\nimport \"firebase\/database\";\n<\/code><\/pre>\n\n- Initialize Firebase with your project’s configuration, which can be found in the Firebase console:<\/li>\n<\/ol>\n
const firebaseConfig = {\n apiKey: \"YOUR_API_KEY\",\n authDomain: \"YOUR_AUTH_DOMAIN\",\n databaseURL: \"YOUR_DATABASE_URL\",\n projectId: \"YOUR_PROJECT_ID\",\n storageBucket: \"YOUR_STORAGE_BUCKET\",\n messagingSenderId: \"YOUR_MESSAGING_SENDER_ID\",\n appId: \"YOUR_APP_ID\",\n};\n\nfirebase.initializeApp(firebaseConfig);\n<\/code><\/pre>\n\n- Export the Firebase database instance:<\/li>\n<\/ol>\n
export default firebase.database();\n<\/code><\/pre>\n\n- In your
src<\/code> directory, open the index.js<\/code> file and add the following import statement at the top:<\/li>\n<\/ol>\nimport \".\/firebase\";\n<\/code><\/pre>\nCreating the Todo App<\/h2>\n\n- \n
Open the src<\/code> folder and create a new file called TodoForm.js<\/code>. This component will be responsible for creating new todo items.<\/p>\n<\/li>\n- \n
Open the TodoForm.js<\/code> file and add the following code:<\/p>\n<\/li>\n<\/ol>\nimport React, { useState } from \"react\";\nimport database from \".\/firebase\";\n\nfunction TodoForm() {\n const [text, setText] = useState(\"\");\n\n const handleSubmit = (e) => {\n e.preventDefault();\n\n if (text.trim() === \"\") {\n return;\n }\n\n database.ref(\"todos\").push({\n text,\n completed: false,\n });\n\n setText(\"\");\n };\n\n return (\n <form onSubmit={handleSubmit}>\n <input\n type=\"text\"\n value={text}\n onChange={(e) => setText(e.target.value)}\n \/>\n <button type=\"submit\">Add Todo<\/button>\n <\/form>\n );\n}\n\nexport default TodoForm;\n<\/code><\/pre>\n\n- \n
Open the src<\/code> folder and create a new file called TodoList.js<\/code>. This component will display the list of todo items.<\/p>\n<\/li>\n- \n
Open the TodoList.js<\/code> file and add the following code:<\/p>\n<\/li>\n<\/ol>\nimport React, { useState, useEffect } from \"react\";\nimport database from \".\/firebase\";\n\nfunction TodoList() {\n const [todos, setTodos] = useState([]);\n\n useEffect(() => {\n const todosRef = database.ref(\"todos\");\n\n todosRef.on(\"value\", (snapshot) => {\n const todosData = snapshot.val();\n const newArray = [];\n\n for (let key in todosData) {\n newArray.unshift({\n id: key,\n text: todosData[key].text,\n completed: todosData[key].completed,\n });\n }\n\n setTodos(newArray);\n });\n\n return () => {\n todosRef.off();\n };\n }, []);\n\n const handleDelete = (id) => {\n database.ref(`todos\/${id}`).remove();\n };\n\n const handleComplete = (id) => {\n database.ref(`todos\/${id}`).update({\n completed: true,\n });\n };\n\n return (\n <ul>\n {todos.map((todo) => (\n <li key={todo.id}>\n <span>{todo.text}<\/span>\n {!todo.completed && (\n <>\n <button onClick={() => handleComplete(todo.id)}>Complete<\/button>\n <button onClick={() => handleDelete(todo.id)}>Delete<\/button>\n <\/>\n )}\n <\/li>\n ))}\n <\/ul>\n );\n}\n\nexport default TodoList;\n<\/code><\/pre>\n\n- Open the
src<\/code> folder and open the App.js<\/code> file. Replace the existing code with the following:<\/li>\n<\/ol>\nimport React from \"react\";\nimport TodoForm from \".\/TodoForm\";\nimport TodoList from \".\/TodoList\";\n\nfunction App() {\n return (\n <div>\n <h1>Todo App<\/h1>\n <TodoForm \/>\n <TodoList \/>\n <\/div>\n );\n}\n\nexport default App;\n<\/code><\/pre>\n\n- Run the React development server by executing the following command in your terminal:<\/li>\n<\/ol>\n
npm start\n<\/code><\/pre>\n\n- \n
Open your browser and visit `http:\/\/localhost:3000`. You should see the todo app UI.<\/p>\n<\/li>\n
- \n
Start adding and deleting todos to test the functionality. You can also inspect the Firebase Realtime Database in the Firebase console to see the data being stored in real-time.<\/p>\n<\/li>\n<\/ol>\n
Deploying the Todo App<\/h2>\n