
We've reached the third part of our React & Firebase series. In [part one](https://ashleemboyer.com/react-firebase-blog-01), we learned how to set everything up. [Last time](https://ashleemboyer.com/react-firebase-blog-02), we made a page for creating new blog posts. Today, we're going to read single posts from our Firebase Realtime Database and show them in our app.

If you haven't read the first two posts, I have some starter code you can use instead. Just make sure you follow steps 1, 2, & 5 from [the first part](https://ashleemboyer.com/react-firebase-blog-01) before you go any further.

## 1. Clone the (Part 3) Starter Code [Optional]

Skip this step if you've successfully completed Part 2. Otherwise, you can clone the code by running the following command in the terminal:

```
git clone https://github.com/ashleemboyer/react-firebase-blog-starter-part-3.git
```

You'll need to change one file before continuing: `src/firebase.js`. If you open it, you'll see the following `config` constant:

```
const config = {
  apiKey: "<YOUR-API-KEY>",
  authDomain: "<YOUR-AUTH-DOMAIN>",
  databaseURL: "<YOUR-DATABASE-URL>",
  projectId: "<YOUR-PROJECT-ID>",
  storageBucket: "<YOUR-STORAGE-BUCKET>",
  messagingSenderId: "<YOUR-MESSAGE-SENDER-ID>",
  appId: "<YOUR-APP-ID>"
};
```

