The JavaScript you need for React

Most of a React component is JavaScript

React adds a few things of its own: components, JSX (the markup inside the code), and functions like useState. Everything else in a component is plain JavaScript. This lesson is a quick refresher on the JavaScript that React code uses every day, shown the way React code uses it. It doesn't teach JavaScript from the start: each section links to the JavaScript lesson that does.

Here is a small shop list. Click Add next to Tea, then next to Lemonade.

1import { useState } from "react";2 3const products = [4  { id: 1, name: "Tea", price: 3, inStock: true },5  { id: 2, name: "Cake", price: 4, inStock: false },6  { id: 3, name: "Lemonade", price: 2, inStock: true },7];8 9export default function App() {10  const [cart, setCart] = useState([]);11 12  return (13    <>14      <p>In your cart: {cart.length > 0 ? cart.join(", ") : "nothing yet"}</p>15      <ul>16        {products.map(({ id, name, price, inStock }) => (17          <li key={id}>18            {name}, ${price}{" "}19            {inStock ? (20              <button onClick={() => setCart([...cart, name])}>Add</button>21            ) : (22              <em>sold out</em>23            )}24          </li>25        ))}26      </ul>27    </>28  );29}

The paragraph changes to In your cart: Tea, Lemonade. Now look at which parts of the code are JavaScript:

• Line 1 imports useState from the react package: a module import.
• Lines 3 to 7 are an array of objects: the shop's data.
• Line 9 is a function. A component is a function that returns markup.
• Line 10 uses destructuring to name the two things useState gives back: the cart, and the function that replaces it.
• Line 14 picks one of two texts with a ternary, ? :.
• Line 16 turns each product into a list item with map, and takes id, name, price, and inStock out of each product with destructuring.
• Line 20 gives the button an arrow function that makes a new cart with spread.

Only useState and the tags are React. On line 18, the $ before {price} is just a dollar sign in the text; the curly braces put the value of price after it.

If any of these feel new, read its JavaScript lesson first. Here they all are:

• Declaring and calling functions
• Arrow functions
• Destructuring
• Spread and rest
• Objects and references
• map, filter, and reduce
• The rest of the operators (the ternary)
• Logical operators
• Nullish coalescing and optional chaining
• import and export
• Promises
• async and await

Components and event handlers are functions

Functions show up in React in two places. A component is a function: React calls it to find out what to show. An event handler is a function too: you hand it to a button, and the browser calls it when someone clicks.

1import { useState } from "react";2 3export default function App() {4  const [cart, setCart] = useState([]);5 6  function handleClear() {7    setCart([]);8  }9 10  return (11    <>12      <p>Cart: {cart.join(", ") || "empty"}</p>13      <button onClick={() => setCart([...cart, "Tea"])}>Add tea</button>14      <button onClick={handleClear}>Clear</button>15    </>16  );17}

Line 3 declares the component, App, with a name that starts with a capital letter. export default lets the file that starts the app import it. Lines 6 to 8 declare another function, handleClear, inside the component.

Line 13 gives the first button an arrow function, () => setCart([...cart, "Tea"]). Nothing runs yet: the arrow only makes a small function, and React calls it on each click. Line 14 hands over handleClear itself, without brackets. Line 12 shows the cart; when it's empty, cart.join(", ") gives an empty string, and || uses "empty" instead. Click Add tea twice, then Clear: the paragraph says Cart: Tea, Tea, then Cart: empty.

The brackets matter. onClick={handleClear} passes the function. onClick={handleClear()} calls it on the spot, while React is drawing the button, and passes whatever it gives back. Here is that mistake with a function that changes state:

1import { useState } from "react";2 3export default function App() {4  const [cart, setCart] = useState([]);5 6  function addItem(name) {7    setCart([...cart, name]);8  }9 10  return <button onClick={addItem("Tea")}>Add tea ({cart.length})</button>;11}

