Let's take a look at the structure of your new React app:
node_modules/ public/ src/ .gitignore README.md package.json yarn.lock
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
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 of
create-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:
App.css App.js App.test.js index.css index.js logo.svg
When we look in the
A traditional website loads assets like these from remote files based on urls in