title: What is the difference between importing a package after installing it or including it in index.html when a new react application is created?
body: <p>When, we use create-react-app while creating a new react application. It creates multiple files. Out of which index.html is the rendered html application, where multiple jsx elements are placed depending upon the react application App.jsx
  I was curious on what is the best way to import google fonts, bootstrap, jquery and other different external plugins?</p>
  
  <p>As I have researched there are two ways of importing external modules. For eg. if we consider bootstrap that is to be imported from cdn: <a href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" rel="nofollow noreferrer">https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js</a></p>
  
  <p>Then, one way to import is place it in public/index.html:</p>
  
  <pre><code># Rest of the index.html code
  &lt;div id="root"&gt;&lt;/div&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  # Rest of the index.html code
  
  </code></pre>
  
  <p>Other way is to install bootstrap using <code>npm i bootstrap@4.3.1 --save</code>, and then put it as import in src/index.js .</p>
  
  <p>The above thing can be applied to multiple places. Say, we have to import popper.min.js or jquery.js or import css fonts. Which is better? Placing it in index.html or inside index.js?
  Also, what is the major difference between placing it at the two different places?</p>