How to use html template in react

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:

  1. For each pages I make it into separate components. For example, Dashboard.jsx, Calendar,jsx and etc.

  2. 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.

  3. Import the script and css tags at index.html of React.

  4. Install related npm packages.

  5. Copy the HTML template’s assets folder and paste it under React’s public folder.

What I’m confused about:

  1. 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

enter image description here

Left Side Bar

  • LeftSideBar.jsx
    (i’m not sure how to paste my without pasting all 400+ lines)
    enter image description here

  • App.js

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>