What JavaScript to Learn Before React

React is the most popular way to build web interfaces, and it is tempting to jump straight in. Many learners do, and then hit a wall of confusing bugs: a list that will not update, a stray 0 on the page, a click handler that shows an old value. Almost none of these are React problems. They are JavaScript problems wearing a React costume.

This guide lists the JavaScript you actually need before React, why each piece matters, and a small example of each that you can run yourself in Node or the browser console. Every output shown below comes from running the code. By the end you will know whether you are ready, and exactly what to practise if you are not.

How much JavaScript do you need before React?

Less than a whole textbook, but more than most people start with. You do not need to know every corner of the language. You do need to be comfortable with core JavaScript (variables, functions, if statements, loops, arrays and objects) and then eight specific features that React code uses on almost every line.

1. Arrow functions

React code is full of short functions passed to other functions: to map, to onClick, to useEffect. They are almost always written as arrow functions, so you need to read s => s.score >= 50 as easily as a normal function. Know the two forms: a single expression returns its value automatically, while curly braces need an explicit return. Forgetting that return is one of the most common beginner bugs.

2. Destructuring and spread

Every React component receives its inputs, called props, as one object, and most components pull out the pieces they need with destructuring. State updates use the spread operator to build a new object with one value changed:

// 4. Destructuring and spread, the way props and state updates use them
const user = { name: "Asha", age: 14, city: "Pune" };
const { name, ...rest } = user;
console.log(name, rest);

const older = { ...user, age: user.age + 1 };
console.log(user.age, older.age);

Asha { age: 14, city: 'Pune' }
14 15

Notice that user still has age 14. Spread made a new object. That detail matters more than it looks, as the next section shows.

3. Why you must not mutate state

This is the concept that trips up the most React beginners. React decides whether to re-render by checking if the new state is a different object from the old one, using a comparison like Object.is. If you change an array in place with push, it is still the same array, so React thinks nothing happened:

// 1. Mutating state keeps the same reference, so React sees "no change"
const todos = ["read", "code"];
const sameList = todos;
sameList.push("sleep");
console.log("mutated, same object?", Object.is(todos, sameList));

const newList = [...todos, "eat"];
console.log("copied, same object?", Object.is(todos, newList));
console.log(newList);

mutated, same object? true
copied, same object? false
[ 'read', 'code', 'sleep', 'eat' ]

The rule to remember: in React, never change state directly. Build a new array or object with spread, map or filter, and hand that to the state setter.

4. map and filter

In React you do not write loops to show lists. You transform an array of data into an array of elements with map, often after narrowing it with filter. Both return a new array and leave the original alone, which is exactly the immutability React wants:

// 3. map returns a new array, filter keeps what passes
const students = [
  { id: 1, name: "Asha", score: 82 },
  { id: 2, name: "Ben", score: 47 },
  { id: 3, name: "Chen", score: 91 },
];
const passed = students.filter(s => s.score >= 50);
const rows = passed.map(s => `<li key=${s.id}>${s.name}: ${s.score}</li>`);
console.log(rows);
console.log("original untouched:", students.length);

[ '<li key=1>Asha: 82</li>', '<li key=3>Chen: 91</li>' ]
original untouched: 3

In real React code the template strings become JSX, and the key is an actual prop that helps React track which item is which. The thinking is identical. If map and filter feel natural, React lists will too.

5. && and the ternary operator

React has no if inside JSX, so conditional content is written with && or the ternary condition ? a : b. You need to know precisely what && returns, because it is not always true or false:

// 2. && returns the left side when it is falsy
const count = 0;
console.log(count && "You have messages");
console.log(count > 0 && "You have messages");
console.log(3 && "You have messages");

0
false
You have messages

6. Closures

A closure is a function that remembers the variables from the place it was created. Every event handler in a React component is a closure, and each render creates fresh handlers that remember that render's values. This explains the famous "stale value" puzzle, where a handler logs an old number:

// 5. Each "render" creates a handler that remembers that render's value
let count = 0;
function render() {
  const countThisRender = count;
  return function handleClick() {
    console.log("this handler sees", countThisRender);
  };
}
const firstHandler = render();
count = 5;
const secondHandler = render();
firstHandler();
secondHandler();

this handler sees 0
this handler sees 5

The first handler was created when count was 0, so it still sees 0, even after count changed. React works the same way: a handler belongs to the render that made it. Once you understand this in plain JavaScript, the React behaviour stops being mysterious.

7. Promises, async and await

Almost every real app loads data from somewhere, usually through an API. That means promises and async functions. The key idea is order: the page does not stop and wait for the data.

// 6. async/await: the order things actually happen
function fakeFetch(data, ms) {
  return new Promise(resolve => setTimeout(() => resolve(data), ms));
}
async function loadProfile() {
  console.log("1. request sent");
  const profile = await fakeFetch({ name: "Asha" }, 100);
  console.log("3. data arrived:", profile.name);
}
loadProfile();
console.log("2. page keeps rendering meanwhile");

1. request sent
2. page keeps rendering meanwhile
3. data arrived: Asha

Line 2 prints before line 3, even though it comes later in the file. In React, this is why a component usually renders once with a loading message, then again when the data arrives.

8. Modules: import and export

Each React component usually lives in its own file and is shared with export and import. You should know the difference between a default export (import Button from './Button') and a named export (import { formatDate } from './utils'). Mixing them up causes one of the most common error messages new React developers see.

What you can safely skip for now

• Classes and this. Modern React uses function components. You will meet classes in older code, but you do not need them to start.
• Prototypes, generators and proxies. Useful to know eventually, rarely needed in everyday React.
• Advanced DOM work. Knowing how to select an element and handle a click is enough. React takes over the DOM for you.
• Every array method. map, filter, find and some cover most React needs. reduce can wait.

A sensible learning order

Rebuilding the same project in React is a powerful exercise, because you already understand the problem and can focus entirely on how React changes the approach. If you are still deciding between languages, our comparison of Python and JavaScript as a first language may help.

React is easy once JavaScript is easy. Most React confusion is JavaScript confusion in disguise.

How we teach it

Two principles on our how we teach page matter most here: learning by building, and staying with one concept until it is fully understood. In code, that means tracing line by line until a student can predict every step, which is exactly how the eight concepts above are best learned. Our React course for teens builds JavaScript through the DOM and modern ES6+ before the first React component, and our React masterclass for college students and adults starts from solid JavaScript foundations. Classes run one to one or in small groups of 5 to 10.

Frequently asked questions