Create-react-app: including external javascript libraries in new react app which is configured using create-react-app

[Naveedali1234]

This issue is a:

• Question / support request

hello all!! I am new to react.js . Actually i downloaded a theme which have external javascript libraries i.e bootstrap.min.js , jquery.min.js, slider.js , jquery-flexslider,min.js .
I created a react app using create-react-app and i copied all the external javascript libraries and css files in index.html of the public folder of my react app and copied all the html of index.html of my theme in app.js which i downloaded. All the css are working fine but the javascript libraries are not working on the page.
Following is the demo of how i included the css files and javascript libraries in index.html of the public folder.

<script src="/assets/javascript/bootstrap.min.js"></script> 
<script src="/assets/javascript/jquery.easing.js"></script>    
<script src="/assets/javascript/jquery-waypoints.js"></script>

Now my question is, how should i include the javascript libraries so that it start working for me.
This might be a silly question, but i am new to it. Pardon me. I am trying for it from 2 days and did a lot of search for it but i failed. Please help me out with this issue.
I tried to put all the files in the src folder of my react app but it still not working.

Thanks in advance

[Timer]

Please provide your exact directory structure so we can help, or you can read the documentation we have about it.

I, however, suggest using react-bootstrap or reactstrap if you want to use bootstrap -- these give you React components which implement the JavaScript required for Bootstrap components so you're not reliant on jQuery.

[Timer]

Closing as abandoned. Let us know if you still need help.

[valorloff]

need help!
in Create React App don't works external libs like flexslider.min.js, parallax.js, massonry etc,
folder structure (course with "%PUBLIC_URL% replaced):

<script src="/__/firebase/4.3.0/firebase-app.js"></script>
    <script src="/__/firebase/4.3.0/firebase-database.js"></script>
    <script src="/__/firebase/init.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="/assets/theme/js/flickr.js"></script>
    <script src="/assets/theme/js/flexslider.min.js"></script>
    <script src="/assets/theme/js/lightbox.min.js"></script>
    <script src="/assets/theme/js/ytplayer.min.js"></script>
    <script src="/assets/theme/js/countdown.min.js"></script>
    <script src="/assets/theme/js/smooth-scroll.min.js"></script>
    <script src="/assets/theme/js/parallax.js"></script>

as I understand, this is due to the loading order of lib's files
in your doc:

Note that we normally encourage you to import assets in JavaScript files instead

could you show example how to, where locate and use imports of external .js?

[malishahi]

At the end, I did not understand how to use/import an external js lib in my CRA app. Can somebody help?
Thanks.

[kunwang0916]

@malishahi
Try following steps:

• including the external js file link in your /public/index.html
• use the external library with prefix window.

for example, JQuery.

• put following line in your /public/index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

• use it in your project:

window.$("#btn1").click(function(){
    alert("Text: " + $("#test").text());
});

[elharony]

Thanks @kunwang0916 !
Your answer helped me A LOT! 👍

[NagarajuGaddam1]

@kunwang0916 ,
Can we do the same with if that cdn contains react app and can we access all the classes in side my cdn react app?

Do we need to do anything in the webpack.config file?

Thanks in advance!

[kunwang0916]

@NagarajuGaddam1

Can we do the same with if that cdn contains react app and can we access all the classes in side my cdn react app?

I believe so, if you running into any trouble, please share sample code in https://jsfiddle.net/,
So we can get know better about your issue.

[omiq17]

@kunwang0916 Thanks a lot!
I am converting a jquery Datatable in React and you have just saved me.