[2] Build your React Blog with Firebase — Build our blog UI

Hi everyone, welcome back to the second tutorial. In this tutorial, we will learn how to build your first react-app and the basic interface of our blog.

This is the working result of today

Step 1: Create our react app

Please be noted that you have been installed nodejs in your computer.

run the following command in your terminal:

$ npx create-react-app <YOUR-PROJECT-NAME>

You need to change <YOUR-PROJECT-NAME> for your project name.

After the project is created, we need to install reactstrap and bootstrap library for your react app.

$ npm install --save bootstrap reactstrap

then, we start coding now!

Step 2: Create our blog layout and ArticleCard Component

Please create the following items in your scr folder:

Component folder: store any reusable component i.e. ArticleCard, Tag

— the ArticleCard component is used to display the article in the homepage.

Layout folder: store different kinds of pages.

In our homepage, It contains a Heading and Main body.

First, we import the bootstrap library in our index.js, otherwise the bootstrap css will NOT apply in our react app

// index.js
import 'bootstrap/dist/css/bootstrap.min.css';

Then, we edit our ArticleCard.js and ArtilceCard.module.css

Since we are using CSS module ,for the css file, we need to use “.module.css” as the file extension
visit: https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/ for more informatio

// ArticleCard.js
import React from 'react'
import {Card, CardImg, CardTitle, CardBody, CardSubtitle, Badge} from 'reactstrap'
import classes from './ArticleCard.module.css'

const ArticleCard = (props) => {
    return (
        <Card className={classes.ArticleCard}>
            <CardImg
                top
                width="100%"
                src={'https://placeimg.com/325/180/any'}
                alt="Card image cap"
                className={classes.CardImage}
            />
            <CardBody className={classes.CardBody}>
                <CardTitle
                    className={classes.CardTitle}>
                    Test Title
                </CardTitle>
                <CardSubtitle className={classes.CardSubtitle}>
                    <Badge className={classes.ArticleLabel} color="primary">
                        Topic
                    </Badge>
                </CardSubtitle>
            </CardBody>
        </Card>
    )
}
export default ArticleCard

ArticleCard is used to display the article object in the homepage

In the code, we use placeimg.com as our temporary placeholder of the image,

To use css module in the code, we need to import our ‘ArticleCard.module.css’ in our file.

You can use different image and setting. for more information about placeimg.com, please visit the website

// ArticleCard.module
.ArticleCard{
    width: 325px;
    display: inline-block !important;
    margin: 15px;
}

.CardImage{
    max-height: 180px;
}

.CardBody{
    padding: 10px 15px 10px 15px ;
}

.CardTitle{
    font-size: 16px;
    height: 45px;
    text-overflow: ellipsis ;
}

.CardSubtitle{
    font-size: 12px;
    color: #7b858e;
}

.ArticleLabel{
    padding: 5px 10px 5px 10px;
    font-size: 14px;
}

Next step, we edit our Heading.js and Heading.module.css

We make Heading component as a stateful component, we first import

import React, {Component} from 'react' 

in our Heading.js

We also import some components from the reactstrap library:

import {Navbar,NavbarBrand,Nav, NavItem,NavLink,UncontrolledDropdown, DropdownToggle, DropdownItem, DropdownMenu, Collapse, NavbarToggler} from 'reactstrap'

We start editing the Heading.js

we create a state called “isOpen” which is used to control the navbar in the mobile view.

// Heading.js
class Heading extends Component{
    constructor(props) {
        super(props);
        this.state={
            isOpen: false
        }
    }

   

    render() {
        return (
          
        );
    }
}
export default Heading

We insert our jsx code in the return method:

<Navbar color='light' light expand='md'>
    <NavbarBrand href='/'> My Blog</NavbarBrand>
    <NavbarToggler onClick={this.toggle}/>
    <Collapse isOpen={this.state.isOpen} navbar>
        <Nav className='mr-auto' navbar>
            <NavItem>
                <NavLink href='/new-article'>New Article</NavLink>
            </NavItem>
        </Nav>
        <UncontrolledDropdown>
            <DropdownToggle nav caret>
                Options
            </DropdownToggle>
            <DropdownMenu right>
                <DropdownItem>
                    Login
                </DropdownItem>
                <DropdownItem>
                    Logout
                </DropdownItem>
            </DropdownMenu>
        </UncontrolledDropdown>
    </Collapse>
</Navbar>

In <NavbarToggler>, it contains an attribute “onClick” which is used to control the nav drop down in the mobile view

Nav will be drop-down when we click the <NavbarToggler>

Finally, we add the method “toggle” in our component (between constructor() and render() method)

constructor(props) {
    ...
}
toggle= () => {
    this.setState({
        isOpen: !this.state.isOpen
    })
}
render() {
    return (...)
}

In the toggle method, when we click the button, setState() will change the state from open to close, from close to open.

<Collapse isOpen={this.state.isOpen} navbar>
...
</Collapse>

Last step, we change the code in App.js and Main.js

// App.js
import React from 'react';
import Main from "./Layout/Homepage/Main/Main";

function App() {
  return (
    <div className="App">
      <Main/>
    </div>
  );
}

export default App;
// Main.js
import React, {Component} from 'react'
import {Container} from 'reactstrap'
import Heading from "../Heading/Heading";
import ArticleCard from "../../../Component/ArticleCard/ArticleCard";

class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }


    render() {
        return (
            <div>
                <Heading/>

                <Container>
                    <ArticleCard/>
                    <ArticleCard/>
                    <ArticleCard/>
                    <ArticleCard/>
                    <ArticleCard/>
                </Container>

            </div>
        );
    }

}

export default Main

In Main.js we will implement fetching data from firebase, setting up a router in the next article.

In the next article, you will learn how to set up the firebase project and fetch data from firebase firestore

If you love this article, please give us a clip👏🏽 and follow our pages