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

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/jquery.min.js"></script>

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

<link rel="stylesheet" type="text/css" href="/assets/stylesheets/bootstrap.css" > <link rel="stylesheet" type="text/css" href="/assets/stylesheets/style.css"> <link rel="stylesheet" type="text/css" href="/assets/stylesheets/responsive.css">

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

[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());
});

[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?