Wednesday, February 10, 2021

Create React App & Folder Structure

In this Article, you will learn how to create a simple React app.

Prerequisites

1.    Install Node.js and NPM

2.    Install Visual Studio Code

Create React app

1.    We will use create-React-app NPX tool to create a simple React app.

2.    Open Node.js command prompt.

3.    Navigate to the respective folder, where you want to create React app.

4.    Type the command given below in a console to install create-React-app using NPX tool.

npx create-react-app myblog

5.    Navigate to the myblog folder.

6.    Type the command code . in a console to open the app in Visual Studio code.

7.    React app will have the folder structure given below.



8.    Type the command given below in a console to launch React app in the Browser.

npm start


In the previous section, you learned how to install and create a project in React. Now, whenever we create a React project, it automatically creates a lot of files and folders. So, in this article, I am going to explain what these files and folders are.

When we create a React project, our application's structure looks like this.

node_modules

The node_modules folder holds all the dependencies and sub-dependencies of our project. We only had React, React DOM and React scripts but React scripts have a lot of other dependencies which are present inside this folder.

Public folder

Basically, this folder contains 3 files as we have seen.

  • favicon.ico - it is an icon file which contains an icon which displays on the browser.
  • index.html - it is an important file. Due to this file, the public folder, known as “root folder”, gets served by the web server in the end. Index.html is a single HTML page present in this project.
  • manifest.json - this file contains a lot of information related to our application like short_name, name, icons, start_url, display etc. We can also define other metadata about our application.

src folder

This folder contains actual source code for developers. This is the place where our React application is present. We can create our own subdirectory inside this directory. For faster rebuilds, files inside only this folder are processed by Webpack. However, this folder already contains the following files. 

  • App.css - this file gives some CSS classes or we can say some styling which is used by App.js file.
  • App.js - App.js is a sample React component called “App” which we get for free when creating a new app.
  • App.test.js - this is the test file which basically allows us to create the unit tests for different units or we can say for different components.
  • index.css - it stores the base styling for our application.
  • index.js - index.js stores our main Render call from ReactDOM (more on that later). It imports our App.js component that we start with and tells React where to render it (remember that div with an id of root?).
  • logo.svg this is Scalable Vector Graphics file which contains the logo of Reactjs. By this file, we are able to see ReactJS logo on the browser.
  • registerServiceWorker.js - as its name applies, it is important for registering a service which is generated automatically and creates Progressive Web Apps which are necessary for mobile React Native apps.

Package.json

It is a standard file found in every project. It contains the information like the name of project, versions, dependencies etc. Whenever we install a third party library, it automatically gets registered into this file.

Example - content of package.json file

A point to be remembered at the time of working with React applications is that, for the project to build, these files must exist with exact filenames.

  1. public/index.html is the page template;
  2. src/index.js is the JavaScript entry point.

We can delete or rename the other files.