Line 10 calls addItem("Tea") while React draws the button. That call sets new state, so React draws again, which calls addItem again, and so on. React stops the loop and shows Too many re-renders. React limits the number of renders to prevent an infinite loop. in place of the result. Press Edit & run and change line 10 to onClick={() => addItem("Tea")}: the button appears, and each click adds one tea.

Arrow functions have one more form you'll see everywhere in React: with no curly braces after the arrow, they give back the expression, so (name) => <li>{name}</li> gives back a list item. You can write components as arrow functions too (const App = () => …); React treats both the same. React's docs, and this course, use function declarations. The JavaScript lessons Function expressions and callbacks and Arrow functions cover both forms.

Destructuring props and state

Destructuring takes values out of an object or an array and names them. React code uses it in two places on almost every page: to read a component's props, and to name what useState gives back.

1import { useState } from "react";2 3function ProductCard({ name, price, onAdd }) {4  return (5    <p>6      {name}: ${price} <button onClick={onAdd}>Add</button>7    </p>8  );9}10 11export default function App() {12  const [count, setCount] = useState(0);13 14  return (15    <>16      <p>Items in cart: {count}</p>17      <ProductCard name="Tea" price={3} onAdd={() => setCount(count + 1)} />18      <ProductCard name="Cake" price={4} onAdd={() => setCount(count + 1)} />19    </>20  );21}

Lines 17 and 18 use ProductCard twice, each with its own name, price, and onAdd. These values are the component's props. React collects them into one object, like { name: "Tea", price: 3, onAdd: … }, and passes it to the function. The curly braces on line 3 take the three props out of that object, so line 6 can use name and price directly.

Line 12 uses the square-bracket form. useState(0) gives back an array of two things: the current value and a function that replaces it. [count, setCount] names them by position. Written out without destructuring, line 12 would be:

const state = useState(0);
const count = state[0];
const setCount = state[1];

Line 1 keeps the whole array, and lines 2 and 3 read its first and second items. (It sits inside a component like App, so it has no result of its own.) Click Add on both cards in the result above: the count says Items in cart: 2, because each card's onAdd is the arrow function from App.

Destructuring can also give a missing prop a default: function Greeting({ name, city = "Pune" }) uses "Pune" when no city is passed. Exercise 1 uses it, and the Passing props lesson covers props in full.

Spread makes the new copy React needs

When you give React new state, it compares it with the old state. For an array or an object, it checks whether it's the same one, not whether the items inside changed (the Objects and references lesson explains the difference). So to change an array or object in state, you make a new one. Spread, ..., is the usual way. Click Add lemonade (push) first, then Add juice (copy):

1import { useState } from "react";2 3export default function App() {4  const [items, setItems] = useState(["Tea", "Cake"]);5 6  function addByPush() {7    items.push("Lemonade");8    setItems(items);9  }10 11  function addByCopy() {12    setItems([...items, "Juice"]);13  }14 15  return (16    <>17      <button onClick={addByPush}>Add lemonade (push)</button>18      <button onClick={addByCopy}>Add juice (copy)</button>19      <ul>20        {items.map((name, index) => (21          <li key={index}>{name}</li>22        ))}23      </ul>24    </>25  );26}

The first click changes nothing on the screen: the list still shows Tea and Cake. Line 7 pushes Lemonade into the array React already has, and line 8 hands that same array back. React compares old and new, finds the same array, and skips drawing again.

The second click shows four items: Tea, Cake, Lemonade, and Juice. Line 12 builds a new array: ...items copies every item of the old one into it, and "Juice" goes at the end. A new array means new state, so React draws again, and only now shows the Lemonade that line 7 pushed earlier.

Objects work the same way. Spread copies every field into a new object, and any field you write after it replaces the copied one. Click Move to Pune:

1import { useState } from "react";2 3export default function App() {4  const [profile, setProfile] = useState({ name: "Asha", city: "Delhi", plan: "Pro" });5 6  return (7    <>8      <p>9        {profile.name} lives in {profile.city} and has the {profile.plan} plan.10      </p>11      <button onClick={() => setProfile({ ...profile, city: "Pune" })}>12        Move to Pune13      </button>14    </>15  );16}

