0

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>

Improve this question
4
  • Have you tried that? You should execute .DataTable() after DOM is loaded, not before. Commented Aug 21, 2020 at 7:25
  • my main problem is How you import js files in React app to use them ? As for the DataTable i think need to use componentDidMount if i'm not wrong Commented Aug 21, 2020 at 7:28
  • Many of the libraries you've included (bootstrap, jquery, etc) can be installed as dependencies via npm or yarn. You'd then be able to easily import them into your components. It's also easier to manage that way. Commented Aug 21, 2020 at 7:29
  • Yes, understand that very well but there is custom js library which i want to use instead of creating them from scratch again. Commented Aug 21, 2020 at 7:31

1 Answer 1

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

I'm using React app so i'm doing this inside App.js not HTML file.
I was telling for React only. If you want the static files tobe visible to all your components, then, adding to your index.html is preferrable. But if you want to apply to only a component then go like this "import styles from './style.css';" to your component
in react project there is no index.html only index.js - Is this fine ?
index.html is in the public folder
There is a index.html file in your public folder.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.