Integrating a Bootstrap Template to React

Introduction

Creating a react app from scratch can be a real pain if you are new to react and when your implementing a website it is a best practice to breakdown the specific template to components, especially the part that you have to use over and over again in every page you implement, Navbar and footer can be some common components. Bootstrap, on the other hand, helps in developing responsive websites. We will be looking at how we can integrate a bootstrap template with react.

Start/ Create a new react app

• 

Earlier versions of npm used npm create-react-app my-app line to create a new react app to create a new react app but from npm 5.2+ they use the above npx notation to access the npm libraries.

After creating a new react application you need to download a bootstrap template from a website to start the integration.

Downloading a Template

You could go to www.startbootstrap.com or any preferred site to download a bootstrap template so that you can integrate it to your react app. For this example, I will be using the freelancer template from startbootstrap.

As you can see this site looks to be a really simple one-page website but if it happens to redirect you to another part of the same website, we need to have the essential components to go back or navigate to other parts of the website hence the use components.

Structure of react folder

To have a clean react folder structure we have to separate components with pages, so it will be easy when integrating it with bootstrap, so create a new folder for components and one for pages if you have any and create .js files for the relevant components.

Create a page for the home page content as home.js since this bootstrap template only has one-page we’ll just need home.js for pages folder. And header.js and footer.js files in the components folder.

View the downloaded bootstrap template in the browser or in brackets now it is just a copy and pastes game until the best part.

Creating the code structure to render the HTML in react

Add the following code to the .js files to render the HTML codes.

import React, { Component } from 'react';
 
class Header extends Component {
    render() {
        return (
		//This is the area where you paste your HTML codes
)
    }
}
export default Header;

Do the same for the footer file and the home.js file in the pages section

import React, { Component } from 'react';
 
class Footer extends Component {
    render() {
        return (
		//This is the area where you paste your HTML codes
)
    }
}
export default Footer;

after that open, you’re preferred the HTML editor and select the nav area and footer area and copy and paste those areas to the respective files.

Congrats you have created the components for your website in your reactjs project.

Now we have to copy the body section from the original bootstrap template to the home.js file so that we can have the content for our website (Do the copy and paste routine but make sure to avoid the navbar and the footer to avoid duplication of them.)

Now we have 2 components and 1 page so now we have to connect these 3 to have one whole website we’ll come to this in a second, in order to load the home.js component in the reactjs app we have to import them in a file called App.js which is already there in the project 

Import the pages to App.js in your react app

We also call this as Routing. In order to do this, we need to import another react library to the project called react-router-dom and import it.

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

for this to work without error we need to install react-dom from the npm libraries using this code.

npm install react-router-dom

After successfully installing the react-router-dom we can route all components and pages to the project. Basically, React-Dom works like a navigation system inside the project to navigate from one page to another.

App.js code

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
import './App.css';
import home from './Pages/home';
 
function App() {
  return (
    <div className="wrapper">
      <Router>
        <Switch>
          <Route exact path="/" component={home} />
        </Switch>
      </Router>
    </div>
  );
}
export default App;

in imports, we can use any name to import the relevant component but in the router,  you have to use the same name Highlighted names should be the same.

import home from './Pages/home';
 
<Route exact path="/" component={home} />

The last part Importing CSS to the web site to do that create a folder in your public folder inside the project called assets and copy all the folders in the template file to this assets folder.

And copy all the scripts and imports in the template to the index.html in the project.

index.html (bootstrap template you downloaded)

Index.html (React Project)

Now you what you need to do it import the components (header and footer) to the home.js file to have the complete website.

And to use these imported components, use this notation,

<Header />
<Footer />

And the page looks like this,

import React, { Component } from 'react';
 
import Header from '../Components/Header/Header';
import Footer from '../Components/Footer/Footer';
 
class home extends Component {
    render() {
        return (
		<Header />
		//body of the HTML page
		<Footer />
)
    }
}
export default home;

Final Step

Run the react app using the following code in your console.

npm start

If you followed all the instruction above, your launched react app should look like the template itself. Then you can use your HTML CSS Bootstrap skills to modify the webpage according to your preference.

Resources

• Free Bootstrap templates from (freelancer Template)

https://startbootstrap.com/themes/freelancer/