How to include custom JS files in to React create app

Please read Using the public Folder.

In general we recommend installing packages from npm and using import to access them from the source. But if you must use a prebuilt JS file that you don’t want to import, you can add it to the public folder (for example, public/mylib.js) and then add this to public/index.html:

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

Then you can access the global variable from your app, for example:

const mylib = window.mylib;

And then use it.

Hope this helps!

Put them in the same folder as your react components and simply import them to you react components like so:

// importing your js file called jslibrary.js
// make sure that the file path is correct!
import { function1 } from './jslibrary.js'

You also have to make sure that you are exporting your function / variables in your jslibrary file, like so:

export function function1() {
  //... do stuff
}

let myVar = 1234;
export myVar;

If you use export default on a function or a variable, you don't need to use the brackets like in the above.

For more info, I highly recommend the documentation on import and export.