Part 1: How to create a new React App Explained in simple steps

A detailed step by step guide on how to create a new REACT APP and run it locally. For documentation please follow the link REACT DOCS.

Quick Links to other ReactJS Tutorials

1. Part 1: How to create a new React App
2. Part 2: Easy Way To Create ReactJS Components
3. How To Create DRAG & DROP Components Using REACT BEAUTIFUL DND Library

Steps followed for creating new React App

1. Open Command Prompt (terminal in Ubuntu, CMD in Windows , etc.)
2. Install Node and NPM
3. Create React App
4. Run the React App Server

npx is not a typo — it’s a package runner tool that comes with npm 5.2+.

2. Install NODE and NPM

The Create React App used to create react projects is maintained by Facebook and works on any platform, such as, macOS, Windows, Linux, etc. To be able to create projects using Create React App you should have installed Node Version ≥ 8.10 and NPM Version ≥ 5.6

To install Node and NPM follow the link : Link1 , Link2

2. 1. Check the NODE and NPM Version

Command to check NODE version : node -v

Command to check NPM Version : npm -v

3. Create React App

The Create React App is maintained by Facebook and can works on any platform, for example, macOS, Windows, Linux, etc. Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.

It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 10.16 and npm >= 5.6 on your machine.

Create React App by using command: npx create-react-app my-app

Create React App using command : npx create-react-app my_app

After the app is created you will get a message in terminal like this

After the react app is created successfully

3.1 After installation is finished change the directory to the create app

After changing the directory you will see files created as shown below in the image.

Files created after app installation is finished.

4. Now run the Server

Execute the below command to run the server. Your default browser will be opened automatically and your app will run locally in default port 3000

Command to run the server: npm start

You will see this once your server has started successfully

After the server has started successfully

After the server has started your app is launched in the default browser and this is the default page.

Default page after server is started successfully

Next Post: How to create React Components and pass props to Components.

Read more of my articles on React App Development and other awesome React packages

Part 2: Easy Way To Create ReactJS Components | by KIHSA Rai | Jul, 2021 | Medium

1. DRAG & DROP : REACT BEAUTIFUL DND | by KIHSA Rai | Jul, 2021 | Medium

Learning ReactJS: Two-Way Data Binding | by KIHSA Rai | May, 2022 | Medium