How can javaScript library and css files load before component load in reactjs

Question

How can javaScript library and css files load before reactjs component load.

I am converting dataTable Html template to react component but javaScript library and css files are isn't loaded with components.

How can I solved it. Can any one help me?

Answer 1

You can use these lines at your very first component like app.js which renders first ater index.js(for class based components)

    componentDidMount () {
    const script = document.createElement("script");

    script.src = "https://use.typekit.net/foobar.js";
    script.async = true;

    document.body.appendChild(script);
}

And for functional components

useEffect(() => {
    const script = document.createElement("script");

    script.src = "https://use.typekit.net/foobar.js";
    script.async = true;

    document.body.appendChild(script);
}, []);

Answer 2

You can try to use import [ which js library you want to use ] and then put this syntax at the js file top like as you import react;

 import $ from 'jquery';