Step 1: Install Node.
js and npm
React requires Node.js and npm (Node Package Manager) to run.
1.1 Download & Install Node.js
1. Go to the official Node.js website.
2. Download the LTS (Long-Term Support) version for Windows.
3. Run the downloaded .msi file and follow the installation steps.
4. Ensure that you check the box "Add to PATH" during installation.
1.2 Verify Node.js and npm Installation
After installation, open Command Prompt (cmd) or PowerShell and type:
node -v
✅ If Node.js is installed, it will display a version number like v18.x.x.
Then, check npm (comes with Node.js):
npm -v
✅ If npm is installed, it will display a version number like 9.x.x.
Step 2: Install React.js Using Create React App
The easiest way to create a React app is by using the Create React App tool.
2.1 Create a New React App
1. Open Command Prompt (cmd)
2. Navigate to the folder where you want to create your React app. Use this command:
cd path\to\your\folder
(Example: cd C:\Users\YourName\Desktop)
3. Run the following command to create a new React app:
npx create-react-app my-first-app
• npxis a package runner that executes npm packages.
• create-react-app is an official tool to set up a new React project.
• my-first-app is the name of your app (you can change this).
Note: If you get an error with npx, install create-react-app globally:
npm install -g create-react-app
create-react-app my-first-app
2.2 Navigate into Your Project Directory
After React installs, go into the project folder:
cd my-first-app
2.3 Start the Development Server
To start your React app, run:
npm start
This will: ✅ Start a local development server.
✅ Open a new tab in your browser with the default React app at
http://localhost:3000/.
✅ You should see a screen with the React logo and some default text.
Step 3: Understanding the React Project Structure
Inside your React project folder (my-first-app), you will find:
📂 node_modules/ → Stores dependencies (do not edit manually).
📂 public/ → Contains static files like index.html.
📂 src/ → Main source code where components live.
📄 src/App.js → The main React component.
📄 src/index.js → Entry point for your app.
📄 package.json → Lists dependencies and scripts.
Step 4: Editing Your First React Component
1. Open my-first-app in a code editor (like VS Code).
2. Open src/App.js and replace the existing code with:
import React from 'react';
function App() {
return (
<div>
<h1>Hello, World!</h1>
<p>Welcome to my first React App.</p>
</div>
);
}
export default App;
3. Save the file and check your browser. It will update automatically.
Step 5: Building and Deploying
Once your app is ready for production, run:
npm run build
This creates an optimized version of your app inside the build/ folder, ready to be deployed.
Bonus: Common React Commands
• Start Development Server: npm start
• Install a Package: npm install package-name
• Remove a Package: npm uninstall package-name
• Build for Production: npm run build
• Check for Updates: npm update
• Run Tests: npm test
