When we run "npx create-react-app appname" command, it sets up the basic structure of the react app by providing the essential files and folders. Let's understand what are the files and the folders that are provided to us by Create React App.
node_modules: Contains the modules on which your project depends. In node_modules, you should see a folder named "react" which makes react run. You will never need to go in this folder.
public: The public folder contains the html file so you can tweak it ,for example set the page title. The script tag with the compiled code will be added automatically to it during the build process. You can put static assets like images, fonts and svgs in the public folder.
To reference the assets in the public folder, you need to use environment variable called "PUBLIC_URL".
Inside index.html you can use it like this;
<link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>Small explanation of some important files of the Public folder
public > index.html :
- This is a page template.
- This file must exist with the exact filename.
public > manifest.json:
- The web app manifest is a JSON file that tells the browser about your progressive Web App
- A typical manifest file includes the app name, the icons the app should use and the url that should be opened when the app is launched.
src: This is a folder that contains the source code. It is where all of our React related code lives and is when we work in to build our app. You need to put CSS and JS files inside src.
- src/index.js is the entry point. This file must exist with exact filenames.
.gitignore: is a file that is used to exclude files and folders from being traced by Git.
package.json: That manages our app dependencies and what is included in our node_modules folder for our project. Plus the scripts we need to run our project.
package-lock.json: The goal of package-lock.json is to keep track of the exact version of every package that is installed so that a product is 100% reproducible in the same way even if the packages are updated by the maintainer.
README.md: This is a markdown file that contains some useful tips and information about the project. "Markdown Files are designed for writing documentation in plain text that can be easily converted
Best Resources
- Manifest: https://web.dev/add-manifest/
- Public folder: https://create-react-app.dev/docs/using-the-public-folder/
- package.json : https://nodejs.dev/learn/the-package-json-guide
- package-lock.json: https://nodejs.dev/learn/the-package-lock-json-file