This is an update to the previous article I wrote on React & Bootstrap Starter Template

Why a Template?

It's because they save time.

The process of setting up a project can be always frustrating and it's always repetitive. That's why I have a template for almost every stack I do.

React & Bootstrap

I love using Bootstrap because of the almost Zero configuration and the hustle of designing a responsive web layout is taken care of so I just focus on how a site would look.

Updates ...

I wrote a similar article and after some updates here and there, I made a few changes and decided to re-write the article, of course after updating my template.

Components:

I have 4 ready-to-use components:

1. Meta

   import { Helmet } from 'react-helmet'
   
   const Meta = ({ title }) => {
     return (
       <Helmet>
         <title>{title}</title>
       </Helmet>
     )
   }
   export default Meta
   

   This component imitates the <title> tag. I used react-helmet to do that. This reusable React component will manage all of your changes to the document head.

2. Header

   The Header component is the one that appears right below the navigation bar on the template:

    import { Container } from 'react-bootstrap'
    const Header = ({ head, description }) => {
      return (
        <Container>
          <div className='starter-template text-center mt-5'>
            <h1>{head} Page</h1>
            <p className='lead text-capitalize'>{description}</p>
          </div>
        </Container>
      )
    }
    export default Header

The header component is re-used in all pages, it takes in 2 props, title and description example:

 <Header head={pageTitle} description={pageDescription} />

1. Menu

   This is the navigation bar.

1. Footer

   A normal footer component:

const Footer = () => {
      const year = new Date().getFullYear()
      return (
        <>
          <footer className='text-center text-capitalize'>
            copyright react bootstrap starter &copy; {year}
          </footer>
        </>
      )
    }
    export default Footer

Pages

For the template, I used 2 sample pages: the landing page and about page.

1. Home Page
2. About Page

Main App

I used react-router-dom to set the two pages up.

Download and Installation

To begin using this template, choose one of the following options to get started:

Fork and clone the repository.

Install the dependencies:

npm install

Usage

Start editing and customizing according to your needs.

Run locally:

npm start

The End!

The repo is open to suggestions and free to use: GitHub

Written with ❤️ by Chris achinga