How to Set Up React Environment Using Create React App

Before building React applications, you need a development environment where you can write, run, and test your React code. One of the easiest ways for beginners and professionals alike is using Create React App (CRA) — a tool officially supported by React that sets up everything you need automatically.

Step 1: Install Node.js and npm

React requires Node.js (runtime) and npm (Node package manager) to manage dependencies.

  1. Go to the official Node.js website: https://nodejs.org

  2. Download the LTS version (recommended for stability).

  3. Install it following the default prompts.

Check the installation in the terminal:

 
node -v # Should display Node.js version npm -v # Should display npm version

Tip: Use LTS, not the Current version — it’s more stable for React projects.

Step 2: Create a New React App Using CRA

Open your terminal or command prompt and navigate to the folder where you want your project. Then run:

 
npx create-react-app my-app

  • npx comes with npm 5.2+ and above — it allows running packages without installing globally.

  • my-app is your project folder name; you can rename it as you like.

CRA will automatically:

  • Set up a React project structure.

  • Install React, ReactDOM, and React scripts.

  • Configure Webpack and Babel internally.

Step 3: Navigate to Your Project and Start the Development Server

cd my-app
npm start

  • This command runs the app in development mode.

  • Open http://localhost:3000 in your browser.

  • Any code changes automatically reload the page (Hot Module Replacement).

Step 4: Understanding the Project Structure

After CRA creates the project, you will see a folder structure like this:

my-app/
 ├─ node_modules/      # Installed npm packages
 ├─ public/            # Public assets, index.html lives here
 ├─ src/               # Your React source code
 │   ├─ App.js         # Main App component
 │   ├─ App.css        # App styling
 │   ├─ index.js       # Entry point
 │   └─ index.css      # Global styles
 ├─ package.json       # Project configuration & dependencies
 ├─ package-lock.json  # Locks installed versions
 └─ README.md          # Project documentation

Tip:

  • index.js is the entry point where your React app is injected into the DOM.

  • App.js is the main component where you can start coding your UI.

Step 5: Running the App and Making Your First Change

Open src/App.js in a code editor (like VS Code) and change:

 
<h1>Welcome to My First React App!</h1>

Save the file, and the browser automatically updates to reflect the change.

Tip: Hot reload allows you to see changes instantly without manually refreshing the page.

Step 6: Optional — Installing Additional Tools

  • React Developer Tools (browser extension) – inspect component hierarchy.

  • VS Code extensions:

    • ES7+ React/Redux/React-Native snippets

    • Prettier for code formatting

    • Live Server (if you want static preview)

Step 7: Next Steps After Setup

After setting up CRA, you can:

  • Create additional components in the src folder.

  • Start learning JSX, Props, State, and Hooks.

  • Integrate CSS, SASS, or styled-components.

  • Explore routing with React Router

FAQ

Q1: Do I need Node.js installed globally?
A: Yes, Create React App requires Node.js. NPM comes bundled with it.

Q2: What if npx create-react-app fails?
A: Update npm:

 
npm install -g npm

or clear npx cache:

 
npx clear-npx-cache

Q3: Can I use CRA for production apps?
A: CRA is great for starting projects. For large-scale production apps, you might customize Webpack or use frameworks like Next.js.