The attributes within the constant are used to connect your app to your Firebase project. To find these values, go to your project settings using through the gear icon in the left sidebar of the [Firebase console](https://console.firebase.google.com). Scroll down to the "Firebase SDK snippet" under "Your apps" and copy the attributes from what they're calling `firebaseConfig`. Replace the attributes in your `config` constant with these values.

Now you can run `npm install` and then `npm run start` to see your project in a browser.

## 2. Inspect the `Post` Component

You can find this component in the `src/pages/post.js` file. Let's take a look at what it does right now.

First, it grabs the slug from the URL using the `Router` we have set up in `src/App.js`. Components passed in to `Route` components within a `Router` have a `match` prop sent to them. There are other ways this prop is sent to components, and you can read more about that [over here](https://reacttraining.com/react-router/web/api/match).

Next, we have a `postSlugs` constant which is an array of slugs that exist with a real blog post. If you look at the database, these match the slugs we've given to the first and second blog posts. The problem is that this code isn't dynamic and it's also not connected to the database. We'll come back to this in a few.

Next, we're checking if the `slug` in the URL bar is one of the `postSlugs`. If it isn't, then the user is trying to see a post that doesn't actually exist. So, we return a `Redirect` to our `404` component. You can read more about the `Redirect` [over here](https://reacttraining.com/react-router/web/api/Redirect).

Finally, we have our return statement. Right now, it returns the same thing for every valid post `slug`. Instead, we want to show the real blog post content that we have stored in Firebase.

## 3. Connect the `Post` Component to Firebase

First, let's add import our `getFirebase` function so we can try to read from the database. While we're at it, we should also import `useState` to help manage a couple of things.

```
import React, { useState } from "react";

import { getFirebase } from "../firebase";
```

Next, let's think about how what we want to manage with `useState`. The first thing that comes to mind is a `loading` state. This will be a boolean that describes whether or not we are trying to load something from the database. We also want a variable for our `currentPost` that we're trying to read from the database. Replace the `postSlugs` line with the following two lines of code:

```
const [loading, setLoading] = useState(true);
const [currentPost, setCurrentPost] = useState();
```

We want to start in a loading state so the page can show something different to indicate to a user that the page is loading. You can show an animation, GIF, plain text, whatever you please. We'll keep it simple for now and just return some text like this:

```
if (loading) {
  return <h1>Loading...</h1>;
}
```

Our database call needs to go right before this `if` statement, however. If we place it after, it will never be reached because the `if` statement is making the code return early. Here's what we'll add after our calls to `useState` and before the `if` statement we just wrote:

```
if (loading && !currentPost) {
  getFirebase()
    .database()
    .ref()
    .child(`/posts/${slug}`)
    .once("value")
    .then(snapshot => {
      if (snapshot.val()) {
        setCurrentPost(snapshot.val());
      }
      setLoading(false);
    });
}
```

Let's update our check on whether a post exists or not. Update `postDoesNotExist` to the following:

```
const postDoesNotExist = !currentPost;
```

These conditions might be a little confusing at first. What are we checking for? It might help to list the steps of execution here, which you can play around with yourself by adding some console logs to the file.

1. On first load: `loading` is true and `setCurrentPost` is undefined, so we go inside of the `if` statement. Once we make it into the `then`, if `snapshot.val()` returns an object (it'll be null if no post exists with the given `slug`), we call `setCurrentPost`, making `currentPost` no longer undefined.
2. After `setCurrentPost` call: Making this call will re-render the component. We reach our `if (loading && !currentPost)` statement again. Since `currentPost` is now defined, we do not go in the code block again, thus keep ourselves from unnecessarily making calls to the database. We reach the `if (loading)` statement. `loading` is still true, so the component returns some text and doesn't do anything else.
3. After `setLoading` call: Making this call will re-render the component. `loading` is now false and `currentPost` might be undefined or an object. That's where the `if (postDoesNotExist)` check comes in. If we didn't get a post back from the database, we return a `Redirect`, like before. Otherwise, we continue on to our final `return` where we show the post.

_I hope these steps aren't overwhelming and they help you see the power of hooks and state management! They're some of the coolest things about React, to me._

Here's how I'm displaying posts:

```
return (
  <>
    <img src={currentPost.coverImage} alt={currentPost.coverImageAlt}>
    <h1>{currentPost.title}</h1>
    <em>{currentPost.datePretty}</em>
    <p dangerouslySetInnerHTML={{ __html: currentPost.content }}></p>
  </img>
);
```

I also added a `12px` margin to the top of `<p>` elements in `src/index.js`.

Now, when you click a "Continue reading..." link or manually navigate to one of your posts, you should see something like this:

![Screenshot of a single blog post's page.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-03%2Fpost.png?alt=media&token=4a9abd6a-9549-467f-a473-ff86ae47357a)

Please [send me an email](mailto:hello@ashleemboyer.com) or [a Twitter DM](https://twitter.com/ashleemboyer) if you have any questions or concerns. I love hearing from you! 😊


Learn how to build a blog site with React and Firebase.

Build a React & Firebase Blog Site

Build a React & Firebase Blog Site Part 3


Welcome back! This is the second in a series of posts that will teach you how to build a blog site using React and Firebase. If you haven't read [the first post in the series](https://ashleemboyer.com/react-firebase-blog-01), I encourage you to do so. I'm including starter code for this post, but you'll additionally need to go through the following steps from the previous post to use it:

- Step 1: Sign up for Firebase (if you don't have an account already)
- Step 2: Create a project
- Step 5: Add Data to the Database

A fair warning: since this post is building off of Part 1, it assumes you have read the post if you're closely following along.

## 1. Clone the (Part 2) Starter Code [Optional]

Skip this step if you've successfully completed Part 1. Otherwise, you can start clone the code by running the following command in a terminal:

```
git clone https://github.com/ashleemboyer/react-firebase-blog-starter-part-2.git
```

You'll need to change one file before continuing: `src/firebase.js`. If you open it, you'll see the following `config` constant:

```
const config = {
  apiKey: "<YOUR-API-KEY>",
  authDomain: "<YOUR-AUTH-DOMAIN>",
  databaseURL: "<YOUR-DATABASE-URL>",
  projectId: "<YOUR-PROJECT-ID>",
  storageBucket: "<YOUR-STORAGE-BUCKET>",
  messagingSenderId: "<YOUR-MESSAGE-SENDER-ID>",
  appId: "<YOUR-APP-ID>"
};
```

The attributes within the constant are used to connect your app to your Firebase project. To find these values, go to your project settings using through the gear icon in the left sidebar of the [Firebase console](https://console.firebase.google.com). Scroll down to the "Firebase SDK snippet" under "Your apps" and copy the attributes from what they're calling `firebaseConfig`. Replace the attributes in your `config` constant with these values.

Now you can run `npm install` and then `npm run start` to see your project in a browser.

## 2. Add a Page for Creating Posts

To get started on implementing a "Create Post" feature, let's first make a page we'll use to create posts. Add a `create.js` file in `src/pages`. We're going to keep it really simple for now to make sure everything is still working.

> Developing code is most easy when you take incremental steps and check your work along the way.

Our `Create` component will give a friendly, "Hello," for now.

```
import React from "react";

const Create = () => {
  return <h1>Hello, from Create!</h1>;
};

export default Create;
```

Try navigating to the `/create` page. Uh, oh... the page isn't found?

![The 404 page.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-02%2F404.png?alt=media&token=4665d673-fc43-4f64-ab14-4d5b8bf7ec9e)

No worries! We just need to add a `Route` for our new page in `src/App.js`. First add an import for the `Create` component:

```
import Create from "./pages/create";
```

Then, add the following `Route` below the one for the `/` path:

```
<Route path="/create" component={Create} />
```

The new create page should be working now!

![The create page.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-02%2Fcreate-hello.png?alt=media&token=a4a5a0ac-005e-448c-8493-450a60f1f5e6)

## 3. Make Inputs for Describing Posts

Now, let's think about the data structure we have in our Realtime Database. Each of the following are attributes we use to describe a blog post:

- title
- slug
- date
- coverImage
- coverImageAlt
- content

Consider these two questions: Which of these attributes do we need to create an `<input>` for? Which ones can we automatically generate with some additional code? Well, ...

If I were making this blog site for a client, I would auto-generate the `slug` and the `date`. Dates aren't that hard to auto-generate, but slugs can be because of punctionation. We're not going to handle that here, but feel free to give it a try on your own! In addition, I'd likely provide a file upload input for `coverImage`, but that's also a little more complex than I'd like to take this post.

So, `date` is the only thing we're going to auto-generate. We'll have inputs for everything except `content`, which will get a `<textarea>`. Let's add all of those to our component and handle their values with `useState`. Your `src/pages/create.js` file should look like this:

_If this seems like a lot of redundant code to you, good catch! (And I'm sorry. 😅) We'll fix that in a "going further" post._

```
import React, { useState } from "react";

const labelStyles = {
  display: "block",
  marginBottom: 4
};

const inputStyles = {
  width: "100%",
  height: "2rem",
  lineHeight: "2rem",
  verticalAlign: "middle",
  fontSize: "1rem",
  marginBottom: "1.5rem",
  padding: "0 0.25rem"
};

const Create = () => {
  const [title, setTitle] = useState("");
  const [slug, setSlug] = useState("");
  const [coverImage, setCoverImage] = useState("");
  const [coverImageAlt, setCoverImageAlt] = useState("");
  const [content, setContent] = useState("");

  const createPost = () => {
    console.log({ title, slug, coverImage, coverImageAlt, content });
  };

  return (
    <>
      <h1>Create a new post</h1>
      <section style={{ margin: "2rem 0" }}>
        <label style={labelStyles} htmlFor="title-field">
          Title
        </label>
        <input
          style={inputStyles}
          id="title-field"
          type="text"
          value={title}
          onChange={({ target: { value } }) => {
            setTitle(value);
          }}
        />

        <label style={labelStyles} htmlFor="slug-field">
          Slug
        </label>
        <input
          style={inputStyles}
          id="slug-field"
          type="text"
          value={slug}
          onChange={({ target: { value } }) => {
            setSlug(value);
          }}
        />

        <label style={labelStyles} htmlFor="cover-image-field">
          Cover image
        </label>
        <input
          style={inputStyles}
          id="cover-image-field"
          type="text"
          value={coverImage}
          onChange={({ target: { value } }) => {
            setCoverImage(value);
          }}
        />

        <label style={labelStyles} htmlFor="cover-image-alt-field">
          Cover image alt
        </label>
        <input
          style={inputStyles}
          id="cover-image-alt-field"
          type="text"
          value={coverImageAlt}
          onChange={({ target: { value } }) => {
            setCoverImageAlt(value);
          }}
        />

        <label style={labelStyles} htmlFor="content-field">
          Content
        </label>
        <textarea
          style={{ ...inputStyles, height: 200, verticalAlign: "top" }}
          id="content"
          type="text"
          value={content}
          onChange={({ target: { value } }) => {
            setContent(value);
          }}
        />
        <div style={{ textAlign: "right" }}>
          <button
            style={{
              border: "none",
              color: "#fff",
              backgroundColor: "#039be5",
              borderRadius: "4px",
              padding: "8px 12px",
              fontSize: "0.9rem"
            }}
            onClick={createPost}
          >
            Create
          </button>
        </div>
      </section>
    </>
  );
};

export default Create;
```

Here's what your page should look like now:

![The create page with inputs.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-02%2Fcreate-screen.png?alt=media&token=24abdd3c-da90-4438-a488-7c6fb95112d1)

Briefly fill in all of these fields and see what happens when you click the "Create" button! Is your console open? Then you should see an object printed with the values of all your inputs. Here's what mine looks like (_click to expand_):

![The create page with filled inputs and their values logged to the console.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-02%2Fcreate-values-logged.png?alt=media&token=2de7263e-f573-4a4c-85a4-050ab479fee1)

## 4. Write a Create Function

Neat! This is also what I mean by incremental changes to code. Take it step by step. Let's get to the exciting part! We're going to send some stuff back to the database. First, we need to import our `getFirebase` function from `src/firebase.js`.

```
import { getFirebase } from "../firebase";
```

Now, add the `generateDate()` function, update the `createPost` function, and destructure the `history` prop from the `Create` component params:

```
const generateDate = () => {
  const now = new Date();
  const options = { month: "long", day: "numeric", year: "numeric" };

  const year = now.getFullYear();

  let month = now.getMonth() + 1;
  if (month < 10) {
    month = `0${month}`; // prepend with a 0
  }

  const day = now.getDate();
  if (day < 10) {
    day = `0${day}`; // prepend with a 0
  }

  return {
    formatted: `${year}-${month}-${day}`,             // used for sorting
    pretty: now.toLocaleDateString("en-US", options)  // used for displaying
  };
};
```

```
const createPost = () => {
  const date = generateDate();
  const newPost = {
    title,
    dateFormatted: date.formatted,
    datePretty: date.pretty,
    slug,
    coverImage,
    coverImageAlt,
    content
  };
  getFirebase()
    .database()
    .ref()
    .child(`posts/${slug}`)
    .set(newPost)
    .then(() => history.push(`/`));
};
```

```
const Create = ({ history }) => {
  ...
}
```

Fill in your inputs like we did a few minutes ago, click "Create post", and you should be brought to the home page with your new post at the very top!

![The home page with the new post listed first.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-02%2Fnew-post.png?alt=media&token=85aa1f65-6be1-430f-badc-9490b5e6c66d)

## 5. Wrapping Up

Whew! I thought we'd be able to talk about all 4 CRUD functions in one post, but that was a lot. We'll continue on this adventure tomorrow. Great job so far. 💪

If come across any issues or questions, [send me an email](mailto:hello@ashleemboyer.com) or [DM me on Twitter](https://twitter.com/ashleemboyer)! Catch you again tomorrow. 😊


Build a React & Firebase Blog Site Part 2


Welcome! This is the first in a series of posts that will teach you how to build a blog site using React and Firebase. This one will probably be the longest because there are few things to do to set everything up.

At the end of this post, you'll have learned how to connect your app to Firebase and pull some data from [Firebase's Realtime Database](https://firebase.google.com/docs/database). Next time, we'll start setting up our CRUD functions with a "Create Post" feature. After that, we'll see what we can do to make an interface on the frontend that will make it easy to call our CRUD functions and easy to create more interesting functions.

Ready to get started? :)

## 1. Sign up for Firebase

This one is easy! Head over to [Firebase's website](https://firebase.google.com/) and click the "Get started" button. The page looks like this:

![Firebase's home page with a "Get started" button.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Ffirebase-home.png?alt=media&token=44402b1f-339f-4343-817d-952bc6c3bbe4)

You'll be prompted to choose a Google account if you're not already signed in to one. Once you're signed in, you can create a project. Here's what that page will look like if you're brand-new to Firebase:

![The Firebase console where a project can be created.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Ffirebase-welcome.png?alt=media&token=8433b1fc-49ff-42a3-8bb1-21e52cb966be)

## 2. Create a Project

Click the "Create a project" button to begin the three step process. First, you'll be prompted for a project name. I'm naming my project `react-firebase-blog`. You can change your project ID if you want, but going with the automatically generated one is fine too.

![Step 1 of the process.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fcreate-project-01.png?alt=media&token=c238d4b6-3580-4f3d-9a92-4651cd01662d)

Step 2 asks us if we want to set up Google Analytics for the project. I'm selecting "Not right now". If you choose this option, the process ends here. Otherwise, there's another step

![Step 2 of the process.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fcreate-project-02.png?alt=media&token=fb748ae2-44fb-4626-ada7-f2b31e73a510)

Click "Create project" and you'll be brought to a loading screen. When it says, "Your new project is ready," click the "Continue" button.

![The "Your project is ready" message with a "Continue" button.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fcreate-project-ready.png?alt=media&token=3f419470-28e2-4a07-8b36-92b32f8a5b3a)

## 3. Clone the Starter Code

You can clone the starter code by running the following command in a terminal:

```
git clone https://github.com/ashleemboyer/react-firebase-blog-starter.git
```

Let's see what we've got! Go ahead and get the project rolling by changing into the `react-firebase-blog-starter` directory, running `npm install`, and finally running `npm run start`. Here's what you should see:

![Preview of the starter app.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fstarter-site.png?alt=media&token=a0e21d1e-a951-4871-a98f-a9c42f588697)

Hooray! Go ahead and explore the project a little. I'll highlight a few areas for you to begin.

1. `src/App.js`

   We have 4 `Routes`: the home page, a 404, and another for handling blog post slugs (aka URLs). You might be wondering why there's not one for handling non-matching paths. Good catch! We're actually handling that in the `Post` component (`src/pages/post.js`). Let's go ahead and look at that one.

2. `src/pages/post.js`

   Because we're using a Router in `src/App.js` (comes from `react-router-dom`), the components we name in `Route` elements will have a [`match`](https://reacttraining.com/react-router/web/api/match) passed into their props. We can get the slug for a post from the URL bar with `match.params.slug`, then compare that to a list of slugs we support on the site. Those are hard-coded into a `postSlugs` variable for now. If the slug does not exist, we return a `Redirect` to our 404 page. Otherwise, we'll display the correct post.

3. `src/pages/home.js`

   First, you'll se the `blogPosts` variable. We're hard-coding our posts until we connect our app to Firebase. All this page does is return a `section` element for every blog post in the `blogPosts` array. You shouldn't need to change anything after the `return` statement as we make our way through this series.

## 4. Connect Firebase to the application

First, install the [`firebase` package](https://www.npmjs.com/package/firebase) by running `npm install firebase` in the root directory of the project.

Now, create a JavaScript file in the `src` directory of the project and call it `firebase.js`. This is where we'll define our Firebase configs and initialize the Firebase objects.

Before we add some code to this file, let's get the config data we need about our Firebase project. Go to the Firebase project settings by clicking the settings gear in the left sidebar and selecting "Project settings" from the menu. Scroll down to the "Your apps" section of the page. It's probably at the bottom. It should say, "There are no apps in your project."

![Screenshot of the 'Your apps' section of the project settings.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fproject-settings.png?alt=media&token=63cb601f-0eb7-49eb-a7c9-dbb5f6bf53ac)

Click the circle that looks like `</>` in order to add Firebase to a web app. You'll be prompted for the App's nickname. I'm calling mine `React Firebase Blog`.

![Screenshot of the prompt for the app's nickname.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fapp-nickname.png?alt=media&token=513f98b4-37ef-42aa-b45f-f793e5e37c6c)

Click the "Register app" button, and after the page finishes loading, you'll see some HTML code that has a variable called `firebaseConfig`. Copy the JSON attributes from that variable and hold on to them for our `firebase.json` file. Click the "Continue to console" button to get back to your project settings. If you lose the JSON attributes you copied previously, you can find them again here, under the "Your apps" section that now has our app listed.

Let's go back to our `firebase.js`. Have your config data ready and plug it in to the following code:

```
import firebase from "firebase/app";
import database from "firebase/database";

const config = {
  apiKey: "<YOUR-API-KEY>",
  authDomain: "<YOUR-AUTH-DOMAIN>",
  databaseURL: "<YOUR-DATABASE-URL>",
  projectId: "<YOUR-PROJECT-ID>",
  storageBucket: "<YOUR-STORAGE-BUCKET>",
  messagingSenderId: "<YOUR-MESSAGE-SENDER-ID>",
  appId: "<YOUR-APP-ID>",
};

let firebaseCache;

export const getFirebase = () => {
  if (firebaseCache) {
    return firebaseCache;
  }

  firebase.initializeApp(config);
  firebaseCache = firebase;
  return firebase;
};
```

The `getFirebase()` function will ensure we only call `initializeApp` one time.

## 5. Add Data to the Database

We can't read any data from our database until we actually add to it! Go back to your Firebase project and click the "Database" option under the "Develop" heading in the sidebar. You'll have to scroll down the page a little until you find the "Realtime Database" section.

![Screenshot of the Realtime Database section.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Frealtime-database.png?alt=media&token=2bc78aa3-e902-46fd-a775-95042cd5cc0e)

Click the "Create database" button within this section. You'll see a modal come up asking you about the security rules for your database.

![The 'security rules' modal.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fsecurity-rules.png?alt=media&token=fbd9e6fc-63ac-41d3-b8c9-779a9224c598)

Select "Start in **test mode**" and click the "Enable" button. Your database will be empty and read something like:

```
<YOUR-PROJECT-ID>: null
```

If you didn't already know, the Realtime Database is just a JSON object. You can read more about that [here](https://firebase.google.com/docs/database).

The quickest way to get started is to import data using a JSON file. I'm also providing this for you in case you're following along closely and want to have the same things show as what I have here. You can find this file in the root directory of the starter project. Click the three dots menu and select "Import JSON" to get to the file upload. Browse for your file, and then click the "Import" button.

Now you should have some data attributes you can expand and explore!

![The data imported into the Realtime Database.](https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fdata.png?alt=media&token=70461f67-df46-41b4-b15a-c53fc343d3b4)

## 6. Read from the Database

Finally! The moment we've all been waiting for. Let's head over to `src/home.js` and see if we can get some stuff from the database!

First, add some imports to the top of the file:

```
// You only need to add the `{ useState }` portion here.
import React, { useState } from "react";

// This is new.
import { getFirebase } from "../firebase";
```

Now, let's get `blogPosts` into a state and try to read them from the database. You can read more about the `useState` hook over [here](https://reactjs.org/docs/hooks-state.html). We're also going to add a `loading` state so we can easily do two things:

1. Make sure we only call `getFirebase` once
2. Show the user a loading screen while we wait for data

Replace the `blogPosts` constant with the following code:

```
const [loading, setLoading] = useState(true);
const [blogPosts, setBlogPosts] = useState([]);

if (loading && !blogPosts.length) {
  getFirebase()
    .database()
    .ref("/posts")
    .orderByChild("dateFormatted")
    .once("value")
    .then(snapshot => {
      let posts = [];
      const snapshotVal = snapshot.val();
      for (let slug in snapshotVal) {
        posts.push(snapshotVal[slug]);
      }

      const newestFirst = posts.reverse();
      setBlogPosts(newestFirst);
      setLoading(false);
    });
}

if (loading) {
  return <h1>Loading...</h1>;
}
```

Tada! You should see the exact same thing we had before. 🎉

## 7. Wrapping Up

There was a ton of stuff here. If you have any questions or concerned, please [send me an email](mailto:hello@ashleemboyer.com) or [DM me on Twitter](https://twitter.com/ashleemboyer)! I'll try to give you a hand if you're feeling stuck or overwhelmed. Stay tuned for tomorrow's post where we will cover writing CRUD functions for our new, fancy blog site! If you're feeling squirrely and want to give it a go before then, I encourage you to check out the [Firebase documentation](https://firebase.google.com/docs/database/web/start).


Posts Related to the "firebase" Tag