Line 4 keeps a profile object in state. Line 11 makes a new object: ...profile copies name, city, and plan, then city: "Pune" replaces the city. The paragraph changes to Asha lives in Pune and has the Pro plan., and the old object is left as it was.

Each row shows one job done both ways. The middle column changes the old value, which React can't see; the right column makes a new value, which is what state needs:

toSorted() is a newer array method that sorts a copy; the Sorting and copying safely lesson covers it. Making new values instead of changing old ones is called immutability, and the Adding interactivity stage has a lesson each on updating objects and updating arrays in state.

map and filter turn data into lists

React has no special loop for showing a list. You turn an array of data into an array of elements with map, and pick which items to show with filter. Type tea in the search box:

1import { useState } from "react";2 3const products = [4  { id: 1, name: "Green tea", price: 3 },5  { id: 2, name: "Lemon cake", price: 4 },6  { id: 3, name: "Iced tea", price: 2 },7];8 9export default function App() {10  const [query, setQuery] = useState("");11  const matches = products.filter((product) =>12    product.name.toLowerCase().includes(query.toLowerCase()),13  );14 15  return (16    <>17      <input18        placeholder="Search"19        value={query}20        onChange={(event) => setQuery(event.target.value)}21      />22      <ul>23        {matches.map((product) => (24          <li key={product.id}>{product.name}</li>25        ))}26      </ul>27      <p>28        {matches.length} of {products.length} products29      </p>30    </>31  );32}

Line 10 keeps the search text in state. Lines 11 to 13 use filter to make a new array, matches, of the products whose name includes that text; toLowerCase() on both sides makes "Tea" match "tea". Line 20 sets the query on every key press with an arrow function that reads event.target.value, the text in the box.

Lines 23 to 25 use map to make one <li> per match. The arrow function has round brackets instead of curly braces after =>, so it gives back the <li> without a return. The key tells React which item is which; the Rendering lists lesson explains it. Line 28 shows two lengths. With tea typed, the list shows Green tea and Iced tea, and the line says 2 of 3 products.

Neither filter nor map changes products: each gives back a new array. That's why they are safe to use on state too. reduce, their sibling, adds up a list into one value, like a total; the cart in the practical section uses it.

Ternaries, && and ?. inside JSX

Curly braces in JSX hold an expression: code that gives back a value, like price * 2 or a function call. An if statement isn't an expression, so it can't go inside the braces. Three operators fill the gap: the ternary ? : picks one of two values, && shows something or nothing, and ?. and ?? handle a value that might be missing.

1function Product({ name, stock }) {2  return (3    <li>4      {name}: {stock > 0 ? `${stock} left` : "sold out"}5      {stock > 0 && stock < 3 && <strong> Hurry!</strong>}6    </li>7  );8}9 10export default function App() {11  return (12    <ul>13      <Product name="Tea" stock={5} />14      <Product name="Cake" stock={2} />15      <Product name="Lemonade" stock={0} />16    </ul>17  );18}

Line 4 uses a ternary: if stock > 0, it gives back a template literal, `${stock} left`, and otherwise "sold out". Line 5 chains two &&: the <strong> shows only when both conditions are true. The result reads Tea: 5 left, Cake: 2 left Hurry!, and Lemonade: sold out.

Data from a server often has gaps: an order without a customer, a user without an address. Reading a field of null throws an error, and an error while drawing takes the component down. Optional chaining stops in time:

1const order = { id: 7, customer: { name: "Asha" } };2const guestOrder = { id: 8, customer: null };3 4function Thanks({ order }) {5  return <p>Thanks, {order.customer?.name ?? "guest"}!</p>;6}7 8export default function App() {9  return (10    <>11      <Thanks order={order} />12      <Thanks order={guestOrder} />13    </>14  );15}

Line 5 reads order.customer?.name. When customer is null, ?. stops and gives undefined instead of throwing, and ?? swaps in "guest". The result: Thanks, Asha! and Thanks, guest!. Press Edit & run and delete the ? on line 5: the result shows TypeError: Cannot read properties of null (reading 'name').

