Introduction
In this article, we will learn how to integrate theme or HTML-bootstrap template in a React.js project.
Prerequisites
- We should have the basic knowledge of React.js
- Visual Studio Code IDE should be installed on your system.
- Bootstrap
Let's first download a Bootstrap template. You can download a free template from the following
Link. I am going to use
sb Admin Bootstrap template.
Create React.js Project
To create a new React.js project, open the command prompt and enter the following command.
- npx create-react-app reacttemplatedemo
Open the newly created project in Visual Studio Code and install Bootstrap in this project by using the following command.
- npm install --save bootstrap
Now, open the index.js file and add import Bootstrap.
- import 'bootstrap/dist/css/bootstrap.min.css';
Now copy css, js and img folder from the template
Now, in Visual Studio code, go to the Public folder, create a new folder named 'assets' and inside this folder, add the css, js and img file that you copied from the bootstrap template.
Now open index.html file and add reference of css and js. Add the following code in index.html.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8" />
- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <meta name="theme-color" content="#000000" />
- <meta
- name="description"
- content="Web site created using create-react-app"
- />
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
- <link href="./assets/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
- <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
- <link href="./assets/css/sb-admin-2.min.css" rel="stylesheet">
- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
- <title>React App</title>
- </head>
- <body>
- <noscript>You need to enable JavaScript to run this app.</noscript>
- <div id="root"></div>
- <script src="./assets//vendor/jquery/jquery.min.js"></script>
- <script src="./assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
- <script src="./assets/vendor/jquery-easing/jquery.easing.min.js"></script>
- <script src="./assets/js/sb-admin-2.min.js"></script>
- <script src="./assets/vendor/chart.js/Chart.min.js"></script>
- <script src="./assets/js/demo/chart-area-demo.js"></script>
- <script src="./assets/js/demo/chart-pie-demo.js"></script>
- </body>
- </html>
Now, go to the src folder, create a new folder named 'Layout 'and inside this folder, add 4 new components,
- Footer.js
- Header.js
- Layout.js
- Leftside.js
Now open Header.js component and add the following code.
Now open Leftside.js component and add the following code.
- import React, { Component } from 'react'
- import { Link } from 'react-router-dom';
- export class Leftside extends Component {
- render() {
- return (
- <div>
- <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
- <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
- <div class="sidebar-brand-text mx-3">React Routing </div>
- </a>
-
- <hr class="sidebar-divider my-0" />
-
- <li class="nav-item active">
- <a class="nav-link" href="index.html">
- <i class="fas fa-fw fa-tachometer-alt"></i>
- <span>Dashboard</span></a>
- </li>
- <hr class="sidebar-divider" />
- <div class="sidebar-heading">
- Interface
- </div>
- <li class="nav-item">
- <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
- <i class="fas fa-fw fa-cog"></i>
- <span>Components</span>
- </a>
- <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
- <div class="bg-white py-2 collapse-inner rounded">
- <h6 class="collapse-header">Custom Components:</h6>
- <Link class="collapse-item" to="/home">Buttons</Link>
- <Link class="collapse-item" to="/button">Chart</Link>
- </div>
- </div>
- </li>
- <li class="nav-item">
- <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">
- <i class="fas fa-fw fa-wrench"></i>
- <span>Utilities</span>
- </a>
- <div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
- <div class="bg-white py-2 collapse-inner rounded">
- <h6 class="collapse-header">Custom Utilities:</h6>
- <a class="collapse-item" href="utilities-color.html">Colors</a>
- <a class="collapse-item" href="utilities-border.html">Borders</a>
- <a class="collapse-item" href="utilities-animation.html">Animations</a>
- <a class="collapse-item" href="utilities-other.html">Other</a>
- </div>
- </div>
- </li>
- <hr class="sidebar-divider" />
-
- <div class="sidebar-heading">
- Addons
- </div>
- <li class="nav-item">
- <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
- <i class="fas fa-fw fa-folder"></i>
- <span>Pages</span>
- </a>
- <div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
- <div class="bg-white py-2 collapse-inner rounded">
- <h6 class="collapse-header">Login Screens:</h6>
- <a class="collapse-item" href="login.html">Login</a>
- <a class="collapse-item" href="register.html">Register</a>
- <a class="collapse-item" href="forgot-password.html">Forgot Password</a>
- <div class="collapse-divider"></div>
- <h6 class="collapse-header">Other Pages:</h6>
- <a class="collapse-item" href="404.html">404 Page</a>
- <a class="collapse-item" href="blank.html">Blank Page</a>
- </div>
- </div>
- </li>
- <li class="nav-item">
- <Link class="nav-link" to="/color"> <i class="fas fa-fw fa-chart-area"></i>Colors</Link>
- {
-
- }
- </li>
- <li class="nav-item">
- <Link class="nav-link" to="/table"> <i class="fas fa-fw fa-table"></i>Tables</Link>
- {
-
- }
- </li>
- <hr class="sidebar-divider d-none d-md-block" />
- <div class="text-center d-none d-md-inline">
- <button class="rounded-circle border-0" id="sidebarToggle"></button>
- </div>
-
- </ul>
- </div>
- )
- }
- }
-
- export default Leftside
Now open the Footer.js component and add the following code.
- import React, { Component } from 'react'
-
- export class Footer extends Component {
- render() {
- return (
- <div>
- <footer class="sticky-footer bg-white">
- <div class="container my-auto">
- <div class="copyright text-center my-auto">
- <span>Copyright © Your Website 2019</span>
- </div>
- </div>
- </footer>
- </div>
- )
- }
- }
-
- export default Footer
Now open Layout.js component and import Header, Footer and Leftside component, add the following code in this component.
- import React, { Component, Suspense } from 'react';
- import Leftside from './Leftside';
- import Header from './Header'
- import Footer from './Footer'
- import Home from '../Home'
- import {
- Route, Switch, Redirect
- } from 'react-router-dom';
- export class Layout extends Component {
- loading = () => <div className="animated fadeIn pt-1 text-center">Loading...</div>
- render() {
- return (
- <div>
- <div id="wrapper">
- <Leftside></Leftside>
- <div id="content-wrapper" class="d-flex flex-column">
- <div id="content">
- <Header />
- <Home/>
- </div>
- <Footer />
- </div>
- </div>
- </div>
- )
- }
- }
-
- export default Layout
Now open app.js file and following code
- import React from 'react';
- import logo from './logo.svg';
- import './App.css';
- import Layout from './Layout/Layout'
- import Login from "./Login";
- import { HashRouter, Route, Switch } from 'react-router-dom';
- function App() {
- return (
- <div className="App">
- <Layout/>
- </div>
- );
- }
-
- export default App;
Now run the project by using 'npm start' and check the result.
In this article, we learned how to integrate theme or HTML-bootstrap template in a React.js project.
Now run the project by using 'npm start' and check the result.