Simple Theming Layout in ReactJS Using Bootstrap

in this tutorial, We’ll create a theme layout using reactjs and bootstrap. This tutorial helps to understand how to create theme layout in React.

ReactJS is a well-known js framework. I’m going to make a reactjs layout out of a simple bootstrap theme. The layout will include elements such as a header, footer, and sidebar. A component is a minor unit of a module with specific features. React components can be implemented as classes or functions.

How to Create ReactJS environment

Reactjs is providing create-react-app npm module, that help to create simple reactjs application project structure using command line.

You must have nodejs > 8 and npm > 5 module installed into your application. Install the create-react-app module with the following command:

npm install -g create-react-app

-g params help to install npm module globally. You can get more information from Gitlab React CLI. This npm module is available for macOS, Windows, and Linux.

Checkout Other React tutorials:

• React Layout Using Material Design
• React File Upload In 5 Minute
• Autocomplete Example Using React
• React’s New Context API With Example
• React Helmet with ReactJs

Let’s Create React Bootstrap Layout

We will create a simple app using react CLI npm module, we will create 'test-layout' Reactjs application using the below command.

create-react-app test-layout

We will change existing folder structure and use below.

• src
  • Components
    • App
      • index.js
      • style.css
    • Shared
      • Header.js
      • Layout.js
      • Sidebar.js
    • Home
      • index.js
      • style.css

Step 1: We will move App.js(rename index.js) and app.css(rename style.css) from route to Components/App/ folder.

Step 2: We will change App.js components path into index.js file.

import App from './Components/App';

Step 3: We will create Header.js file into Components/Shared/ folder. Let’s add below HTML code into this file.

import React, {Component} from 'react';

export default class Header extends Component {
    render(){
        return (
             <header id="header" class="header">

                  <div class="header-menu">

                   <div class="col-sm-7">
                    <a id="menuToggle" class="menutoggle pull-left"><i class="fa fa fa-tasks"></i></a>

                   <div class="header-left">
                        <button class="search-trigger"><i class="fa fa-search"></i></button>

                        <div class="form-inline">
                            <form class="search-form">
                                <input class="form-control mr-sm-2" placeholder="Search ..." aria-label="Search" type="text">
                                <button class="search-close" type="submit"><i class="fa fa-close"></i></button>
                            </form>
                        </div>

                    </div>

               </div>

           </div>


        </header>

        )
    }
}

Step 4: Now, We will create Footer.js file into Components/Shared/ folder. The below HTML code will add here.

import React, {Component} from 'react';

export default class Footer extends Component {
    render(){
        return (
             <footer class="footer">

             <div class="container">
					<span class="text-muted">Place sticky footer content here.</span>
			</div>

		   </footer>

        )
    }
}

Step 5: Create Home/ folder Components/ and created index.js file.We will define home content into here.

import React, { Component } from 'react';
import './style.css';

class Home extends Component {

    render() {
        return (

	    <div classname="Home">

		<h2>Home page</h2>

	     </div>

        );
    }
}
export default Home;

Step 6: We will include all components classes in App/index.js file.

import React, { Component } from 'react';
import logo from './logo.svg';
import './style.css';
import Home from './../Home';

import Header from '../Shared/Header';
import Footer from '../Shared/Footer';

class App extends Component {
  render() {
    return (

<div>
    <header>
    
    
  </header></div>

    );
  }
}
export default App;

Conclusion:

We’ve made a simple layout with the Bootstrap style, but I don’t have any integrated routing in this example. You can learn about routing from How To Handle Routing In React Using BrowserRouter.