How to Set Up React Project from Scratch Quickly

To set up a React project from scratch, install Node.js, then run npx create-react-app my-app in your terminal. This command creates a ready-to-use React project folder with all necessary files and dependencies.

Syntax

The main command to create a React project is npx create-react-app <project-name>. Here:

• npx runs packages without installing them globally.
• create-react-app is a tool that sets up a React project with default settings.
• <project-name> is the folder name for your new project.

After running this, navigate into the folder with cd <project-name> and start the development server with npm start.

bash

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

Example

This example shows how to create a React project named my-app, start the development server, and see the default React welcome page in your browser.

bash

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

Output

Compiled successfully!

You can now view my-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.
To create a production build, use npm run build.

Common Pitfalls

1. Not having Node.js installed: The create-react-app command requires Node.js. Install it from nodejs.org first.

2. Using outdated create-react-app globally: Avoid installing create-react-app globally with npm install -g create-react-app. Always use npx to get the latest version.

3. Running commands in the wrong folder: Make sure to cd into your project folder before running npm start.

bash

npm install -g create-react-app  # Avoid this legacy approach

# Instead, use:
npx create-react-app my-app

Quick Reference

Summary tips for setting up React projects:

• Install Node.js (version 16 or higher recommended).
• Use npx create-react-app my-app to create projects.
• Navigate into your project folder with cd my-app.
• Start the development server with npm start.
• Edit src/App.js to change your app.

Key Takeaways

Install Node.js before creating a React project.

Use npx with create-react-app to start a new React app easily.

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

Avoid installing create-react-app globally to prevent outdated setups.

Edit src/App.js to customize your React application.