PHASE 0Beginner ~18 min· topic 3 of 4

Topic 0.3

What You Need First and Your Tools

In one line

React is plain modern JavaScript plus JSX, so you need a handful of JavaScript features (arrow functions, destructuring, spread, map and filter, modules, ternaries, promises), Node.js with npm, an editor and React DevTools.

Think of it like this

Learning to drive. You don't need to be a mechanic, but you must know the pedals, the mirrors and the road signs before the first lesson. For React, the pedals are a few JavaScript features you'll use in every component. If one of them is new to you, spend an hour in the JavaScript course first; it will save you days.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Arrow function: A short way to write a function: (x) => x * 2.
Destructuring: Unpacking values from an object or array into variables: const { name } = user.
Spread: ... copies the items of an array or the fields of an object into a new one.
map: An array method that turns every item into something new and returns a new array.
Ternary: A one-line if/else that gives a value: isOn ? "On" : "Off".
Module: A JavaScript file that shares code with export and uses other files' code with import.
Node.js and npm: Node runs JavaScript on your computer; npm downloads packages such as React.
React DevTools: A browser extension that shows your components, their props and state, and how long they take to render.

Step by step

01Check your JavaScript

Read this snippet. If you can say what every line does, you're ready. If not, the JavaScript course topics in brackets cover each feature.

check.jswhole filejavascript

const user = { name: "Asha", skills: ["HTML", "CSS"] };
const { name, skills } = user;                 // destructuring
const more = [...skills, "React"];              // spread
const upper = more.map((s) => s.toUpperCase()); // map + arrow
const label = more.length > 2 ? "busy" : "free"; // ternary
console.log(`${name} knows ${upper.join(", ")} (${label})`);

02Install Node.js

Download the LTS (long-term support) version from nodejs.org and install it. Then check it in a terminal. Any current LTS works for React; the exact numbers on your machine will differ.

Terminalwhole filebash

$ node --version
v24.11.0
$ npm --version
11.6.1

03Get an editor and React DevTools

Install VS Code (or any editor you like). In your browser's extension store, install React Developer Tools. On a page built with React, DevTools gets two new tabs: Components (the tree, props and state) and Profiler (render timings).

04How the live editor on Hectal works

React examples here have a JSX tab (and sometimes CSS). Edit the code; after a short pause the preview reruns. Underneath is the Console: console.log output and React's own warnings appear there. Format tidies your code, the reset arrow brings the example back, and New tab opens it full screen.

Each example runs real React 19 (the development build, which prints helpful warnings) and can import a few libraries you'll use later, such as React Router and Zustand. It is the same setup the exercises use to check your work.

Try it yourself