&& has one surprise. It gives back its left side when that side is falsy, and React shows numbers. Pick 0 below and watch line 7:

1const value = 3;2 3export default function App() {4  return (5    <>6      <p>{value}</p>7      <p>{value && <strong>yes</strong>}</p>8      <p>{value ? "yes" : "no"}</p>9    </>10  );11}

For 0, line 7 shows 0: 0 && … gives back 0, not false. For null, undefined, true, and false, line 6 shows nothing at all, which is why && works for "something or nothing" as long as the left side is a true-or-false test, like count > 0.

How to read the table: each row is something you want to show, what to write inside the curly braces, and why.

The Conditional rendering lesson goes further, with early returns and null.

import and export between files

A React app has many files, usually one component per file, and they share code with import and export. This example has three files in tabs: App.jsx, ProductCard.jsx, and format.js, a plain JavaScript file with no JSX.

1import ProductCard from "./ProductCard.jsx";2import { formatPrice } from "./format.js";3 4export default function App() {5  return (6    <>7      <ProductCard name="Tea" price={3} />8      <ProductCard name="Cake" price={4.5} />9      <p>Delivery: {formatPrice(2)}</p>10    </>11  );12}

In format.js, line 1 names its export: export function formatPrice. Line 2 builds the text with a template literal: the first $ is a dollar sign, and ${…} puts in the amount with two decimals.

In ProductCard.jsx, line 3 is the file's default export: export default function ProductCard. Line 1 imports formatPrice in curly braces, because it's a named export.

In App.jsx, line 1 imports the default export without braces, and line 2 imports the named one with braces. Both paths start with ./, which means "a file next to this one". A name without it, like "react", means an installed package. The result: Tea: $3.00, Cake: $4.50, and Delivery: $2.00.

Press Edit & run, open the format.js tab, and change the first $ on line 2 to €. All three prices change, in both files that import it. The Your first component lesson moves components into their own files step by step.

Promises and async for data that arrives later

Data from a server doesn't arrive at once. JavaScript represents a result that comes later with a promise, and async and await let you write code that waits for it. Click Load products:

1import { useState } from "react";2 3function fetchProducts() {4  return new Promise((resolve) => {5    setTimeout(() => resolve([{ id: 1, name: "Tea" }, { id: 2, name: "Cake" }]), 500);6  });7}8 9export default function App() {10  const [products, setProducts] = useState(null);11  const [loading, setLoading] = useState(false);12 13  async function handleLoad() {14    setLoading(true);15    const list = await fetchProducts();16    setProducts(list);17    setLoading(false);18  }19 20  return (21    <>22      <button onClick={handleLoad} disabled={loading}>23        {loading ? "Loading…" : "Load products"}24      </button>25      <p>Products: {products?.length ?? "not loaded yet"}</p>26      <ul>{products?.map((product) => <li key={product.id}>{product.name}</li>)}</ul>27    </>28  );29}

Lines 3 to 7 are a stand-in for a server: fetchProducts gives back a promise, and line 5 resolves it with two products after half a second. In a real app it would look like this, with the browser's fetch:

async function fetchProducts() {
  const response = await fetch("/api/products");
  return response.json();
}

