Simple Theming Layout in ReactJS Using Bootstrap
source link: https://www.js-tutorials.com/react-js/simple-theming-layout-in-reactjs-using-bootstrap/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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:
Advertisements
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
Advertisements
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK