Setting Up Your React Environment (Installing React)

📌 Before You Start — What Do You Need?

✅ Basic Knowledge of JavaScript & HTML (just the basics — no need to be an expert).
✅ A computer with internet.
✅ VS Code (or any code editor) – We’ll use VS Code because it’s popular and easy.

📥 Step 1: Install Node.js

Why do you need Node.js?

• Node.js allows you to run JavaScript outside the browser.

• React needs Node.js to install tools and run your app.

✅ To Install Node.js

1. Go to: https://nodejs.org

2. Download the LTS (Long-Term Support) version (recommended for beginners).

3. Install it — Just click "Next" until it's done.

📥 Step 2: Install a Code Editor (VS Code Recommended)

Why VS Code?

• It’s free, powerful, and used by many developers.

• Download it here: https://code.visualstudio.com/

📥 Step 3: Open Terminal (Command Line)

You’ll need to type commands to set up React.
On Windows: Open Command Prompt or PowerShell
On Mac: Open Terminal

🚀 Step 4: Create Your React Project

The easiest way to start is using Create React App. This tool sets everything up for you.

📌 In your terminal, type this command:

npx create-react-app my-first-react-app

What does this do?

• It creates a folder called my-first-react-app.

• Inside, it sets up React, files, and folders you need.

• It takes a minute or two, so be patient.

📝 If you see an error like "npx not found," that means Node.js wasn’t installed properly. Go back to Step 1.

📥 Step 5: Go Inside Your Project Folder

After the project is created, go into the folder.

cd my-first-react-app

🚀 Step 6: Start Your React App

Now you can run your React app and see it in the browser.

npm start

• After a few seconds, your browser should automatically open.

• You’ll see a React welcome page that says:

Edit src/App.js and save to reload.

🎉 Congratulations! Your React app is running!

📝 What Just Happened? 

📂 What Files Did React Create?

✅ Quick Recap

❓ Common Issues

🎥 What’s Next?

For the upcoming lessons, we’re shifting to video tutorials, which will guide you step-by-step in a more interactive and visual way.

📹 Why Videos?

• Easier to follow — you can see exactly what to click, type, and how to structure your code.

• Covers both basic concepts and advanced techniques, taking you from beginner to confident React developer.

• You can pause, rewind, and practice at your own pace.

🔗 These videos will give you hands-on practice and real-world examples, making sure you understand not just the "how" but also the "why."

👉 So get ready to level up your React skills — the journey from beginner to pro starts now! 🚀