(There is no /api/products here to call, so it doesn't run.) Back in the example, line 13 makes the click handler async. Line 14 sets loading, so React draws the button as Loading… and turns it off. Line 15 waits for the promise; await pauses only handleLoad, not the page. When the products arrive, lines 16 and 17 put them in state and turn loading off.

Before the click, products is null. Line 25 reads products?.length, which gives undefined, so ?? shows not loaded yet. Line 26's products?.map(…) also gives undefined, which React shows as nothing. After the click and half a second, the paragraph says Products: 2, with Tea and Cake below.

Here a click starts the loading. Loading data when a component first appears uses an effect, a data library, or a framework; the Fetching data lesson covers them.

A cart page that uses all of it

Real components mix all of these. Here is a cart with quantities, a total, and remove buttons. Click +1 next to Tea, then remove both items.

1import { useState } from "react";2 3const startCart = [4  { id: 1, name: "Tea", price: 3, quantity: 1 },5  { id: 2, name: "Cake", price: 4, quantity: 2 },6];7 8export default function App() {9  const [cart, setCart] = useState(startCart);10  const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);11 12  function addOne(id) {13    setCart(14      cart.map((item) =>15        item.id === id ? { ...item, quantity: item.quantity + 1 } : item,16      ),17    );18  }19 20  function remove(id) {21    setCart(cart.filter((item) => item.id !== id));22  }23 24  return (25    <>26      {cart.length === 0 && <p>Your cart is empty.</p>}27      <ul>28        {cart.map(({ id, name, quantity }) => (29          <li key={id}>30            {name} × {quantity} <button onClick={() => addOne(id)}>+1</button>{" "}31            <button onClick={() => remove(id)}>Remove</button>32          </li>33        ))}34      </ul>35      <p>Total: ${total}</p>36    </>37  );38}

Line 10 adds up the cart with reduce: price times quantity for each item, starting from 0. Tea is 3 × 1 and Cake is 4 × 2, so the total starts at $11. Lines 13 to 17 make a new cart with map: for the item with the clicked id, the ternary on line 15 gives a new object, copied with spread and with one more in quantity; every other item stays as it is. Line 21 removes an item with filter.

Line 26 shows the empty-cart message only when the cart is empty. Line 28 destructures each item in the arrow's parameter, and lines 30 and 31 give each button an arrow that passes its own id. After +1 on Tea, the line says Tea × 2 and the total $14. After removing both items, you see Your cart is empty. and Total: $0.

Practice the most important habit from this lesson: giving state a new value instead of changing the old one.

Common mix-ups

• "React has its own loops and if statements for markup." No. You use map and filter for lists and a ternary or && for choices: plain JavaScript inside curly braces.
• "onClick={save()} hands the button my function." No. The brackets call it while React draws. Write onClick={save}, or onClick={() => save(item)} to pass something.
• "Pushing to the array and calling the set function updates the screen." No. It's the same array, so React skips the update. Make a new array with spread, map, or filter.
• "count && … shows nothing when the count is 0." No. It shows 0. Write count > 0 && ….
• "Components must be arrow functions", or "must be function declarations". No. Both work; React only needs a function. This course uses function declarations, like React's docs.
• "await freezes the page until the data arrives." No. It pauses only the async function. The page keeps working, which is how the button can show Loading… while it waits.

Practice exercises

Each exercise is React code that leans on one JavaScript feature. Predict first, then press Edit & run to check, or change the code and watch the result.

function Greeting({ name, city = "Pune" }) {
  return <p>Hi {name} from {city}!</p>;
}

export default function App() {
  return <Greeting name="Asha" />;
}

1function Greeting({ name, city = "Pune" }) {2  return <p>Hi {name} from {city}!</p>;3}4 5export default function App() {6  return <Greeting name="Asha" />;7}

const products = [
  { id: 1, name: "Tea", price: 3 },
  { id: 2, name: "Cake", price: 4 },
  { id: 3, name: "Lemonade", price: 2 },
];

export default function App() {
  return (
    <ul>
      {products
        .filter((product) => product.price < 4)
        .map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
    </ul>
  );
}

1const products = [2  { id: 1, name: "Tea", price: 3 },3  { id: 2, name: "Cake", price: 4 },4  { id: 3, name: "Lemonade", price: 2 },5];6 7export default function App() {8  return (9    <ul>10      {products11        .filter((product) => product.price < 4)12        .map((product) => (13          <li key={product.id}>{product.name}</li>14        ))}15    </ul>16  );17}

1import { useState } from "react";2 3export default function App() {4  const [items, setItems] = useState(["Tea"]);5 6  function addCake() {7    items.push("Cake");8    setItems(items);9  }10 11  return (12    <>13      <button onClick={addCake}>Add cake</button>14      <ul>15        {items.map((name, index) => (16          <li key={index}>{name}</li>17        ))}18      </ul>19    </>20  );21}

1import { useState } from "react";2 3export default function App() {4  const [items, setItems] = useState(["Tea"]);5 6  function addCake() {7    setItems([...items, "Cake"]);8  }9 10  return (11    <>12      <button onClick={addCake}>Add cake</button>13      <ul>14        {items.map((name, index) => (15          <li key={index}>{name}</li>16        ))}17      </ul>18    </>19  );20}

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  function addOne() {
    setCount(count + 1);
  }

  return <button onClick={addOne()}>Added: {count}</button>;
}

