Integrate Admin Template In ReactJS
Integrate Admin Template In ReactJS
Integrate Admin Template in ReactJS is today’s leading topic. If you are working on Web Application then admin panel template is neccessary for any application. You need to download the ADMINLTE template from its original website: AdminLTE
Step 1: Configure one reactjs app.
As per its original documentation, we need to install globally create-react-app globally.
npm install -g create-react-app
create-react-app admin-app
It will make the boilerplate with the development server to run the necessary ReactJS application.
Step 2: Include all the css and js files.
Create two folders inside a public directory called css and js. Copy the css and js files from the admin lte template.
So your index.html file looks like this.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/AdminLTE.css">
<link rel="stylesheet" href="css/_all-skins.min.css">
<link rel="stylesheet" href="css/ionicons.min.css">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic" />
<title>React App</title>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root" class="wrapper"></div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.slimscroll.min.js"></script>
<script src="js/adminlte.min.js"></script>
<script src="https://use.fontawesome.com/581d5d54d2.js"></script>
</body>
</html>
Step 3: Make a Header component for the admin template.
// Header.js
import React, {Component} from 'react';
export default class Header extends Component {
render(){
return (
<header className="main-header">
<a href="#" className="logo">
<span className="logo-mini"><b>A</b>LT</span>
<span className="logo-lg"><b>Admin</b>LTE</span>
</a>
<nav className="navbar navbar-static-top">
<a href="#" className="sidebar-toggle" data-toggle="push-menu" role="button">
<span className="sr-only">Toggle navigation</span>
</a>
<div className="navbar-custom-menu">
<ul className="nav navbar-nav">
<li className="dropdown messages-menu">
<a href="#" className="dropdown-toggle" data-toggle="dropdown">
<i className="fa fa-envelope-o"></i>
<span className="label label-success">4</span>
</a>
<ul className="dropdown-menu">
<li className="header">You have 4 messages</li>
<li>
<ul className="menu">
<li>
<a href="#">
<div className="pull-left">
<img src="img/user2-160x160.jpg" className="img-circle" alt="User Image" />
</div>
<h4>
Support Team
<small><i className="fa fa-clock-o"></i> 5 mins</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
)
}
}
Now, include this component into the App.js file.
// App.js
import React, { Component } from 'react';
import Header from './components/Header';
class App extends Component {
render() {
return (
<div>
<Header />
</div>
);
}
}
export default App;
Step 4: Make one sidebar component.
Inside components directory, make one file called SideBar.js.
// SideBar.js
import React, {Component} from 'react';
export default class SideBar extends Component {
render(){
return (
<aside className="main-sidebar">
<section className="sidebar">
<div className="user-panel">
<div className="pull-left image">
<img src="img/user2-160x160.jpg" className="img-circle" alt="User Image" />
</div>
<div className="pull-left info">
<p>Alexander Pierce</p>
<a href="#"><i className="fa fa-circle text-success"></i> Online</a>
</div>
</div>
<form action="#" method="get" className="sidebar-form">
<div className="input-group">
<input type="text" name="q" className="form-control" placeholder="Search..." />
<span className="input-group-btn">
<button type="submit" name="search" id="search-btn" className="btn btn-flat"><i className="fa fa-search"></i>
</button>
</span>
</div>
</form>
<ul className="sidebar-menu" data-widget="tree">
<li className="header">MAIN NAVIGATION</li>
<li className="treeview">
<a href="#">
<i className="fa fa-files-o"></i>
<span>Layout Options</span>
<span className="pull-right-container">
<span className="label label-primary pull-right">4</span>
</span>
</a>
<ul className="treeview-menu">
<li><a href="pages/layout/top-nav.html"><i className="fa fa-circle-o"></i> Top Navigation</a></li>
<li><a href="pages/layout/boxed.html"><i className="fa fa-circle-o"></i> Boxed</a></li>
<li><a href="pages/layout/fixed.html"><i className="fa fa-circle-o"></i> Fixed</a></li>
<li><a href="pages/layout/collapsed-sidebar.html"><i className="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
</ul>
</li>
<li>
<a href="pages/widgets.html">
<i className="fa fa-th"></i> <span>Widgets</span>
<span className="pull-right-container">
<small className="label pull-right bg-green">new</small>
</span>
</a>
</li>
<li className="treeview">
<a href="#">
<i className="fa fa-pie-chart"></i>
<span>Charts</span>
<span className="pull-right-container">
<i className="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul className="treeview-menu">
<li><a href="pages/charts/chartjs.html"><i className="fa fa-circle-o"></i> ChartJS</a></li>
<li><a href="pages/charts/morris.html"><i className="fa fa-circle-o"></i> Morris</a></li>
<li><a href="pages/charts/flot.html"><i className="fa fa-circle-o"></i> Flot</a></li>
<li><a href="pages/charts/inline.html"><i className="fa fa-circle-o"></i> Inline charts</a></li>
</ul>
</li>
<li>
<ul className="treeview-menu">
<li><a href="pages/tables/simple.html"><i className="fa fa-circle-o"></i> Simple tables</a></li>
<li><a href="pages/tables/data.html"><i className="fa fa-circle-o"></i> Data tables</a></li>
</ul>
</li>
<li>
<a href="pages/calendar.html">
<i className="fa fa-calendar"></i> <span>Calendar</span>
<span className="pull-right-container">
<small className="label pull-right bg-red">3</small>
<small className="label pull-right bg-blue">17</small>
</span>
</a>
</li>
<li>
<a href="pages/mailbox/mailbox.html">
<i className="fa fa-envelope"></i> <span>Mailbox</span>
<span className="pull-right-container">
<small className="label pull-right bg-yellow">12</small>
<small className="label pull-right bg-green">16</small>
<small className="label pull-right bg-red">5</small>
</span>
</a>
</li>
</ul>
</section>
</aside>
)
}
}
Here, I have just used some menu items for the SideBar as this is just a demo project.
Update the App.js file.
// App.js
import React, { Component } from 'react';
import Header from './components/Header';
import SideBar from './components/SideBar';
class App extends Component {
render() {
return (
<div>
<Header />
<SideBar />
</div>
);
}
}
export default App;
Step 5: Make one content component.
export default class Content extends Component {
render(){
return (
<div className="content-wrapper">
<section className="content-header">
<div className="row">
<div className="col-md-12">
<div className="box">
<div className="box-header with-border">
<h3 className="box-title">Monthly Recap Report</h3>
</div>
<div className="box-body">
<div className="row">
<div className="col-md-8">
<p className="text-center">
<strong>This is text</strong>
</p>
</div>
</div>
</div>
<div className="box-footer">
<div className="row">
<div className="col-sm-3 col-xs-6">
<div className="description-block border-right">
<span className="description-percentage text-green"><i className="fa fa-caret-up"></i> 17%</span>
<h5 className="description-header">$35,210.43</h5>
<span className="description-text">TOTAL REVENUE</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
)
}
}
Finally, our App.js file looks like this.
// App.js
import React, { Component } from 'react';
import Header from './components/Header';
import SideBar from './components/SideBar';
import Content from './components/Content';
class App extends Component {
render() {
return (
<div>
<Header />
<SideBar />
<Content />
</div>
);
}
}
export default App;
Sample React App Boilerplate
Open Source Your Knowledge: become a Contributor and help others learn. Create New Content