Using Google Firebase 9 with ReactJS
This will be in series, and this first part is how to set up a React project with Parcel and how to integrate Firebase into it.
PRE-REQUISITES
- Basic Knowledge about React.
Building a little project might help, check here.
- Dummy React Project set up with Parcel(Instructions below)
- A deep love for Forms(We will use them, a lot)
- A burning flame inside you to learn Firebase(pun-intended)
- A good code editor(preferably Visual Studio Code)
What you will learn
- Setting Up Firebase on your project
- CRUD functionalities using Firebase
- Routing with reach-router
Getting Started
If you ever find yourself in a full-stack position and you need a simple backend after doing the frontend tasks. I can assure you that the best solution is Google’s own FIREBASE. Now, what better tool to integrate it with than the major Frontend framework, React
We are going to be initialising our React project with Parcel bundler.
You can find an alternative method to do it here
React With Parcel app
But let’s see how it can be done in this article
Build a React app with Parcel.js
Create a folder, open it in your code editor and then in your project directory, run the command(s)
npm init -y- Optionally you can initialise Git so you can upload later using
git initThis initialises a package.json and you select y for yes
2. Install React and react-dom using
npm install — save react react-dom3. Install Babel and parcel-bundler using
npm install — save-dev @babel/core @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-react parcel-bundler4. Install react hot loader and save as a dependency using
npm i -D react-hot-loader5. In the project directory create a file named, “.babelrc” and add
{
“presets”: [
“@babel/env”,
“@babel/react”
],
“plugins”: [
“react-hot-loader/babel”,
[“@babel/transform-runtime”]
]
}6. Create a new folder called src and create an index.js file in it, add:
import React from ‘react’
import ReactDOM from ‘react-dom’
import App from ‘Components/App’
if (module.hot) {
module.hot.accept()
}
ReactDOM.render(
<div>
<App />
</div >, document.getElementById(‘root’))
ReactDOM.render(<App />, document.getElementById(‘root’))7. Create an HTML file with the syntax:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8" />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0" />
<meta http-equiv=”X-UA-Compatible” content=”ie=edge” />
<title>React with Parcel.js</title>
</head>
<body>
<h1>Hello, World!</h1>
<div id=”root”></div>
</body>
</html>8. Locate the package.json and in it, add:
“scripts”: {
“start”: “parcel index.html”
}9. Create a folder called Components and create a file called App.jsx in it, if you’re familiar with react, you know this is the main app for any sub-components we will create as well as routing. If you’re not familiar with React, you might want to catch up on the basics
Feel free to design it how you like, but since it is a functional component, it would look like this
import React, {useEffect, useState} from ‘react’
export default function App(props) {
return (
<div>
# add code or classes here
</div>
)
}Run npm run start, and let’s get started.
The Landing page
Any set-up you choose is okay but build dummy components that would hold data you save to your firebase database.
Tip: Create a component for this and then call it in your App.js, since that is the beauty of React, Components!
I am using Bootstrap for this project, to know how to properly configure Bootstrap in React click below:
Using Bootstrap with ReactJs (The right way)
Setting Up Firebase
Before we can do anything else we have to set up Firebase in our project.
If you don’t have a Firebase account the first step is to create a firebase account here:
Firebase console
You will be prompted to sign up/in, after which you will get to see your dashboard.
Something similar to the image above.
Then you can initialise a new project; choose a suitable name and then turn on analytics(optional in this case).
And in a few seconds!
To the left of your newly found dashboard, open the Side Navigation and click Cloud Firestore.
Side note: Did you know I have a tutorial that can help you create a side-navigation like that in React, click here to learn how:
How to Make a Side Navigation Bar in ReactJS
Click Create Database, start it in test mode since our app is not production-ready and then, choose any location, most preferably leaving the default choice.
Finally, we go to the project settings by clicking the gear icon in the navbar(top right) and in the General tab scroll to the bottom and click the icon as shown below
This then leads to this page:
Name your app and for now, do not click Firebase Hosting, we will set it up later. Register your app and the SDK is the Development Kit firebase gives us to use to install firebase. Our preferred option would be:
Run npm install firebase, then
We then go to the root of our folder and create a file called firebase.js and paste this
import “regenerator-runtime/runtime”
import { initializeApp } from “firebase/app”;
import { getFirestore } from “@firebase/firestore”;
import React, { useState, useEffect } from ‘react’
// Authentication
const firebaseConfig = {
apiKey: “xxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxx-xxx-xx”,
authDomain: “xxxxxxxxxxxxxxxxxxxxxxxx.firebaseapp.com”,
projectId: “xxxxxxxxxxxxxxxxx-xxxxxx”,
storageBucket: “xxxx-xxxxxxxxxxx-xxxxx.xxxxxx.com”,
messagingSenderId: “xxxxxxxxxxxx”,
appId: “1:104449724706:web:xxxxxxxxxxxxxxxxx”,
measurementId: “x-xxxxxxxxxxx”
}
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth()
export default getFirestore()Replace the firebaseConfig object with the one firebase offers you because it is unique for each project.
For the first line, I kept running into a regenerator runtime error so installing the package and importing it, seems to fix the issue so install it using:
npm I regenerator-runtimeAnd with that, we are all ready to start performing CRUD operations on our Firebase app.
Any questions you might have, or troubles you run into, I would be happy to help you fix them so leave them in the comments! Let’s debug.
If you successfully pass through this without hitches, you can move on to the next part.
