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
- Part 1: How to create a new React App
- Part 2: Easy Way To Create ReactJS Components
- How To Create DRAG & DROP Components Using REACT BEAUTIFUL DND Library
Steps followed for creating new React App
- Open Command Prompt (terminal in Ubuntu, CMD in Windows , etc.)
- Install Node and NPM
- Create React App
- 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
2. 1. Check the NODE and NPM Version
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
After the app is created you will get a message in terminal like this
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.
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 your app is launched in the default browser and this is the default page.
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