I love using Bootstrap because it saves time when trying to make a site responsive. After learning to use react, I started working on using bootstrap with react. It was tough at first, and after I got a hang of it, I quickly made a template that I'd reuse every time I want to use react and bootstrap altogether.

Here is brief documentation and description of the template:

Usage:

Start using the template in these few simple steps:

go to the repository

Go to github.com/ChrisAchinga/react-bootstrap-sta.., and click the use template button on the right side, or use this Link

The repo will be recreated on your account.

Clone the repo on your local environment.

Install the dependencies:

npm install

Start the development server

npm start

Descrtiption: Language & Frameworks

create-react-app

I created the app using create-react-app tool, which generates starter code-files for React without you worrying about the development environment.

To start using it, simply run the command:

npx create-react-app [project-name]

It will take a couple of minutes to get install everything.

The project structure will be as shown below:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

Read more about getting started with create-react-app here

react-bootstrap

React-bootstrap is a front-end framework that rebuilds bootstrap to make it compatible with React.

To start using it in your project, you install it using:

npm install react-bootstrap bootstrap

which installs both react-bootstrap and bootstrap.

You have to import bootstrap CSS as a module in your index.js file:

import 'bootstrap/dist/css/bootstrap.css'

Here is a practical example of using react-bootstrap:

import { Container } from 'react-bootstrap'

const Header = (props) => {
  return (
    <Container>
      <div className='starter-template text-center mt-5'>
        <h1>{props.pageTitle} Page</h1>
        <p className='lead'>{props.pageDescription}</p>
      </div>
    </Container>
  )
}

export default Header

You first import the bootstrap component, in this case, the Container, then use it as a JSX element to wrap the contents.

Read more on using react-bootstrap here.

react-router-dom

I used react-router-dom to create navigations and pagination of the app.

It makes it easier to create multiple pages within the react app.

To use it, simply install using:

npm i react-router-dom

This is how I used it in App.js file

Imported it:

import { BrowserRouter as Router, Route } from 'react-router-dom'

Using it:

const App = () => {
  return (
    <Router>
      <Menu />
      <main>
        <Container>
          <Route path='/react-bootstrap-starter' component={HomePage} exact />
          <Route path='/react-bootstrap-starter/about' component={AboutPage} />
        </Container>
      </main>
    </Router>
  )
}

I wrapped everything in the BrowserRouter component and specified what components to display based on the current route.

react-helmet

react-helmet docs

It enables you to create different meta and title stages on different pages on your react application.

To install, simply run:

npm install --save react-helmet

Here's how I used it:

Home Page:

src/pages/HomePage.js

import { Helmet } from 'react-helmet'
import Header from '../components/Header'

const HomePage = () => {
  return (
    <div>
      <Helmet>
        <title>Home Page</title>
        <meta name='description' content='Helmet application' />
      </Helmet>
      <Header pageTitle='Landing' pageDescription='This is the Landing Page' />
    </div>
  )
}

export default HomePage

About Page:

src/pages/AboutPage.js

import { Helmet } from 'react-helmet'
import Header from '../components/Header'

const AboutPage = () => {
  return (
    <>
      <Helmet>
        <title>About Page</title>
        <meta name='description' content='Helmet application' />
      </Helmet>
      <Header pageTitle='About' pageDescription='About Page' />
    </>
  )
}

export default AboutPage

The End!

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

Written with ❤️ by Chris achinga