Introduction
In this article, we will learn how to do theme setup in React.js.
Themes are very important in a web application as they provide a tone consistent throughout the application.
In this article, we are going to apply AdminLTE theme integration in react.js and you can download it from here.
Let’s Begin.
Download theme and copy the Dist and Plugins folder and add in your project public folder.
Install the package
npm install react-router-dom@5.2.0
Next add CSS and JS file links in your index.html page as like the below code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<title>Adminlte</title>
<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 rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback" />
<link rel="stylesheet" href="/plugins/fontawesome-free/css/all.min.css" />
<link rel="stylesheet" href="/plugins/icheck-bootstrap/icheck-bootstrap.min.css" />
<link rel="stylesheet" href="/dist/css/adminlte.min.css" />
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
<link rel="stylesheet" href="/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css" />
<link rel="stylesheet" href="/plugins/jqvmap/jqvmap.min.css" />
<link rel="stylesheet" href="/plugins/overlayScrollbars/css/OverlayScrollbars.min.css" />
<link rel="stylesheet" href="/plugins/daterangepicker/daterangepicker.css" />
</head>
<body className="hold-transition sidebar-mini layout-fixed">
<div id="root" className="wrapper">
</div>
</body>
<script src="/plugins/jquery/jquery.min.js"></script>
<script src="/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/plugins/chart.js/Chart.min.js"></script>
<script src="/plugins/sparklines/sparkline.js"></script>
<script src="/plugins/jqvmap/jquery.vmap.min.js"></script>
<script src="/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
<script src="/plugins/jquery-knob/jquery.knob.min.js"></script>
<script src="/plugins/moment/moment.min.js"></script>
<script src="/plugins/daterangepicker/daterangepicker.js"></script>
<script src="/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="/plugins/summernote/summernote-bs4.min.js"></script>
<script src="/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<script src="/dist/js/adminlte.js"></script>
<script src="/dist/js/adminlte.min.js"></script>
<script src="/dist/js/demo.js"></script>
<script src="/dist/js/pages/dashboard.js"></script>
</html>
Create component Sidebar.js and paste the below code in it.
import react, { useEffect } from "react";
import { Component } from "react";
import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom";
import { Link } from 'react-router-dom';
export class Sidebar extends Component {
render() {
return (
<aside className="main-sidebar sidebar-dark-primary elevation-4" id="sidebar" >
<a href="index3.html" className="brand-link">
<img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" className="brand-image img-circle elevation-3" style={{ opacity: "8" }} />
<span className="brand-text font-weight-light">AdminLTE 3</span>
</a>
<div className="sidebar">
<div className="user-panel mt-3 pb-3 mb-3 d-flex">
<div className="image">
<img src="dist/img/user2-160x160.jpg" className="img-circle elevation-2" alt="User Image" />
</div>
<div className="info">
<a href="#" className="d-block">Alexander Pierce</a>
</div>
</div>
<div className="form-inline">
<div className="input-group" data-widget="sidebar-search">
<input className="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search" />
<div className="input-group-append">
<button className="btn btn-sidebar">
<i className="fas fa-search fa-fw"></i>
</button>
</div>
</div>
</div>
<nav className="mt-2">
<ul className="nav nav-pills nav-sidebar flex-column text-left" data-widget="treeview" role="menu" data-accordion="false">
<li className="nav-item">
<Link to='/dashboard' className="nav-link"> <p>
<i class="nav-icon fas fa-th"></i> Dashboard
</p></Link>
</li>
</ul>
</nav>
</div>
</aside>
)
}
}
Create component Header.js and paste the below code in it.
import React from 'react'
import { Component } from "react";
import { BrowserRouter as Router, Switch, Route, Redirect, Link } from "react-router-dom";
export class Header extends Component {
constructor(props) {
super(props);
}
render() {
return (
<nav className="main-header navbar navbar-expand navbar-white navbar-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<Link class="nav-link" to="/dashboard">Home</Link>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
<i class="fas fa-search"></i>
</a>
<div class="navbar-search-block">
<form class="form-inline">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search" />
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
<button class="btn btn-navbar" type="button" data-widget="navbar-search">
<i class="fas fa-times"></i>
</button>
</div>
</div>
</form>
</div>
</li>
<li class="nav-item">
<a class="nav-link" ><i className="fa fa-power-off"></i> Sign Out</a>
</li>
</ul>
</nav>
)
}
}
Create component Footer.js and paste the below code in it.
import react from "react";
import { Component } from "react";
export class Footer extends Component {
render() {
return (
<footer class="main-footer" style={{height:"10px; !important"}}>
<strong>Copyright © 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong>
All rights reserved.
<div class="float-right d-none d-sm-inline-block">
<b>Version</b> 3.1.0
</div>
</footer>
)
}
}
Create component Dashboard.js and paste the below code in it.
import react, { Component } from "react";
export class Dashboard extends Component {
constructor(props) {
super(props);
}
render() {
return (
<>
<div className="content-header">
<div className="container-fluid">
<div className="row mb-2">
<div className="col-sm-6">
<h1 className="m-0">Dashboard</h1>
</div>
<div className="col-sm-6">
<ol className="breadcrumb float-sm-right">
<li className="breadcrumb-item"><a href="#">Home</a></li>
<li className="breadcrumb-item active">Dashboard</li>
</ol>
</div>
</div>
</div>
</div>
<section className="content-wrapper">
<div className="container-fluid">
<div className="row">
<div className="col-lg-3 col-6">
<div className="small-box bg-info">
<div className="inner">
<h3>150</h3>
<p>New Orders</p>
</div>
<div className="icon">
<i className="ion ion-bag"></i>
</div>
<a href="#" className="small-box-footer">More info <i className="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<div className="col-lg-3 col-6">
<div className="small-box bg-success">
<div className="inner">
<h3>53<sup style={{ fontSize: "20px" }}>%</sup></h3>
<p>Bounce Rate</p>
</div>
<div className="icon">
<i className="ion ion-stats-bars"></i>
</div>
<a href="#" className="small-box-footer">More info <i className="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<div className="col-lg-3 col-6">
<div className="small-box bg-warning">
<div className="inner">
<h3>44</h3>
<p>User Registrations</p>
</div>
<div className="icon">
<i className="ion ion-person-add"></i>
</div>
<a href="#" className="small-box-footer">More info <i className="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<div className="col-lg-3 col-6">
<div className="small-box bg-danger">
<div className="inner">
<h3>65</h3>
<p>Unique Visitors</p>
</div>
<div className="icon">
<i className="ion ion-pie-graph"></i>
</div>
<a href="#" className="small-box-footer">More info <i className="fas fa-arrow-circle-right"></i></a>
</div>
</div>
</div>
<div className="row">
<section className="col-lg-7 connectedSortable">
<div className="card">
<div className="card-header">
<h3 className="card-title">
<i className="fas fa-chart-pie mr-1"></i>
Sales
</h3>
<div className="card-tools">
<ul className="nav nav-pills ml-auto">
<li className="nav-item">
<a className="nav-link active" href="#revenue-chart" data-toggle="tab">Area</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#sales-chart" data-toggle="tab">Donut</a>
</li>
</ul>
</div>
</div>
<div className="card-body">
<div className="tab-content p-0">
<div className="chart tab-pane active" id="revenue-chart"
style={{ position: "relative", height: "300px" }}>
<canvas id="revenue-chart-canvas" height="300" style={{ height: "300px" }}></canvas>
</div>
<div className="chart tab-pane" id="sales-chart" style={{ position: "relative", height: "300px" }}>
<canvas id="sales-chart-canvas" height="300" style={{ height: "300px" }}></canvas>
</div>
</div>
</div>
</div>
</section>
<section className="col-lg-5 connectedSortable">
<div className="card bg-gradient-primary">
<div className="card-header border-0">
<h3 className="card-title">
<i className="fas fa-map-marker-alt mr-1"></i>
Visitors
</h3>
<div className="card-tools">
<button type="button" className="btn btn-primary btn-sm daterange" title="Date range">
<i className="far fa-calendar-alt"></i>
</button>
<button type="button" className="btn btn-primary btn-sm" data-card-widget="collapse" title="Collapse">
<i className="fas fa-minus"></i>
</button>
</div>
</div>
<div className="card-body">
<div id="world-map" style={{ height: " 250px", width: "100%" }}></div>
</div>
<div className="card-footer bg-transparent">
<div className="row">
<div className="col-4 text-center">
<div id="sparkline-1"></div>
<div className="text-white">Visitors</div>
</div>
<div className="col-4 text-center">
<div id="sparkline-2"></div>
<div className="text-white">Online</div>
</div>
<div className="col-4 text-center">
<div id="sparkline-3"></div>
<div className="text-white">Sales</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
</>
)
}
}
Open your App.js file and add Router by paste the below code in it.
import logo from './logo.svg';
import './App.css';
import { Dashboard } from './Components/Dashboard';
import { Footer } from './Components/Footer';
import { Header } from './Components/Header';
import { Sidebar } from './Components/Sidebar';
import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom";
function App() {
return (
<Router>
<Switch>
<Route exact >
<Header />
<Sidebar />
<Route path="/" exact component={Dashboard}></Route>
<Route path="/dashboard" component={Dashboard}></Route>
<Footer />
</Route>
</Switch>
</Router>
);
}
export default App;
That’s it.
Now you can run your app using below command.
npm start
Output
If you have any questions or face any problems about this article, please let me know in comments.
For new blogs check. here.
Thank You
