How to Run a React App: Step-by-Step Guide

To run a React app, first create it using npx create-react-app my-app. Then, navigate into the app folder and start the development server with npm start, which opens the app in your browser.

Syntax

Running a React app involves these main steps:

• npx create-react-app my-app: Creates a new React project named my-app.
• cd my-app: Moves into the project folder.
• npm start: Starts the development server and opens the app in your browser.

bash

npx create-react-app my-app
cd my-app
npm start

Example

This example shows how to create and run a simple React app that displays a welcome message.

bash

npx create-react-app welcome-app
cd welcome-app
npm start

Output

Starting the development server...
Compiled successfully!

You can now view welcome-app in the browser.

Local:            http://localhost:3000
On Your Network:  http://192.168.x.x:3000

Note that the development build is not optimized.

Common Pitfalls

Common mistakes when running a React app include:

• Not installing Node.js and npm before running commands.
• Running npm start outside the React project folder.
• Using outdated versions of create-react-app or missing dependencies.
• Not waiting for the development server to fully start before opening the browser.

bash

Wrong way:
cd my-app
npm start
# Error if 'my-app' folder does not exist or is not a React app

Right way:
npx create-react-app my-app
cd my-app
npm start

Quick Reference

Summary tips for running a React app:

• Always use npx create-react-app to start fresh projects.
• Navigate into your project folder before running npm start.
• Make sure Node.js and npm are installed and updated.
• The development server runs on http://localhost:3000 by default.

Key Takeaways

Use npx create-react-app my-app to create a new React project easily.

Always run npm start inside your React project folder to launch the app.

Ensure Node.js and npm are installed before starting.

The React development server opens your app automatically in the browser at localhost:3000.

Avoid running commands outside the project folder to prevent errors.