React 3030 — Episode 2 (Project Folder Structure)
I decided to spend 30 minutes every day for 30 days to learn React. I nicknamed this project React 3030. This is day 2.
On day 1, I created a new react project using create react app. An app created with Create React App has a well defined folder structure.As shown below, there are three folders: node_modules, public and src.
Node_modules Folder
The node_modules folder is not unique to React. Every node project including Angular and Express JS have this folder. Remember when we installed node before we could start creating React Apps on day 1 of React 3030?
The node_modules folder contains third party libraries together with react itself. Third party libraries are libraries (with specific functionality) that have been developed by other people beside ourselves or the company we work for. When writing code, we usually depend on one or more third party libraries so we do not have to build every functionality from scratch. This is why these third party libraries are popularly referred to as the dependencies of a project.
To install any of these node libraries (aka packages), we run from the terminal the command npm install package or yarn install package depending on whether we use npm or yarn to manage these dependencies. We replace package in these commands with the name of the package we want to install.
As I mentioned earlier, React library itself is also found in the node_modules folder.
Public Folder
The public folder contains index.html, the favicon, manifest.json and React logo image files. These files are known as the public assets of the app. The output of this html file is what is displayed in the browser when you run the app. Every data that you see in the browser is displayed using this single html file.
The manifest.json file contains metadata about our application.
Src Folder
There are several files in the src folder. We will pay attention to only a few of them for now.
The App.js file contains the code behind the header that we see in the browser. If we make changes to the App.js file, what we see in the browser is updated. The App.css file contains CSS styling for App.js . The index.css is the global css file — it handles styling for the whole application.
In index.js, tells react which portion in the index.html file react should update dynamically.
Outside of the folders we’ve looked at, there are four files: package.json, package-lock.json, Readme.md and .gitignore.
.gitignore
When we write code, we usually add it to a version control system such as git. When we commit our code to git, there are files and folders we do not want git to keep track of. The node_modules folder is an example. We also do not want to commit files which contain sensitive information such as passwords or api keys to git.
We register these files and folders in .gitignore file so git skips them when it tracks changes to our files.
Readme.md
This is a text file that introduces and explains what your project is about. It is a very important file because on Github (same on bitbucket and others), it is the first file people read to understand the goal of your project. You would typically also add in this Readme.md file, the steps a person should follow to run your app on their computer.
Thanks for staying with me through day2.
