Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Next Steps with Create React App

Posted by Serdar Halac
Serdar Halac
15,259 Points

Can someone explain all those changes since the intro to react videos? Lots of unexplained things

In the intro to react course, we use script tags to include app.js in index.html

But in this course, I don't see a single reference to app.js in index.html, no import no nothing.

In the intro to react course, the script tags included references to react, app.js, babel, etc...

In this course, there isn't even a reference to a bundle.js or anything in the tags! Just the id, but it seems weird to me. How does the HTML know to use app.js and react as scripts?? Where does it go?

Is something going on in the background that connects the app.js file to the index.html file?

What changed since the intro to react course? Also, why is the file called app.js and not app.jsx? This is what was used in the past. And why are we importing react in results, searchform, AND app.js? Isn't that wasteful? Why not import in app.js only since app.js imports the components anyways? Wouldn't that just end up with a single file that uses everything once? And what is export default?

3 Answers

Seth Kroger
Seth Kroger
56,413 Points
Seth Kroger
Seth Kroger
56,413 Points

Ah yes, it's creating what's called a Progressive Web App (PWA), which allows a browser to pre-load the site and even allow it to be used offline. The manifest <link> gives supporting browsers the information necessary to load the scripts.

Serdar Halac
Serdar Halac
15,259 Points

Thansk for your input. By the way, I was able to solve my question with the create-react-app docs, which state:

Changing the HTML The public folder contains the HTML file so you can tweak it, for example, to set the page title. The <script> tag with the compiled code will be added to it automatically during the build process.

So basically the index.html file that you manipulate does NOT have a src to an app.js or index.js on purpose, because the framework takes care of it.

But even better, here is Dan Abramov, the co-creator of create-react-app himself explaining it:

Under the hood, Create React App uses Webpack with html-webpack-plugin.

Our configuration specifies that Webpack uses src/index.js as an “entry point”. So that’s the first module it reads, and it follows from it to other modules to compile them into a single bundle.

When webpack compiles the assets, it produces a single (or several if you use code splitting) bundles. It makes their final paths available to all plugins. We are using one such plugin for injecting scripts into HTML.

We have enabled html-webpack-plugin to generate the HTML file. In our configuration, we specified that it should read public/index.html as a template. We have also set inject option to true. With that option, html-webpack-plugin adds a <script> with the path provided by Webpack right into the final HTML page. This final page is the one you get in build/index.html after running npm run build, and the one that gets served from / when you run npm start.

Hope this helps! The beauty of Create React App is you don’t actually need to think about it.

Seth Kroger
Seth Kroger
56,413 Points
Seth Kroger
Seth Kroger
56,413 Points

Create React App configures a tool called webpack to build and package up the app. It will package up all the JavaScript files into a file called bundle.js that you should see included in the index.html file. CRA will configure it so app.js is considered the entry-point, or starting code to run for the bundle.

Serdar Halac
Serdar Halac
15,259 Points
Serdar Halac
Serdar Halac
15,259 Points

Thanks for answering. Here is the index.html file in the public folder:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

I don't really see a reference to app or bundle.js?

Serdar Halac
Serdar Halac
15,259 Points 
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><title>React App</title><link href="/static/css/main.ca837a83.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/static/js/main.990fc8d6.js"></script></body></html>

This is the index.html file in the static folder, in the build file, there is a src script tag for a main.990fc8d6.js, is that it? If so, why is there no reference in the public folder html but there is a reference in the build static folder?