Install your tools
Set up Node.js, VS Code and React Developer Tools, and learn how the live code sandboxes in this course work.
Before you write any React, you need a small workshop: a program that runs JavaScript on your computer, an editor to write code in, and a browser tool that lets you look inside a running React app. This lesson sets up all three.
It takes about 30 minutes, and most of that is waiting for downloads. You only do it once.
The live sandbox
Most of this course happens right here in the browser, inside sandboxes. A sandbox is a small code editor on the left with a live preview on the right. When you change the code, the preview updates by itself.
Try it now. Change the text between <h1> and </h1>, and watch the preview.
You do not need to understand this code yet. By the end of Day 1 you will be able to write it yourself. If you break something, use the reset button in the top-right corner of the sandbox to get the original code back.
Sandboxes are great for learning, but real projects live on your computer. That is why you still need the tools below. From Day 1 onward, each day ends with a checkpoint that you build in your own project.
Node.js and npm
Node.js is a program that runs JavaScript outside the browser. You will not write Node code in this course, but the tools that build React apps are written in JavaScript, so they need Node to run.
Node comes with npm (the Node Package Manager). npm downloads packages, which are pieces of code other people have published, such as React itself.
Download Node
Go to nodejs.org/en/download and install the LTS version (24 or newer). LTS stands for Long-Term Support: it is the stable version most people should use.
Open a terminal
A terminal is a window where you type commands instead of clicking.
- macOS: press Cmd + Space, type "Terminal" and press Enter.
- Windows: open the Start menu and search for "Terminal" (or "PowerShell").
- Linux: you probably know already. Look for "Terminal" in your apps.
Check the versions
Type each command and press Enter:
node -v
npm -vYou should see version numbers, something like v24.11.0 and 11.6.2. The exact numbers do not matter, as long as Node starts with 24 or higher.
VS Code
You can write React in any text editor, but VS Code (Visual Studio Code) is free, fast, and the most popular choice. Download it from code.visualstudio.com.
Once it is installed, open the Extensions panel (the icon made of four squares on the left) and install:
- Prettier - Code formatter, which tidies up your code's spacing and line breaks every time you save.
- ESLint, which underlines common mistakes as you type. Your project may use a different checker called Oxlint instead; both work the same way from your point of view.
To make Prettier run on every save, open Settings (Cmd + , on macOS, Ctrl + , on Windows and Linux), search for "format on save", and tick the box.
Deep diveWhy format on save?
Formatting tools stop you from thinking about spaces and line breaks. They also make mistakes easier to spot. If you forget a closing bracket, Prettier will refuse to format the file, or it will indent everything after the mistake in an odd way. That is a hint that something is wrong.
VS Code also has a built-in terminal. Open it with View → Terminal. From now on you can type commands there instead of switching windows.
React Developer Tools
React Developer Tools is a browser extension. It adds two tabs to your browser's developer tools: Components and Profiler. The Components tab shows your app as a tree of React components, so you can see exactly what React has drawn and why.
Install it for your browser:
If you use Safari, you can skip this for now. The react.dev guide explains a workaround, and everything in this course also works without it.
You will open the Components tab for the first time in the next lesson, once you have an app to look at.
Check your workshop
Open the terminal inside VS Code (View → Terminal) and run the two version commands again. Then write down three things:
- Your Node version.
- Your npm version.
- Whether the React Developer Tools icon appears in your browser's toolbar. You may need to click the puzzle-piece icon and pin it.
Show solution
A working setup looks something like this:
$ node -v
v24.11.0
$ npm -v
11.6.2Your numbers will probably be different, and that is fine. What matters is that Node is version 24 or higher. The React icon in the toolbar stays grey on sites that do not use React. It lights up on sites that do, such as react.dev itself. Visit react.dev to check that the extension is working.
Why do you need Node.js if React runs in the browser?
What does the Components tab in React Developer Tools show?
Day 0 progress