Integrate Admin Template in ReactJS is today’s leading topic. We are using React v16, and also we need to download the template from this GitHub repo: https://github.com/almasaeed2010/AdminLTE/releases
Integrate Admin Template in ReactJS
As per requirement, first, we need to download the HTML template.
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 ltetemplate.
So, our index.html file looks like this.
So, our 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 data-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;
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 one menu item 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.
// Content.js
import React, {Component} from 'react';
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;
Our Admin Panel looks like this.
.png)
0 comments:
Post a Comment
Note: only a member of this blog may post a comment.