React Basics›Core· 35 min read

The Modern JavaScript React Needs

React leans on a handful of modern JS features. A quick recap so the rest of the course feels easy.

What you will learn

Recall arrow functions and map
Recall destructuring and spread
Recall import/export

The five features you will use constantly

Feature	Where React uses it
Arrow functions	Components, event handlers
`.map()`	Rendering lists of items
Destructuring	Reading props and state
Spread `...`	Updating state immutably
import/export	Every component file

You learned all of these in the JavaScript course — here they are in a React-flavoured nutshell:

The modern JS React is built on

// Arrow function component
const Hello = () => <h1>Hi</h1>;

// map a list to elements
const items = ["A", "B"].map(x => <li key={x}>{x}</li>);

// destructure props
function Card({ title, text }) { /* ... */ }

// spread to copy + update state
setUser({ ...user, name: "Asha" });

// import/export
import Button from './Button.js';

Let us walk through each line, because you will type these shapes every single day in React:

Arrow function component — const Hello = () => <h1>Hi</h1> is just a short way to write a function that returns <h1>Hi</h1>. In React, a component is a function that returns markup, so this tiny line is a complete component.
.map() — ["A","B"].map(x => <li key={x}>{x}</li>) runs once for each item in the array and turns each one ("A", then "B") into an <li>. The result is an array of two <li> elements that React can show. This is how every list on screen is built.
Destructuring — function Card({ title, text }) pulls the title and text values straight out of the props object, so you can write title instead of props.title. Less typing, cleaner code.
Spread ... — setUser({ ...user, name: "Asha" }) copies every field of the old user object, then overwrites just name. You get a brand-new object — important, because React wants you to make a new value rather than edit the old one.
import/export — import Button from './Button.js' pulls a component out of another file so you can use it here. Every component lives in its own file and is imported where needed.

Note: You do not need to memorise these — just recognise them. As they show up in later lessons, this table is your cheat-sheet.

Tip: If any of these feel shaky, revisit the Modern JavaScript (ES6+) and Array Methods lessons in the JavaScript course. Solid JS makes React click.

Q. Which array method does React use to turn a list of data into a list of elements?

Answer: .map() transforms each data item into a React element, returning an array React can render.

✍️ Practice

Write an arrow-function component that returns a heading.
Use .map() to turn ["Red","Green"] into an array of <li> elements (on paper or in JS).

🏠 Homework

Review the JS ES6 lesson and list the features you feel you need more practice with.