We're not really gonna write any code because our base component is already there, our blog component, and we can go check that out. If you go to SRC then go into components, pages, you'll see that we have a blog component right here.

It is a functional component right now, one of the very first things that we'll wanna do is change this into a class component, because we're gonna have to do things such as manage state and some things like that. That's gonna be one of the things we do here and then afterwards, we're going to populate our data on devCamp space. Let's get rid of this function call here and I'm gonna get rid of the curly bracket here at the end just so we can start fresh.

We have this return statement and I'm gonna create a class. I'm gonna say class and then this is going to just be called Blog. We'll say it extends component, but as you can see, we're not importing component yet, so we're gonna fix that and so now let's add our curly brackets at the beginning and at the very end. Now, with this in place, let's import our component at the top.

Remember that the component needs to get pulled in inside curly brackets, and just as a little bit of a refresher, remember that whenever we call an element, whenever we call a module and we say import and say React right here, or when we import one of our own components and we don't put it in curly brackets, that means that that module was exported as the default. Whenever we have these curly brackets here, that means that that is a class or a function or something inside of a file that we're bringing in. That's why Component has to be in curly brackets. I know that can be a little confusing the first few times that you see it.

Now that we have our class, we have our component, now we need to create a constructor and you don't always have to have a constructor, that is optional. But we are going to use it, so we might as well put it in here and then we're gonna call super, we're not gonna take props right now. Lastly, we need to create a render function.

Every class component in React needs a render function and then we're going to wrap the curly brackets around the return statement. Now, we should be good, now we're not getting any syntax errors and now the last thing we need to do to make this work is we need to export this. I'm gonna say export, default, blog, hit save and if you have your server running, we should now be able to go to the blog page and it should not have changed at all, we should be able to access it without any errors.

blog.js

import React, { Component } from "react";
import { Link } from "react-router-dom";

class Blog extends Component {
  constructor() {
    super();
  }

  render() {
    return (
      <div>
        <h2>Blog</h2>

        <div>
          <Link to="/about-me">Read more about myself</Link>
        </div>
      </div>
    );
  }
}

export default Blog;

Let me open up Google Chrome here and I'm gonna go to localhost:3000, make sure you have your server running and I will also zoom out because of the resolution of my screen. If I go to Blog now, you can see that it has the correct content. So everything here is still working, our refactor in turning our functional component into a class component has worked.

If you went through all of that, it means we're ready to start populating the data which we will do on the screen in the next guide, but for right now let's end the video, and before I do, come to the portfolio for devCamp space. Remember, just go to DevCamp space, Log in, go to Portfolio, and then we're going to go to blogs now.

Click on view data and unless you populated this yourself already, you'll most likely just have a blank or a null value. What you can do now is come down to the bottom and add some temporary blogs. You could just give it any kind of title you want and any content you want. You can give multiple statuses for Draft and Published, and then you can also upload some sample image. Then press the little plus sign here.

Then, it will add that to the database and that way you're gonna have a nice set of data with the API. Now, I will say you're gonna wanna have a decent number of these, so I'd recommend having at least over 10 or so. The reason for that is because when we build in the infinite scroll feature, it's kind of hard to test out infinite scroll if you don't have enough data for it.

That's why I want you to be able to populate as much data as you can, you don't have to go over the top. You don't need a hundred posts or anything 'cause at the end of the day, you're gonna come over here and delete all of these after we're done, so you can start writing your own real blog posts, but for right now, this should give you what you need. In the video, populate all this data here, and in the next guide, we're going to build our blog data page, our blog component, with our live API data.

Resources

• Source code