I am confused on how should I use HTML template in React. The template is an admin dashboard and have multiple pages. I already copy the HTML codes and paste it into jsx files and fix the syntax.
What I’m currently doing:
-
For each pages I make it into separate components. For example, Dashboard.jsx, Calendar,jsx and etc.
-
For repeating items such as Navbar, Menu Side Bar and Footer, I make each of them in their own component. For example, Navbar.jsx, MenuSideBar.jsx and Footer.jsx.
-
Import the script and css tags at index.html of React.
-
Install related npm packages.
-
Copy the HTML template’s assets folder and paste it under React’s public folder.
What I’m confused about:
- None of the js libraries are working unless if the component is inside React’s index.html. I can’t put the component’s codes inside index.html since I want to reuse the code. So what makes the js libraries aren’t working? Is it because the js libraries are corrupted or other files are the problem.
For example:
Left side bar is using metis menu npm package to make a menu bar. But the dropdowns are not working. Supposedly it can collapse and expand.
So right now
what should I do to make the components to work? This is my first time using HTML template in React. Any advice are greatly appreciated. Thank you.
Output
Left Side Bar
import React from 'react';
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import Navbar from './Components/Navbar';
import Index from './Components/Index';
import LeftSideBar from './Components/LeftSideBar';
import Footer from './Components/Footer';
import Chat from './Components/Chat';
function App() {
return (
<Router>
<Navbar />
<LeftSideBar />
<Footer />
<Routes>
<Route exact path="/index" element={<Index/>} />
<Route exact path="/" element={<Index/>} />
<Route exact path="/chat" element={<Chat/>} />
</Routes>
</Router>
);
}
export default App;
- index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import MetisMenu from 'react-metismenu';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
- index.html
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<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" />
<title>React App</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
<meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
<meta content="Themesdesign" name="author" />
<!-- plugin css -->
<link href="assets/libs/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
<!-- Bootstrap Css -->
<link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
<!-- Icons Css -->
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
<!-- App favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- App Css-->
<link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- JAVASCRIPT -->
<script src="assets/libs/jquery/jquery.min.js"></script>
<script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/libs/metismenu/metisMenu.min.js"></script>
<script src="assets/libs/simplebar/simplebar.min.js"></script>
<script src="assets/libs/node-waves/waves.min.js"></script>
<!-- apexcharts -->
<script src="assets/libs/apexcharts/apexcharts.min.js"></script>
<!-- Plugins js-->
<script src="assets/libs/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="assets/libs/admin-resources/jquery.vectormap/maps/jquery-jvectormap-world-mill-en.js"></script>
<script src="assets/js/pages/dashboard.init.js"></script>
<script src="assets/js/app.js"></script>
<div id="root" class="py-5"></div>
</body>
</html>