1
Predict before you run
In the first example, add console.log(more.map((s) => s.length)); at the end. Predict the output first. (It's [ 4, 3, 5 ].)
2
Add a skill
In the Profile example, add "TypeScript" to the skills array. Which lines on the page change? Does the "Longer names" line include it?
3
Silence the warning properly
In the third example, change <li> to <li key={f}>. The warning disappears because each item now has a unique key.

Code & diagrams

The JavaScript you'll use in every component New tab

Console

(nothing was printed)

Expected console output

[ 'HTML', 'CSS' ] [ 'HTML', 'CSS', 'React' ]
[ 'HTML', 'CSS', 'REACT' ]
[ 'HTML', 'React' ]
Asha is busy
Asha -> Asha K.

The same features inside a React component New tab

Destructuring, spread, filter, map, a ternary and a template literal, all in one small component. Each line is plain JavaScript inside JSX braces.

Preview

Press Run to see the page.

Console

Nothing logged yet.

The console shows logs and React's warnings New tab

React's development build checks your code while it runs and prints warnings like this one. You'll learn why lists need keys in Topic 3.3.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

Rendering 2 fruits
Each child in a list should have a unique "key" prop.

Check the render method of `App`. See https://react.dev/link/warning-keys for more information.

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Forget the return in an arrow with braces

In the Profile example, change the map to skills.map((s) => { <li key={s}>{s}</li> }).

terminal

$ Preview

── what you'll see ──

The list is empty. No error appears.

Myth vs fact

Myth

I should learn React instead of JavaScript.

Fact

React code is JavaScript. Most React confusion (stale values, this, why a list is empty) is really JavaScript confusion. Learn the basics first.

Myth

You need to install anything to start learning React.

Fact

Every example and exercise on Hectal runs in your browser. Node and npm are needed only to build your own projects locally.

Myth

React warnings in the console can be ignored.

Fact

Development warnings point at real bugs (wrong keys, impure renders, invalid props). They're removed from production builds, which is why fixing them during development matters.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
React's development build adds checks (prop warnings, key warnings, StrictMode double calls) and is several times slower than the production build. Never measure performance in development mode; measure a production build (Phase 16.6).
▸
React DevTools' Components tab can edit props and state live, jump from a component to its source, and show which component rendered a DOM node: $r in the browser console refers to the component selected in DevTools.
▸
Editor setup that pays off: ESLint with eslint-plugin-react-hooks (catches broken hook rules and missing dependencies), Prettier for formatting, and TypeScript (Phase 12).

Remember this

1
Arrow functions ((a, b) => a + b) are everywhere in React, especially for event handlers: onClick={() => setCount(count + 1)}. Know that an arrow with braces needs return, and one without braces returns the expression. See /javascript Phase 4 for functions.
2
Destructuring pulls values out of objects and arrays: const { name, age } = person and const [first, second] = list. React uses both on every page: function Card({ title }) destructures props, and const [count, setCount] = useState(0) destructures the array that useState returns.
3
Spread (...) copies arrays and objects: [...items, newItem] and { ...user, name: "Asha" }. React state must never be changed in place, so you make updated copies with spread all the time (Topics 4.6 and 4.7).
4
Array methods map and filter turn data into lists of elements: items.map((item) => <li key={item.id}>{item.text}</li>). Ternaries (ok ? "Yes" : "No") and && choose what to show. Template literals build strings: ` Hello, ${name} `.
5
Modules (import and export) split an app into files: one component per file is the usual style. Promises and async/await are needed when loading data (Phase 14). All of these are taught in the JavaScript course (/javascript).
6
Tools: Node.js (JavaScript outside the browser) comes with npm (the package manager that downloads React and other libraries). An editor such as VS Code. A browser with React DevTools, an extension that shows your component tree, props and state, and has a profiler. On Hectal you can do every lesson in the browser; you need Node only to build projects on your own computer.

Explain it without notes

Why does React code use destructuring so much? Give two examples.

Why do React developers copy arrays and objects with spread instead of changing them?

What do Node.js and npm do in a React project?

Practice

Use destructuring to read title and year from const film = { title: "Lagaan", year: 2001 } and log Lagaan (2001).

Given const nums = [1, 2, 3, 4], make a new array with only the even numbers doubled, without changing nums.

Trade-offs

↔
Learning in the browser is instant but hides the project setup; build at least one local Vite project (Topic 0.4) so the tooling isn't a surprise later.

Done when you can

I can read arrow functions, destructuring, spread, map, filter and ternaries.
I know where to brush up on each JavaScript feature.
I have (or know how to install) Node.js, npm, an editor and React DevTools.
I know how to edit, run, reset and read the console in Hectal's live editor.

Command Palette

Words you'll meet

Step by step

01Check your JavaScript

02Install Node.js

03Get an editor and React DevTools

04How the live editor on Hectal works

Try it yourself

Predict before you run

Add a skill

Silence the warning properly

Code & diagrams

Break it on purpose

Forget the return in an arrow with braces

Myth vs fact

Pro corner

Remember this

Explain it without notes

Practice

Trade-offs

Done when you can