How to create React App | React project structure - React Tutorial


Create React App

Create a folder anywhere as work place in which you want to create react app. Open this folder.

Press shift + right click and select "Open Command Window Here".

open command prompt

To confirm that Node.js is installed, type command as below 

is node js installed

Now create react application using below command

npx create-react-app my-app 

create react app

Here my-app is application name. This command will take few minutes to install all dependencies, packages (Babel, Webpack, React, ReactDOM) and finally react application will be created. Go to you work place folder to view my-app application.

Download and install VSCode (Visual Studio Code) one of best IDE of react. Now open your react app in VSCode. For this go to File -> Open Folder -> select my-app and click Select Folder. React app will be opened in VSCode.

Go to View -> Terminal to open VSCode terminal. Now you can type any commands in this terminal.

To start Development Server and load app home page in browser, type command npm start as below 

How to start react development server

App home page will be viewed in browser like this

start react app in browser

App Directory Structure

My-app
This is your application name and root folder. It contains three folders and four files.

react project structure

Node-modules
It contains all react packages and modules installed like Webpack, Babel, React, ReactDOM etc.

Public
Webpack does not read the files into the public folder. Instead it will be copied to build folder as it is. Webpack only reads the files inside the src folder.

To access the assets from inside the public folder, a special variable PUBLIC_URL is used. If you open index.html file, you will see below line to give access of favicon.ico

<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

When you build react app, %PUBLIC_URL% is substituted with the correct absolute path.

Public folder contains four files

Favicon.ico
Its favicon for website

Index.html
This file holds the html template of our app

Manifest.json
This file provides metadata used when your web app is installed on a user’s mobile device or desktop

Robots.txt
This file is used to instruct search engine to crawl or not to crawl given web URL.


Src
By default, this folder contains following files

App.css
It’s a CSS file related to App.js but it is global

App.js
Its parent component of your react app

App.test.js
Its test environment

Index.js
This file is javascript entry point

Logo.svg
It is react app log file

serviceWorker.js
It can help to access website offline


.gitignore
It is used when you want to ignore git push

Package-lock.json
It is version control package json file

Package.json
All dependencies mentioned in this file

README.md
It is readme file

Note: For project to build, index.html and index.js files must exist with exact filenames.


No comments:

Post a Comment