{"id":2269,"date":"2022-01-25T18:26:37","date_gmt":"2022-01-25T18:26:37","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=2269"},"modified":"2022-01-25T18:26:37","modified_gmt":"2022-01-25T18:26:37","slug":"build-a-crud-application-in-react-with-firebase-web-sdk-v9","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=2269","title":{"rendered":"Build a CRUD application in React with Firebase Web SDK v9"},"content":{"rendered":"\n

The Firebase v.9 SDK<\/a> introduces a new API surface that follows a modular approach, resulting in a change to the use of its services, one of which is Firestore database<\/a>. Now we are left with the challenge of relearning how to perform operations like CRUD in the database.<\/p>\n\n\n\n\n\n\n\n

In this tutorial, we\u2019ll cover how to carry out CRUD operations in Firestore by building a task manager.<\/p>\n\n\n\n

You can view the demo app here<\/a>. The code for this tutorial is available on GitHub<\/a>.<\/p>\n\n\n\n

To follow along with this tutorial, you should be familiar with React<\/a>, React Hooks<\/a>, and Firebase v8<\/a>. You should also have Node.js installed on your machine.<\/p>\n\n\n\n

Setting up Firestore<\/h2>\n\n\n\n

Before we can start using the Firestore service, we need to first create a project and a database on Firebase.<\/p>\n\n\n\n

Add a project<\/h3>\n\n\n\n

Projects in Firebase are containers for our app. It lets us share data and analytics across platforms (e.g., Android, iOS, and web) so users have the same experience regardless of the device they\u2019re on.<\/p>\n\n\n\n

To add a project, make sure you\u2019re logged into your Google account, then navigate to Firebase console<\/a> and click Add project<\/strong>. We should see a page like this:<\/p>\n\n\n\n

\"Firebase<\/figure><\/div>\n\n\n\n

Enter the project name \u2014 for this tutorial, we\u2019ll call it \u201ctask-manager,\u201d then accept the Firebase terms and click Continue<\/strong>. We\u2019ll be prompted to enable Google Analytics. We don\u2019t need Google Analytics for this tutorial, but leaving it on won\u2019t do any harm.<\/p>\n\n\n\n

Once all the steps to add the project have been completed we will be redirected to our project page:<\/a><\/p>\n\n\n\n

\"Firebase<\/figure><\/div>\n\n\n\n

With this, we have successfully created our Firebase project.<\/p>\n\n\n\n

Create a database<\/h3>\n\n\n\n

On the sidebar, click the Firestore database<\/strong> icon to navigate to the Cloud Firestore page.<\/p>\n\n\n\n

\"Cloud<\/figure><\/div>\n\n\n\n

Click the Create database<\/strong> button and a prompt will appear asking to start the database in production or test mode.<\/p>\n\n\n\n

\"Create<\/figure><\/div>\n\n\n\n

Choose Start in test mode<\/strong> and click Next<\/strong>. Then, on the next screen, click Enable.<\/strong> Once these steps have been completed, an empty database will be created for us.<\/p>\n\n\n\n

\"Cloud<\/figure><\/div>\n\n\n\n

Setting up React<\/h2>\n\n\n\n

I already created a task manager template so we can solely focus on adding CRUD functionalities.<\/p>\n\n\n\n

The next step is to clone the GitHub repo. We can do this with the following commands:<\/p>\n\n\n\n

$ git clone -b starter https:\/\/github.com\/Tammibriggs\/Task-manager.git\n\n$ cd Task-manager\n\n$ npm install<\/pre>\n\n\n\n
In the starter repo we cloned, I also included \"firebase\": \"9.5.0\"<\/code> in the dependency object of the package.json<\/code> file. So by running the npm install<\/code> command, Firebase v9, along with all other dependencies, will be installed.<\/p>\n\n\n\n
Now when we start the app with $ npm start<\/code>, we should see this page in our browser:<\/p>\n\n\n\n
\"Task<\/figure><\/div>\n\n\n\n
Feel free to go through the app to get a feel for what we will be working on.<\/p>\n\n\n\n
Integrating Firebase into our React app<\/h2>\n\n\n\n
To integrate Firebase into our React app, we need to first get the web configuration object and then use it to initialize Firebase in our react app.<\/p>\n\n\n\n
On our Firebase project page, we should see a couple of icons:<\/p>\n\n\n\n
\"Firebase<\/figure><\/div>\n\n\n\n
Click the web (<\/><\/strong>) icon to configure the Firebase project for the web. We should see a page like this:<\/p>\n\n\n\n
\"Firebase<\/figure><\/div>\n\n\n\n
Give the web app a name. For this tutorial, we\u2019ll name it task-manager<\/strong>. Click the Register app<\/strong> button to move on to the next step, in which our firebaseConfig<\/code> object is revealed to us:<\/p>\n\n\n\n
\"Firebaseconfig<\/figure><\/div>\n\n\n\n
Copy the config to the clipboard; we\u2019ll need it later on to initialize Firebase. Then, click Continue to console<\/strong> to complete the process.<\/p>\n\n\n\n
Now, let\u2019s initialize Firebase so we can start using Firestore in our app.<\/p>\n\n\n\n
In the src<\/code> directory of our React app, create a firebase.js<\/code> file and add the following imports:<\/p>\n\n\n\n
\/\/ JavaScript\n\/\/ src\/firebase.js\nimport { initializeApp } from \"firebase\/app\"\nimport { getFirestore } from \"firebase\/firestore\"<\/pre>\n\n\n\n
Now, paste the config we copied earlier after the imports and add the following lines of code to initialize Firebase and Firestore:<\/p>\n\n\n\n
\/\/ JavaScript\n\/\/ src\/firebase.js\nconst app = initializeApp(firebaseConfig)\nconst db = getFirestore(app)\n\nexport {db}<\/pre>\n\n\n\n
Our firebase.js<\/code> file should now look something like this:<\/p>\n\n\n\n
\/\/ JavaScript\n\/\/ src.firebase.js\nimport { initializeApp } from \"firebase\/app\"\nimport { getFirestore } from \"firebase\/firestore\"\n\nconst firebaseConfig = {\n  apiKey: \"API_KEY\",\n  authDomain: \"AUTH_DOMAIN\",\n  projectId: \"PROJECT_ID\",\n  storageBucket: \"STORAGE_BUCKET\",\n  messagingSenderId: \"MESSAGING_SENDER_ID\",\n  appId: \"APP_ID\"\n}\n\n\/\/ Initialize Firebase and Firestore\nconst app = initializeApp(firebaseConfig)\nconst db = getFirestore(app)\nexport {db}<\/pre>\n\n\n\n
We can now start using Firestore in our app.<\/p>\n\n\n\n
Example: Building a task manager in React with Firebase<\/h2>\n\n\n\n
Since we already have a template for the task manager app, we\u2019ll focus on implementing the CRUD functionalities, which are:<\/p>\n\n\n\n