Setting Up React Environment

In the last lesson, How React Works, you saw what React does when your app runs. Now let’s get your computer ready to build with it, one tool at a time.

🤔 Why Set Up Tools First?

Here is the pain you want to avoid:

• You find an exciting React tutorial, so you copy the first command.
• Then the terminal says node: command not found.
• Now you are stuck before you even start, right? That feels frustrating.

The fix is simple, so let’s get it out of the way:

• We install the few tools React needs ahead of time.
• Then when you create your first app in the next lesson, every command just works.

So what do we actually need? Only a small toolkit:

• Node.js runs JavaScript on your computer and brings npm along with it.
• A code editor is where you write and organize your code, and we will use VS Code.
• A modern browser is where your app runs and where you find and fix problems.

That is the whole list. Let’s set up each one.

🟢 Step 1: Install Node.js (and npm)

So what is Node and why do you need it?

• Node.js is a program that lets your computer run JavaScript outside the browser.
• React’s tools are built in JavaScript, so you need Node to use them.
• When you install Node, you also get npm for free.
• npm stands for Node Package Manager. Think of it like an app store for code, so it downloads React and other code packages your project needs.

💻 Step 2: Install a Code Editor

So why use a proper editor instead of any text app?

• A code editor is the program where you write your code.
• You could use any text editor, but a real code editor adds color highlighting, smart suggestions, and error warnings as you type. That makes everything easier.

We will use VS Code (Visual Studio Code), and here is why it is a safe pick:

• It is free.
• It works on Windows, Mac, and Linux.
• Most React developers use it, so help is easy to find.

Here are the two extensions worth installing right away.

🌐 Step 3: Use a Modern Browser with React DevTools

Your React app runs in the browser, so you will spend a lot of time there. Here is what to know:

• Any modern browser works well. Chrome, Firefox, or Edge are all good choices.
• If you already have one of these, you are set.

There is one extra tool that makes React much nicer in the browser:

• It is called React Developer Tools, a free browser extension.
• It lets you look inside your React app while it runs.
• So you can see each component, check its data, and find problems faster.

⚠️ Common Mistakes

A few small things trip people up at this stage. Watch out for these.

• Installing the wrong Node version. Grab the LTS build, not the one labeled “Current”. Current is for testing new features and can be less stable.
• Forgetting to restart the terminal. If node -v fails right after installing, open a brand new terminal window. The old one does not know about Node yet.
• Skipping React DevTools. Without it, you debug by guessing. With it, you can see exactly what each component is doing.
• Installing too many extensions at once. It is tempting to add everything. Start with the two above so your editor stays simple and fast.

✅ Best Practices

• Stick with the LTS version of Node so your setup stays stable.
• Turn on Prettier’s Format on Save in VS Code settings so your code is tidied every time you save.
• Keep one main browser for development so your DevTools and extensions are always in the same place.
• Run node -v and npm -v whenever something feels broken. It is a fast way to confirm your tools are still there.

🧩 What You’ve Learned

✅ Node.js runs JavaScript on your computer, and installing it gives you npm, the package manager that downloads React.

✅ You can confirm the install worked by running node -v and npm -v and seeing version numbers.

✅ VS Code is a free, popular editor, and the ES7 React snippets and Prettier extensions make writing React faster and neater.

✅ A modern browser plus React Developer Tools lets you look inside your running app and debug it with confidence.

🧠

Check Your Knowledge

Test what you learned. Pick an answer for each question, then click Check.

1. 1

   What do you get automatically when you install Node.js?

   VS Code npm, the package manager Google Chrome React Developer Tools
   Check

   Why: Installing Node.js also installs npm, which downloads React and other code packages for your projects.

2. 2

   Which command checks that npm is installed and shows its version?

   npm version npm -v node npm check npm
   Check

   Why: Running npm -v prints the installed npm version, confirming it is set up correctly.

3. 3

   Why do we install React Developer Tools in the browser?

   To run JavaScript outside the browser To format your code on save To inspect components and their data while the app runs To download React packages
   Check

   Why: React Developer Tools adds Components and Profiler tabs so you can see and debug your running app.

4. 4

   Which version of Node.js should a beginner install?

   The Current version The LTS version The oldest version available Any beta build
   Check

   Why: The LTS (Long-Term Support) version is the stable choice most people should use.

Score: 0 / 4 Reset

🚀 What’s Next?

Your computer is now ready, so it is time to build something real. In the next lesson we will use these tools to create and run an actual React project.

Creating Your First React App