React code is written almost entirely using arrow functions and destructuring — both appear in nearly every component you'll write from Chapter 4 onward.
// Regular function
function add(a, b) {
return a + b;
}
// Arrow function - same thing, shorter
const add = (a, b) => a + b;
// Destructuring an object
const student = { name: "Ravi", age: 20 };
const { name, age } = student;
console.log(name); // "Ravi"map() and filter() are the two array methods you'll use constantly to turn data into UI (covered fully in Chapter 10 - Lists and Keys):
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2); // [2, 4, 6, 8, 10]
const evens = numbers.filter(n => n % 2 === 0); // [2, 4]
// Spread operator - copies an array or object instead of mutating it
const original = [1, 2, 3];
const copy = [...original, 4]; // [1, 2, 3, 4] - original is untouchedThe spread operator (...) is especially important in React because state should never be mutated directly — you'll see this exact pattern again in Chapter 13.
Fetching data from an API (Chapter 21) always involves asynchronous code:
async function getUser() {
const response = await fetch("/api/user");
const data = await response.json();
return data;
}await pauses the function until the Promise resolves, letting you write asynchronous code that reads top-to-bottom like normal, synchronous code — much cleaner than chaining .then() calls.
It's tempting to skip straight to "building things," but destructuring, map(), and arrow functions appear on almost every line of real React code. Struggling with both React and unfamiliar JavaScript syntax at the same time is the single biggest reason beginners get stuck early — even a quick refresher here saves real time later.
Given an array of student objects, use map() to create a new array of just their names, and filter() to keep only students scoring above 80.
const students = [
{ name: "Amit", score: 92 },
{ name: "Neha", score: 75 },
{ name: "Raj", score: 88 }
];
const names = students.map(s => s.name);
const toppers = students.filter(s => s.score > 80);
console.log(names);
console.log(toppers);Q Do I need to master all of JavaScript before starting React?
No — just the specific patterns covered in this chapter: arrow functions, destructuring, map/filter, spread, and async/await. You'll deepen your JavaScript knowledge naturally as you build more React projects.
Q What's the difference between map() and forEach()?
map() returns a brand-new array built from transforming each item, which is exactly why React uses it to turn data into UI elements. forEach() just loops and returns nothing, so it's not used for rendering lists.