How to Integrate AdminLTE theme to Reactjs Project

Jul 21, 2021
Web Development

Hire our expert Reactjs developer

Step 1: Create Reactjs App

Using below command we can create new Reactjs app
This will create required folders to Up and Running with our Application and also install all the NPM packages. This will also take some time to complete.

 D:\ProjectCode>npx create-react-app adminlte

Step 2: Start the application

Go to the workplace folder (adminlte) and type the following command on your terminal to start the application.

 D:\ProjectCode\adminlte>npm start

Compiled successfully!

You can now view adminlte in the browser.

Local: http://localhost:3001
On Your Network: http://192.168.1.15:3001

Note that the development build is not optimized.
To create a production build, use npm run build.

Once you run the application you can see the screen below.

Step 3: Download Latest Release of Admin LTE

Visit the releases section on Github and download the latest release.

Download latest release

From the latest release I need to download the SourceCode.zip file and extract that file.

Step 4: Add Admin LTE required file to public Folder

From the Admin LTE Code copy the “dist” and “plugins” folder to the public folder.

Step 5: Import the Admin LTE javascript and css

Import the javascript and Css file from the asset folder to Index.html file as mentioned below

D:\ProjectCode>npx create-react-app adminlte

D:\ProjectCode\adminlte>

 
<!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet"
    href="%PUBLIC_URL%/https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="%PUBLIC_URL%/plugins/fontawesome-free/css/all.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="%PUBLIC_URL%/https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Tempusdominus Bootstrap 4 -->
  <link rel="stylesheet" href="%PUBLIC_URL%/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="%PUBLIC_URL%/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <!-- JQVMap -->
  <link rel="stylesheet" href="%PUBLIC_URL%/plugins/jqvmap/jqvmap.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="%PUBLIC_URL%/dist/css/adminlte.min.css">
  <!-- overlayScrollbars -->
  <link rel="stylesheet" href="%PUBLIC_URL%/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="%PUBLIC_URL%/plugins/daterangepicker/daterangepicker.css">
  <!-- summernote -->
  <link rel="stylesheet" href="%PUBLIC_URL%/plugins/summernote/summernote-bs4.min.css">
 
  <title>React App</title>
</head>
 
<body class="hold-transition sidebar-mini layout-fixed">
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.
 
      You can add web fonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.
 
      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
 
  <!-- jQuery -->
  <script src="%PUBLIC_URL%/plugins/jquery/jquery.min.js"></script>
  <!-- jQuery UI 1.11.4 -->
  <script src="%PUBLIC_URL%/plugins/jquery-ui/jquery-ui.min.js"></script>
  <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
  <script>
    $.widget.bridge('uibutton', $.ui.button)
  </script>
  <!-- Bootstrap 4 -->
  <script src="%PUBLIC_URL%/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <!-- ChartJS -->
  <script src="%PUBLIC_URL%/plugins/chart.js/Chart.min.js"></script>
  <!-- Sparkline -->
  <script src="%PUBLIC_URL%/plugins/sparklines/sparkline.js"></script>
  <!-- JQVMap -->
  <script src="%PUBLIC_URL%/plugins/jqvmap/jquery.vmap.min.js"></script>
  <script src="%PUBLIC_URL%/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
  <!-- jQuery Knob Chart -->
  <script src="%PUBLIC_URL%/plugins/jquery-knob/jquery.knob.min.js"></script>
  <!-- daterangepicker -->
  <script src="%PUBLIC_URL%/plugins/moment/moment.min.js"></script>
  <script src="%PUBLIC_URL%/plugins/daterangepicker/daterangepicker.js"></script>
  <!-- Tempus Dominus Bootstrap 4 -->
  <script src="%PUBLIC_URL%/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
  <!-- Summernote -->
  <script src="%PUBLIC_URL%/plugins/summernote/summernote-bs4.min.js"></script>
  <!-- overlay Scrollbars -->
  <script src="%PUBLIC_URL%/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
  <!-- AdminLTE App -->
  <script src="%PUBLIC_URL%/dist/js/adminlte.js"></script>
  <!-- AdminLTE for demo purposes -->
  <script src="%PUBLIC_URL%/dist/js/demo.js"></script>
  <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
  <script src="%PUBLIC_URL%/dist/js/pages/dashboard.js"></script>
 
</body>

Step 6: Add Components for Header

Click on the src folder and click on the folder icon. Create a folder for header. Now, click on the header folder and click on file icon and create header file.

Now open the appHeader.js and open the Index.HTML file for the download ADMIN LTE theme.

Copy all the HTML Content between <header><header> Including header tag into appHeader.js.

Now add appHeader to App.js as mentioned below

import AppHeader from './appHeader/appHeader';
 
function App() {
  return (
    <div className="wrapper">
      <AppHeader />
    </div>
  );
}
 
export default App;

Run the Application again and you can see the header is set as per below screenshot

Step 7: Add Components for Left Menu

Click on the src folder and click on the folder icon. Create a folder for the menu. Now, click on the menu folder and click on the file icon and create a menu file.

Copy all the HTML Content between <aside></aside> Including aside tag into appMenu.js Now add appMenu to App.js as mentioned below

import AppHeader from './appHeader/appHeader';
import AppMenu from './appMenu/appMenu';
 
function App() {
  return (
    <div className="wrapper">
      <AppHeader />
      <AppMenu />
    </div>
  );
}
 
export default App;

After run the application you can see the output as below:

Step 8: Add Components for Footer

Click on the src folder and click on the folder icon. Create a folder for the menu. Now, click on the menu folder and click on the file icon and create a menu file.

Copy all the HTML Content between <footer></footer> Including aside tag into appFooter.js

Now add appFooter to App.js as mentioned below

import AppHeader from './appHeader/appHeader';
import AppMenu from './appMenu/appMenu';
import AppFooter from './appFooter/appFooter';
 
function App() {
  return (
    <div className="wrapper">
      <AppHeader />
      <AppMenu />
      <AppFooter />
    </div>
  );
}
 
export default App

Note: As we have not added any content part so the footer is displayed on top.

Step 9: Add Components for Settings

Click on the src folder and click on the folder icon. Create a folder for the setting. Now, click on the setting folder and click on the file icon and create a setting file.

Copy all the HTML Content between <aside></aside> Including aside tag into appSetting.jsl. This html content you can find after footer html in admin LTE theme.

Now add appSetting.js to App.js as mentioned below

import AppHeader from './appHeader/appHeader';
import AppMenu from './appMenu/appMenu';
import AppFooter from './appFooter/appFooter';
import AppSetting from './appSetting/appSetting';
 
function App() {
  return (
    <div className="wrapper">
      <AppHeader />
      <AppMenu />
      <AppFooter />
      <AppSetting />
    </div>
  );
}
 
export default App;

After you run the application you can see the setting menu is display

Step 10: Add Dashboard component

As now we have set up the Header, Footer, Menu, setting component now we can create a dashboard component and add middle content from the theme.

Click on the src folder and click on the folder icon. Create a folder for the dashboard. Now, click on the dashboard folder and click on the file icon and create a dashboard file.