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 package.json
yarn.lock
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 **yarn.lock** !
README.md
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.
.gitignore
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/
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.
src/
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.
Thank You :)
Stay Tuned for part 04