1import { useState } from "react";2 3export default function App() {4  const [count, setCount] = useState(0);5 6  function addOne() {7    setCount(count + 1);8  }9 10  return <button onClick={addOne}>Added: {count}</button>;11}

1import { useState } from "react";2 3export default function App() {4  const [cart, setCart] = useState([5    { id: 1, name: "Tea", quantity: 1 },6    { id: 2, name: "Cake", quantity: 2 },7  ]);8 9  function addOne(id) {10    // Give setCart a new array where only the item with this id has quantity + 1.11  }12 13  return (14    <ul>15      {cart.map((item) => (16        <li key={item.id}>17          {item.name} × {item.quantity}{" "}18          <button onClick={() => addOne(item.id)}>+1</button>19        </li>20      ))}21    </ul>22  );23}

1import { useState } from "react";2 3export default function App() {4  const [cart, setCart] = useState([5    { id: 1, name: "Tea", quantity: 1 },6    { id: 2, name: "Cake", quantity: 2 },7  ]);8 9  function addOne(id) {10    setCart(11      cart.map((item) =>12        item.id === id ? { ...item, quantity: item.quantity + 1 } : item,13      ),14    );15  }16 17  return (18    <ul>19      {cart.map((item) => (20        <li key={item.id}>21          {item.name} × {item.quantity}{" "}22          <button onClick={() => addOne(item.id)}>+1</button>23        </li>24      ))}25    </ul>26  );27}

1import { useState } from "react";2 3function fetchReviews() {4  return new Promise((resolve) => {5    setTimeout(() => resolve(["Great tea", "Fresh cake", "Fast delivery"]), 500);6  });7}8 9export default function App() {10  const [reviews, setReviews] = useState(null);11 12  async function handleLoad() {13    // Wait for fetchReviews(), then put the list it gives back into state.14  }15 16  return (17    <>18      <button onClick={handleLoad}>Load reviews</button>19      <p>Reviews: {reviews?.length ?? "none yet"}</p>20    </>21  );22}

1import { useState } from "react";2 3function fetchReviews() {4  return new Promise((resolve) => {5    setTimeout(() => resolve(["Great tea", "Fresh cake", "Fast delivery"]), 500);6  });7}8 9export default function App() {10  const [reviews, setReviews] = useState(null);11 12  async function handleLoad() {13    const list = await fetchReviews();14    setReviews(list);15  }16 17  return (18    <>19      <button onClick={handleLoad}>Load reviews</button>20      <p>Reviews: {reviews?.length ?? "none yet"}</p>21    </>22  );23}

Check your understanding

For each code question, find the JavaScript feature first, then work out what it gives back. Press Edit & run on a question's code to check your answer.

Key takeaways

• React adds components, JSX, and hooks. The rest of a component is plain JavaScript.
• Components and event handlers are functions. Pass a handler, onClick={save}, or wrap a call in an arrow; don't call it with ().
• Destructuring reads props ({ name, price }) and names what useState gives back.
• State needs new arrays and objects. Spread, map, and filter make them; push and assignment change the old one, and React skips the update.
• Curly braces take expressions: a ternary for one of two things, && for something or nothing (careful with 0), and ?. with ?? for missing data.
• Files share components with import and export, and async functions await data that arrives later.

Coming next: How React works: a first look. It follows one click from your component to the screen: render, commit, and paint.