Hire our expert Reactjs developer
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
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.
Visit the releases section on Github and download the latest release.
From the latest release I need to download the SourceCode.zip file and extract that file.
From the Admin LTE Code copy the “dist” and “plugins” folder to the public folder.
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>
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
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:
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.
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
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.
Copy all the HTML Content of Content Wrapper. Contains page content into appDashboard.js
Here is all we set now Admin LTE Theme See below screenshot
More topics:
Wondering how much it costs to hire a ReactJS developer? Learn about hourly rates, monthly costs, and factors affecting pricing for offshore and in-house talent.
Compare React Native vs Flutter to choose the right framework for your app. Explore differences in performance, UI, community support, and development speed.
Discover the top 10 reasons why ReactJS is the best choice for enterprise web app development — from scalability and performance to strong community support.
Get in touch with Prishusoft – your trusted partner for custom software development. Whether you need a powerful web application or a sleek mobile app, our expert team is here to turn your ideas into reality.
