Understanding the React Folder Structure (Part III)
2 min read
Let’s take a look at the structure of your new React app:
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.
Don’t change anything in
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.
gitignore file is a text file that tells Git which files or folders to ignore in a project. A local . gitignore file is usually placed in the root directory of a project. You can also create a global . gitignore file and any entries in that file will be ignored in all of your Git repositories
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:
Thank You :)
Stay Tuned for part 04