Use firebase in your React App
Tags: beginners, react, firebase, jsx
Published: 2022-05-22 11:03:15

Hi everyone, this is my first post. Feel free to comment any mistakes below.

So recently I've been creating my [personal-portfolio](https://chamodperera-portfolio.netlify.app/) site with reactjs. It has few sections where I need to update in the future ex:- contacts, projects...etc. And I needed to update those sections without directly changing the code. That's where I used firebase as a solution for this case.

[Firebase](https://firebase.google.com/) is a platform developed by Google for creating mobile and web applications. It was originally an independent company founded in 2011. In 2014, Google acquired the platform and it is now their flagship offering for app development.

Then let's get started. I am using **firebase V9** for this.


## <u>Step 1</u> (setting up a new react project)

First steps first! setting up a react project. If you are new to react check out the [React documentation](https://reactjs.org/docs/getting-started.html) to get started. React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. You can create a new react app by running the following code in your console.

```
npx create-react-app my-app
```

## <u>Step 2</u> (Create to new firebase project)

You can create a new firebase project by visiting the official [firebase](https://firebase.google.com/) site. Create an account and "**Go to console**" to set up a new project.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d8whj34ggin7pqccozgg.png)I already have few projects, you can set up a new project by by clicking on "**Add project**".

## <u>Step 3</u> (Installing firebase)

To install firebase to your app, go to the project folder and run,

```
npm install firebase
```

## <u>Step 4</u> (Adding firebase project to your app)
Now that the firebase has been installed, Let's add your firebase project to your app.

- Go to the root of your app and create a new file,

> firebase-config.js

- Get the firebase project configuration. You can find your configuration by visiting project settings in the firebase console.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ginu62nsjoj99hj6e88p.png)

- Now save your configuration in the `firebase-config.js`. Here I had pushed my project to a git hub repo. So for the further security, I have saved my configuration in a `.env` file. Of course you can save your configuration directly, but if you need to host your project some where, using the `.env` is the better solution. Learn more about using **environmental variables** in react.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0lpxyg4bxs5em5l2dec0.png)

## <u>Step 5</u> (Reading data from firestore)

So that now you've added firebase to your project,you can use firebase features in your project. Check out the [firebase documentation](https://firebase.google.com/docs).

For addition I'll tell you how to read data from firestore database.

- Go to your firebase project and set up Firestore Database. In my case I've created some contact information in the firestore database.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jiwnoe8asx5k9rjzt6v.png)

- import `firebase` in your component

```
import {db} from '../../firebase-config'
import {collection, getDocs} from "firebase/firestore"
```

- Now you can read data by creating a function. Use `UseEffect` to wrap it in your react component. Let's read my data in the "contacts" collection.

```
const [contacts,setContacts] = useState([])
    
    useEffect(() => {
        const contactsCollection = collection(db,'contacts')
        const getContacts = async () => {
            const snapshot = await getDocs(contactsCollection);
            setContacts(snapshot.docs.map((doc) => ({...doc.data(),id:doc.id})));
        }
    
        getContacts();
        
        
      }, []);
```

- Now you can render your data in the template
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yy9tv915mkvh2p441deg.png)

Comment any questions below. Thank you.