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

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

react project structure

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

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

Its favicon for website

This file holds the html template of our app

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

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

By default, this folder contains following files

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

Its parent component of your react app

Its test environment

This file is javascript entry point

It is react app log file

It can help to access website offline

It is used when you want to ignore git push

It is version control package json file

All dependencies mentioned in this file
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