React App Folders Content

Congratulations!!! You've successfully created your first React app, and it is running on your browser, glitch-free. That's cool! But don't you wonder how you managed to get those files and folders in your React App? You didn't create them, so how come they are there?

In this article, I resolve the mystery of how the files and folders got into your React app and their usefulness there.

React App Content

When you open your React app directory in your system library or code editor, you come across four files and three folders attached to the root directory. In these root folders and files, there are several other folders and files and pre-written scripts and information for your project.

This section walks you through the files and folders and their functions in your application.

Node_modules

The node_modules directory is a crucial part of any JavaScript project, including React. In React, node_modules contain all React dependencies packages like react and react-dom, and other transitive dependencies such as babel, webpack, etc., required by your project. Together with the package.json file,node_modules manages React's default dependencies and extra dependencies used in your project. Due to its size, it is best left out and untracked by git.

Public

The public directory is a repository of static files and assets used in your project. By static files, I mean files that are not changing. The folder contains the index.html file where the /src/index.js gets rendered (also known as the page template); favicon.ico, React's default favicon (you can replace it with yours when building your application); logo192.png and logo512.png, ReactJS's logo images; manifest.json, which provides metadata when the application is installed in a desktop or mobile device; and robots.txt file that marks sites that are allowed for crawling and those that are not by search engines and bots.

Files in the public directory are not post-processed or minified by webpack to enable rapid network request response time. To reference any file in the public directory in the index.html file, %PUBLIC_URL% is used to replace public in the file's path.

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" >

This tag links the favicon.ico to the index.html file in the head element.

To reference a file in the public directory in any file in the src folder, process.env.PUBLIC_URL + /filename.ext is used.

function ReactImage() {
  return (
    <div>
        <img src={process.env.PUBLIC_URL + "/logo512.png"} alt="react-logo" />
    </div>
  )
}

The React logo image, logo512.png, stored in the public folder will be accessible in the ReactImage component in the src folder. This method is not efficient and should be avoided. Storing the image in the src folder and importing it into the ReactImage component is better and advisable.

SRC

In contrast to the public folder, the src folder is minified by webpack. It contains index.js, the JS entry point and its style, index.css; App.js, the container for all your React components, its test script, App.test.js, and its style, App.css; logo.svg, ReactJS's logo that rotates at the centre of the browser by default when you run the app; reportWebVitals.js file, a performance relayer that logs to the console, the performance of your application; and finally, setupTests.js file, a Jest test runner for running unit tests for your application logics and components.

.gitignore

Once you install a React application, git is initialized on the application to track and monitor status changes. The .gitignore file tells git to ignore the files and folders written in it.

package-lock.json

package-lock.json is automatically generated for any operations where npm modifies either the node_modules tree or package.json like in a React application. It contains well-defined information about your project's installed dependencies and locks them with their respective versions. It describes the exact tree that was generated such that future installed dependencies can generate identical trees, regardless of intermediate dependency updates.

package.json

The package.json file stores basic metadata about dependencies installed in the node_modules directory. Unlike package-lock.json, it can be published with your application.

For more information about package.json and package-lock.json, visit NPM's official documentations.

README.md

The README.md file usually accompanies a git initialized file, and your application is git-initialized by default. It contains useful information for developers and sometimes curious users about your project.

Conclusion

This article has successfully listed and explained the pre-installed files and folders that accompany your React application, their content, and their usefulness. At this point, it is safe to say mystery solved because you now know about React App content and its functions, and you will be careful with the ones you delete and allow to remain.

See you on the next episode, and don't forget to subscribe to my newsletter to get my latest releases directly in your mailbox.

Also, tell me how much you like this article and what I should do to improve it in the comment section or on Twitter @Tech Evangelist.

Ciao, 👋.

Episode 3: React App Content

Table of contents