cd notes-app<\/code><\/pre>\nInstalling Firebase<\/h2>\n
Once you’ve created your React app, install Firebase by running:<\/p>\n
npm install firebase<\/code><\/pre>\nImplementing the Notes App<\/h2>\n
Now, let’s implement our notes functionality in a structured manner.<\/p>\n
Creating the Firebase Configuration<\/h3>\n
Create a new file named firebase-config.js<\/strong> in the src<\/strong> folder and add the following code using your Firebase configuration:<\/p>\nimport { initializeApp } from \"firebase\/app\";\nimport { getFirestore } from \"firebase\/firestore\";\n\nconst firebaseConfig = {\n apiKey: \"YOUR_API_KEY\",\n authDomain: \"YOUR_PROJECT_ID.firebaseapp.com\",\n projectId: \"YOUR_PROJECT_ID\",\n storageBucket: \"YOUR_PROJECT_ID.appspot.com\",\n messagingSenderId: \"YOUR_MESSAGING_SENDER_ID\",\n appId: \"YOUR_APP_ID\"\n};\n\n\/\/ Initialize Firebase\nconst app = initializeApp(firebaseConfig);\nconst db = getFirestore(app);\n\nexport { db };<\/code><\/pre>\nSetting Up Firestore<\/h3>\n
To keep our notes, we will leverage Firestore. Each note will have a title and content. Update your main app component to include Firestore functionality.<\/p>\n
import React, { useEffect, useState } from 'react';\nimport { db } from '.\/firebase-config';\nimport { collection, addDoc, onSnapshot, deleteDoc, doc } from 'firebase\/firestore';\n\nconst App = () => {\n const [notes, setNotes] = useState([]);\n const [title, setTitle] = useState('');\n const [content, setContent] = useState('');\n\n const notesCollectionRef = collection(db, 'notes');\n\n const createNote = async(e) => {\n e.preventDefault();\n await addDoc(notesCollectionRef, { title, content });\n setTitle('');\n setContent('');\n };\n\n useEffect(() => {\n const unsubscribe = onSnapshot(notesCollectionRef, (snapshot) => {\n setNotes(snapshot.docs.map(doc => ({ ...doc.data(), id: doc.id })));\n });\n\n return () => unsubscribe();\n }, []);\n\n const deleteNote = async(id) => {\n const noteDoc = doc(db, 'notes', id);\n await deleteDoc(noteDoc);\n };\n\n return (\n <div>\n <h1>Notes App<\/h1>\n <form onSubmit={createNote}>\n <input type=\"text\" placeholder=\"Title\" value={title} onChange={(e) => setTitle(e.target.value)} \/>\n <textarea placeholder=\"Content\" value={content} onChange={(e) => setContent(e.target.value)}><\/textarea>\n <button type=\"submit\">Add Note<\/button>\n <\/form>\n <ul>\n {notes.map(note => (\n <li key={note.id}>\n <h2>{note.title}<\/h2>\n <p>{note.content}<\/p>\n <button onClick={() => deleteNote(note.id)}>Delete<\/button>\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n};\n\nexport default App;<\/code><\/pre>\nUnderstanding the Code<\/h3>\n
Let’s dissect what we have done:<\/p>\n
\n- We set up state variables for notes, title, and content.<\/li>\n
- We created a function, createNote<\/strong>, that adds a new document in our Firestore collection when a note is submitted.<\/li>\n
- We set up a real-time listener using onSnapshot<\/strong> to retrieve notes from Firestore and update our state.<\/li>\n
- A deleteNote<\/strong> function allows users to remove notes.<\/li>\n
- The JSX returns a form for creating notes and a list that displays each note along with a delete button.<\/li>\n<\/ul>\n
Styling the App<\/h2>\n
To make our notes app visually appealing, we can add some simple CSS styles. Create a file named App.css<\/strong> in the src<\/strong> directory:<\/p>\nh1 {\n text-align: center;\n}\n\nform {\n margin: 20px;\n}\n\ninput, textarea {\n width: calc(100% - 20px);\n margin: 5px;\n padding: 10px;\n}\n\nbutton {\n padding: 10px;\n}\n\nul {\n list-style-type: none;\n}\n\nli {\n border: 1px solid #ccc;\n margin: 10px;\n padding: 10px;\n}\n<\/code><\/pre>\nImport the CSS file in your App.js<\/strong> file:<\/p>\nimport '.\/App.css';<\/code><\/pre>\nFinal Thoughts<\/h2>\n
Congratulations! You have successfully built a notes application using React and Firebase. This project not only enhances your React skills but also provides experience with Firebase, a powerful and flexible cloud-based solution for your app backend.<\/p>\n
Feel free to extend this project by adding features like:<\/p>\n
\n- User authentication using Firebase Authentication<\/li>\n
- Editing existing notes<\/li>\n
- Searching for notes<\/li>\n<\/ul>\n
Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"
Building a Notes App in React with Firebase Creating a notes application provides an excellent learning opportunity for developers looking to enhance their skills in React and Firebase. This tutorial will guide you through building a simple notes app that allows users to create, read, update, and delete notes efficiently using Firebase as the backend.<\/p>\n","protected":false},"author":100,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[398],"tags":[224],"class_list":{"0":"post-5249","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"tag-react"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/5249","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/users\/100"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=5249"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/5249\/revisions"}],"predecessor-version":[{"id":5250,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/5249\/revisions\/5250"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=5249"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=5249"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=5249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}