Build a Blog App with React —Building Components (Part 2)

Hello everyone! So, this is going to be the second part of the new React blog app series I have started. In the first part, we discussed how we could start a new React project, and we learnt how to set up a Git repository to track our changes. Also, we had a look at the package.json file.

Notice: I will publish the complete detailed version of all the articles on the Medium website. Here I will give an overview and give the codes for the various pages part by part.
So, please click here to go to Medium and read it in completion. (These are friend links so do not worry about paywall)

Now, in the second part, we would start the actual building process. We would now begin to build out components. All of our work would go inside the src folder.

We would follow a modular approach while building our project to separate all of our different tasks into different files not to clutter.

We would use BrowserRouter to help us have different pages with different URLs for various sections of our website and link them inside the App.js file.

So, we will have various components, which we would build one by one in this article and coming articles.

So, let’s have a quick overview of what all files we are going to build and what purpose would each serve:-

1. App.js — It is the main component of our app. It uses BrowserRouter to link all our different pages and give them paths and components to load for that page.

2. Home.js — It is the homepage of our blog website and would show all the blogs in a list format. It does not contain the logic to display blogs in list format, but it calls the BlogList component and pass in the blogs to that component to display the blogs. The home component fetches the blogs using a useFetch custom hook we would create later.

3. BlogList.js — It receives the blogs from the Home component and displays them.

4. BlogDetails.js — It is the component that fetches a single blog and displays it on a separate page.

5. Create.js — This is where you would create new blogs and add them to the previous blogs list.

6. Navbar.js — This is the Navbar component that would display the navbar on each page.

7. NotFound.js — This is the page we would load if the user lands on a page that does not exist. It would be a 404 Error page.

8. index.js — It is the default file that loads up our App.js file.

9. useFetch.js — This is the custom hook we would create to fetch the data from the local JSON server we would be making.

10. index.css — This is the CSS file that would hold all our styles. We would not be focusing on that part since it is not a CSS tutorial.

So, I would now start to build the components one by one. So, let’s begin.

Home Component

It is the component to display the homepage of our Blog website. We will import the BlogList component and the useFetch custom hook in our home component file.

import BlogList from './BlogList';
import useFetch from './useFetch';

const Home = () => {
    const {data: blogs, isPending, error} = useFetch('http://localhost:8000/blogs');

    return ( 
        <div className="home">
            {error && <div>{error}</div>}
            {isPending && <div>Loading...</div>}
            <BlogList blogs={blogs} title="All Blogs"/>
        </div>
     );
}

export default Home;

BlogList Component

Next up, we would like to discuss the BlogList component. We called the BlogList component in the Home component, and we passed in the blogs and a title to be displayed through this component.

import { Link } from 'react-router-dom';

const BlogList = ({blogs, title}) => {

    return ( 
        <div className="blog-list">
            <h2>{title}</h2>
            {blogs.map(blog => (
                <div className="blog-preview" key={blog.id}>
                    <Link to={`/blogs/${blog.id}`}>
                        <h2>{blog.title}</h2>
                        <p>Written by {blog.author}</p>
                    </Link>
                </div>
            ))}
        </div>
     );
}

export default BlogList;

So, this will be all for the second part. We would deal with BlogDetails and the Create components and the useFetch custom hook in the next part.

I hope you liked this part, and I will be writing the next parts soon. I hope you are excited and have been able to learn something good.

To read the complete tutorial, please move to Medium and read the complete article.

Comments

[Samson Andrew]

const {data: blogs, isPending, error} = useFetch('http://localhost:8000/blogs');

<BlogList blogs={blogs} title="All Blogs"/>

From the two lines above, is it possible to reference blog directly in the BlogList component or something missing?

[Kumar Shubham]

We yet have to build the useFetch custom hook. If the useFetch custom hook is written then yes, we can do this. I will deal with all the leftover functions in part 3 and 4.

[Samson Andrew]

That's right. I've seen the updated article. Thanks

[Fahim Hoque]

Is it a good idea to use ReactJS for creating a blogging website? I've only worked on a few projects but I've seen articles that claimed ReactJS is not well suited for SEO, if so wouldn't it make it hard for optimization?

[Kumar Shubham]

Yes, it is difficult to optmisize for SEO while using React. This article is for learning purpose only.
For production grade, you may think of using Next.js or Gatsby to build your blog. They have good SEO and uses React. These have more functionalities and are more suited for production

[Fahim Hoque]

thanks, maybe you can write something on do/don'ts when working with production grade builds for SEO optimizations?

[Kumar Shubham]

I have never worked on any production grade applications. I am currently an under graduate student at a college. So, I can't write something on that topic.