• 10 hours
  • Medium

Free online content available in this course.



Got it!

Last updated on 3/31/22

Look at what's been installed and generated

Log in or subscribe for free to enjoy all this course has to offer!

Let's take a look at the structure of your new React app:


Most of what we'll be concerned with in this course is inside the  src/  directory, but let's take a moment to review the rest of the root directory's contents.

node_modules/ and package.json

These should be familiar to you if you've had any experience working on a node.js project in the past. In brief,  node_modules/  contains all the libraries and external code that your package manager loads based on the dependencies list you define in  package.json .


Similarly, `yarn.lock` relates to package management. If  package.json  describes your app's dependency requirements,  yarn.lock  describes exactly what it must install to meet those requirements, down to the exact version of each dependency.

This file is useful for keeping track of the exact version of dependencies that you're using in your application. If you're using npm, another popular node package manager, you won't even have this lockfile.


This generated file contains extensive documentation on the use ofcreate-react-app . 📝  There is a lot of useful information here about developing and maintaining your  create-react-app application. Note that it generally references the npm package manager, and since we're using yarn, you'll need to modify the npm commands appropriately. 


 create-react-app generates a . gitignore for you that you should feel free to replace or expand as you see fit.


 Public/  is the public root of your site. Files in here are accessible to anyone on the web. It's a good place to keep static files and assets that aren't being managed in the  src/  directory of your React app.


Your application code! 😎

At the time of this writing (version 1.0.3 of  create-react-app ) this should be:


You can see that there's some CSS and SVG in here in addition to JavaScript. That's because our build tools allow you to import other assets into your JavaScript code directly, just as they allow you to express HTML directly in your code.

We'll take a look at the JavaScript files here, and how it all ties together, in the next section.

Handling non-javascript assets in React

When we look in thesrc  directory in the next chapter, you may notice that JavaScriptimport  statements are being used to load non-JavaScript assets like CSS, images, and web fonts.

A traditional website loads assets like these from remote files based on urls in  src  attributes in HTML tags or stylesheet rules, but Webpack loaders (which create-react-app is using behind the scenes to build your app) let you load them directly in Javascript from files in the 'src' directory.

Example of certificate of achievement
Example of certificate of achievement