React JS App Initial Folder Structure

Be familiar with the initially generated files of your React project.

Upon creating your first React JS app via the npx create-react-app command, you might wonder what its initially generated files are.

Here I created a React project called example, and it shows the breakdown of its files and directories with the text editor I’m using, Sublime Text 3.

Let’s dissect each of these files.

Main Folders

As shown in the image above, my example React project has seven main folders.

node_modules Folder

This directory contains all the libraries downloaded from npm (node package manager), defined from your package.json file. Upon creating your React JS app, node_modules is installed by default. But when you clone or fork, you need to execute npm install first.

public Folder

This contains all static files which you don’t want to be processed by webpack. This includes the following files:

• favicon.ico file. This is the default favicon logo you will see on your browser tab upon running the app via npm start.
• index.html file. This is the template file of the app.
• logo192.png file. This is the logo image file in 192x192 pixels, defined inside manifest.json.
• logo512.png file. This is the logo image file in 512x512 pixels, defined inside manifest.json.
• manifest.json file. This json file provides information about the app (such as name, author, icon, and description). It is used when a shortcut is added to the home screen of a device for quicker navigation.
• robots.txt file. This is a text file with instructions for search engine crawlers. This suggests what should or should not be crawled by the crawlers, and what specific crawler bots are allowed for SEO (Search Engine Optimization) purposes.

src Folder

This is the heart of a React project where the development mostly happens. You can also make this directory neat by assigning the components, libraries, routes, etc. to a separate folder to sort each file. It’s up to you but initially, src includes the following files:

• App.css file. This is the default generated css file of the app.
• App.js file. This is the default generated js file of the app.
• App.test.js file. This is the basic test file for the App.js component when you run the npm test.
• index.css file. It is recommended for every component to have an index.css file paired together with index.js.
• index.js file. Every component, including the root component, which is this whole src folder, is recommended to have an index.js file. It is a standard, and every time you import a component by just labeling its root, index.js is automatically read.
• logo.svg file. This is the sample React logo image asset initially displayed in the app project.
• reportWebVitals.js file. Upon generating, React adds a relayer by default that analyzes and measures the app’s performance using different metrics. Just pass a function to reportWebVitals.js.
• setupTests.js file. This file is used to avoid boilerplate in the app’s test files.

.gitignore File

This plain text file shows files or folders per line that must be ignored when pushing on Git.

package-lock.json File

This file keeps track of every installed package’s exact version, making it 100% reproducible even if they are updated by its maintainers.

package.json File

This is where all the libraries in your project are defined, even the default libraries generated upon creating the project via npx create-react-app, and the libraries generated via npm install.

README.md File

This markdown file is where you define or market your project repository and give instructions for optimal and hassle-free initial setup. README.md file is the first thing a visitor will be looking at when viewing projects on known platforms for showcasing repositories utilizing Git version control like GitHub, GitLab, or BitBucket.

Now that you know the structure and contents of an initially generated React App and its functionalities and use cases, it will be easier for you to navigate and code through it.

Learn more about SparkLearn EdTech from the following links:

MOOC: lrn.ac
Twitter: lrn.ac/twitter
Facebook: lrn.ac/facebook
GitHub: lrn.ac/github
Instagram: lrn.ac/instagram
LinkedIn: lrn.ac/linkedin
YouTube: lrn.ac/youtube