CODEWITHSUNDEEP
javascriptreactjs
user4476349
user4476349

Reputation:

How to use html js library inside react app

I have an HTML page which has some Javascript library how I can use them in React App. Do I need to import them directly and it will be functional which I suppose wrong So How I can do that properly?

NOTE: I'm using React v9.5.0.

<!-- All Jquery -->
    <!-- ============================================================== -->
    <script src="./assets/libs/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap tether Core JavaScript -->
    <script src="./assets/libs/popper.js/dist/umd/popper.min.js"></script>
    <script src="./assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- slimscrollbar scrollbar JavaScript -->
    <script src="./assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
    <script src="./assets/extra-libs/sparkline/sparkline.js"></script>
    <!--Wave Effects -->
    <script src="./dist/js/waves.js"></script>
    <!--Menu sidebar -->
    <script src="./dist/js/sidebarmenu.js"></script>
    <!--Custom JavaScript -->
    <script src="./dist/js/custom.min.js"></script>
    <!-- this page js -->
    <script src="./assets/extra-libs/multicheck/datatable-checkbox-init.js"></script>
    <script src="./assets/extra-libs/multicheck/jquery.multicheck.js"></script>
    <script src="./assets/extra-libs/DataTables/datatables.min.js"></script>
    <script>
        /****************************************
         *       Basic Table                   *
         ****************************************/
        $('#zero_config').DataTable();
    </script>

Upvotes: 0

Views: 164

Answers (1)

Neo
Neo

Reputation: 208

Create your necessary folders for css or js in the location where your index.html file is present.

├── css
│   └── style.css
├── js
│   └── script.js
└── index.html

And inside your index.html file, refer those files like this

<link rel="stylesheet" href="%PUBLIC_URL%/css/style.css"/>

<script src="%PUBLIC_URL%/js/scripts.js"></script>

This will do.

EDIT :

You can refer public folder from your app components using the process.env.PUBLIC_URL variable. To give you an example of accessing a CSS file inside public/css folder from your App component,

<link rel="stylesheet" href={process.env.PUBLIC_URL + '/css/style.css'}/>

Also, check out the docs here for more details.

Upvotes: 1

Related Questions