How much JavaScript you need to know to use React?

You don’t need to be a JavaScript expert to start with React. But there is a set of modern JavaScript features you’ll use constantly, and knowing them first makes learning React much smoother.

If you are willing to learn React, you first need to have a few things under your belt. There are some prerequisite technologies you have to be familiar with, in particular related to some of the more recent JavaScript features you’ll use over and over in React.

Sometimes people think one particular feature is provided by React, but instead it’s just modern JavaScript syntax. JSX gets the attention, but most of what looks like “React magic” in a codebase is plain JavaScript.

There is no point in being an expert in those topics right away, but the more you dive deep into React, the more you’ll need to master those.

I will mention a list of things, with pointers to articles I wrote that can help you get up to speed quickly:

• JavaScript classes
• ES Modules
• The basics of asynchronous programming: callbacks, promises, async/await
• Arrow functions
• this
• The spread operator
• Destructuring assignments
• Object literals
• Functional programming with JavaScript

Where you’ll meet each one

ES Modules show up in the first line of every React file. Every component imports React, and exports itself, using import and export.

Arrow functions are everywhere: event handlers, callbacks passed as props, and functions passed to array methods when rendering lists.

Destructuring is how you unpack props. Instead of writing props.name all over the component, you pull the values out once.

The spread operator copies objects and arrays. Since React expects you to never mutate state, you create updated copies instead, and spread is the tool for that.

Here’s a tiny component using several of these at once:

const Profile = ({ name, city }) => {
  return <p>{name} lives in {city}</p>
}

That’s an arrow function, destructuring in the parameters, and a default export waiting to happen. None of it is React. It’s all JavaScript.

Classes and this matter for class components, which you’ll find in many existing codebases and tutorials. this in particular trips people up in event handlers, and that’s a JavaScript problem, not a React one.

Asynchronous programming comes in as soon as you fetch data from a server. Promises and async/await are how you talk to APIs.

My advice: skim these topics now, start React, and come back to each one the moment it confuses you in real code. That’s when it sticks.