Your first React app

A tip calculator, built in five steps

In this lesson you build a whole React app: a tip calculator. You type the bill, pick a tip, and it shows the tip, the total, and what each person pays. You'll build it in small steps, and each step adds one idea. Every step is live: you see its result, you can click it, and you can change its code.

You start where Setting up a React project left off, with the starter replaced by your own App:

1export default function App() {2  return <h1>Tip calculator</h1>;3}

Line 1 defines a component called App and exports it, so main.jsx can show it. Line 2 returns what the screen shows: one heading. That's the whole app so far. By the end of step 4, the screen looks like this, and each labelled part is a component of its own:

The steps:

1. Split the screen into components.
2. Show data: work out the tip and total, and put them on the screen.
3. Handle a click on a tip button.
4. Remember the chosen tip with state, so the screen updates.
5. Put it together: type the bill, and split it between people.

Each step previews an idea that a later lesson teaches properly. Here you only need enough to make the app work, and each step says where you'll learn the rest.

Step 1: split the screen into components

Look at the picture again and name the parts: a row of tip buttons, and a summary with the tip and total. Each part becomes a component: a function whose name starts with a capital letter and returns markup. For now the numbers are typed in by hand, and the buttons do nothing.

1function TipButtons() {2  return (3    <div>4      <button>10%</button>5      <button>15%</button>6      <button>20%</button>7    </div>8  );9}10 11function Summary() {12  return (13    <div>14      <p>Tip: <strong>$7.20</strong></p>15      <p>Total: <strong>$55.20</strong></p>16    </div>17  );18}19 20export default function App() {21  return (22    <div className="calculator">23      <h2>Tip calculator</h2>24      <p>Bill: $48.00, tip 15%</p>25      <TipButtons />26      <Summary />27    </div>28  );29}

1. Lines 1 to 9 are TipButtons. It returns a <div> with three buttons.
2. Lines 11 to 18 are Summary. It returns the tip and the total, written in by hand.
3. Lines 20 to 29 are App, the component main.jsx shows. It returns a heading, a line about the bill, and then, on lines 25 and 26, <TipButtons /> and <Summary />. Written like tags, they tell React to call those functions and put what they return there.

The result looks finished, but nothing works yet. Press Edit & run and copy line 25 so it appears twice: two rows of buttons show. A component is written once and used as many times as you like.

All three components live in one file for now; step 5 moves two of them into files of their own. Naming components, nesting them, and moving them between files is what Your first component teaches properly. The markup itself is JSX, which Writing markup with JSX covers.

Step 2: show data with curly braces

The numbers in step 1 are typed in by hand, so they're wrong as soon as the bill changes. In step 2, JavaScript works them out from two values, and the components show the results:

1const bill = 48;2const tipPercent = 15;3 4function TipButtons() {5  return (6    <div>7      <button>10%</button>8      <button>15%</button>9      <button>20%</button>10    </div>11  );12}13 14function Summary({ tip, total }) {15  return (16    <div>17      <p>Tip: <strong>${tip.toFixed(2)}</strong></p>18      <p>Total: <strong>${total.toFixed(2)}</strong></p>19    </div>20  );21}22 23export default function App() {24  const tip = (bill * tipPercent) / 100;25  const total = bill + tip;26 27  return (28    <div className="calculator">29      <h2>Tip calculator</h2>30      <p>Bill: ${bill.toFixed(2)}, tip {tipPercent}%</p>31      <TipButtons />32      <Summary tip={tip} total={total} />33    </div>34  );35}

1. Lines 1 and 2 are the data: a bill of 48 and a tip of 15 percent.
2. Lines 24 and 25, inside App, work out the tip, 48 * 15 / 100, which is 7.2, and the total, 55.2. It's plain JavaScript that runs each time React calls App.
3. Line 30 puts values into the markup with curly braces: {tipPercent} shows 15. Inside the braces is JavaScript; the $ before {bill.toFixed(2)} is plain text, and toFixed(2) writes the number with two decimals, 48.00.
4. Line 32 passes the tip and total to Summary: tip={tip} and total={total}. Values written on a component's tag like this are its props.
5. Line 14 receives them. React passes the props as one object, and { tip, total } takes the two values out of it with destructuring. Lines 17 and 18 show them: $7.20 and $55.20.

Press Edit & run and change the bill on line 1 to 60. The bill line, the tip, and the total all follow: $9.00 and $69.00. You changed the data, and every place that shows it changed with it, the idea from Why React?.

Curly braces get a lesson of their own, JavaScript in JSX with curly braces, and so do props, Passing props to a component.

Step 3: handle a click

Now the buttons need to do something. In React you give a button a function to run when it's clicked, with onClick. A first try changes the tip with an ordinary variable:

1const bill = 48;2 3function TipButtons({ onChoose }) {4  return (5    <div>6      <button onClick={() => onChoose(10)}>10%</button>7      <button onClick={() => onChoose(15)}>15%</button>8      <button onClick={() => onChoose(20)}>20%</button>9    </div>10  );11}12 13function Summary({ tip, total }) {14  return (15    <div>16      <p>Tip: <strong>${tip.toFixed(2)}</strong></p>17      <p>Total: <strong>${total.toFixed(2)}</strong></p>18    </div>19  );20}21 22export default function App() {23  let tipPercent = 15;24 25  function choose(percent) {26    tipPercent = percent;27    console.log("tipPercent is now", tipPercent);28  }29 30  const tip = (bill * tipPercent) / 100;31  const total = bill + tip;32 33  return (34    <div className="calculator">35      <h2>Tip calculator</h2>36      <p>Bill: ${bill.toFixed(2)}, tip {tipPercent}%</p>37      <TipButtons onChoose={choose} />38      <Summary tip={tip} total={total} />39    </div>40  );41}

1. Line 3: TipButtons now takes one prop, onChoose. A prop can be a function, too.
2. Lines 6 to 8 give each button an onClick. Its value is an arrow function, () => onChoose(20), which React keeps and calls when you click. The click is an event, and the function is its event handler.
3. Line 23 makes tipPercent a plain variable, starting at 15. Lines 25 to 28 define choose, which sets it and prints it to the console.
4. Line 37 passes choose to TipButtons as onChoose. So clicking 20% runs choose(20).

Click 20% in the result. The console under it says tipPercent is now 20, but the screen still says tip 15% and $7.20. Click 10%: the console changes, the screen doesn't.

Two things go wrong:

• React isn't told. Changing a variable is ordinary JavaScript. Nothing tells React that the screen should change, so it doesn't call App again, and lines 30 to 40 never run with the new value.
• The value isn't kept. Even if React did call App again, line 23 would run again and set tipPercent back to 15. Each call of a component starts its variables fresh.

Events, handlers, and passing them as props are what Responding to events teaches properly.

Step 4: remember the choice with state

The fix for both problems is state: a value that React remembers for a component between calls, and a function that changes it and tells React to call the component again. You ask for it with useState:

1import { useState } from "react";2 3const bill = 48;4 5function TipButtons({ onChoose }) {6  return (7    <div>8      <button onClick={() => onChoose(10)}>10%</button>9      <button onClick={() => onChoose(15)}>15%</button>10      <button onClick={() => onChoose(20)}>20%</button>11    </div>12  );13}14 15function Summary({ tip, total }) {16  return (17    <div>18      <p>Tip: <strong>${tip.toFixed(2)}</strong></p>19      <p>Total: <strong>${total.toFixed(2)}</strong></p>20    </div>21  );22}23 24export default function App() {25  const [tipPercent, setTipPercent] = useState(15);26 27  const tip = (bill * tipPercent) / 100;28  const total = bill + tip;29 30  return (31    <div className="calculator">32      <h2>Tip calculator</h2>33      <p>Bill: ${bill.toFixed(2)}, tip {tipPercent}%</p>34      <TipButtons onChoose={setTipPercent} />35      <Summary tip={tip} total={total} />36    </div>37  );38}

1. Line 1 imports useState from React. Functions whose names start with use are called hooks.
2. Line 25 asks React for a piece of state, starting at 15. useState gives back two things in an array: the current value, tipPercent, and a function that sets a new one, setTipPercent. The brackets take both out with array destructuring.
3. Line 34 passes setTipPercent to TipButtons as onChoose. So clicking 20% now runs setTipPercent(20).
4. Everything else is the same as step 2: lines 27 and 28 work out the tip and total, and Summary shows them.

Click 20%. Now the screen says tip 20%, $9.60, and $57.60. Click 10%: $4.80 and $52.80.

Here is what happens on that click. setTipPercent(20) stores 20 and tells React this component needs a new render. React calls App again; this time line 25 gives back 20, so lines 27 and 28 work out a tip of 9.6 and a total of 57.6, and the markup describes the new screen. React compares it with the last one and changes only what differs. The playground below runs the same code on this page and shows you exactly what React changed:

Click 20%: React changes three pieces of text, the 15 in the bill line, the tip, and the total. The heading, the bill, and the buttons stay as they are. Click 20% again: tipPercent is already 20, so nothing on the page changes. How React works: a first look explains this compare-then-change step.

How to read the table: each row asks the same question of step 3's plain variable and step 4's state.

State is the biggest idea in this lesson, and the course gives it several lessons, starting with State: a component's memory.

Step 5: the finished app

The last step finishes the app. You can type the bill, the chosen tip is marked, and the bill is split between people. The two smaller components move into files of their own, so the example has tabs: App.jsx, TipButtons.jsx, Summary.jsx, and styles.css.

1import { useState } from "react";2import TipButtons from "./TipButtons.jsx";3import Summary from "./Summary.jsx";4 5export default function App() {6  const [bill, setBill] = useState("48");7  const [tipPercent, setTipPercent] = useState(15);8  const [people, setPeople] = useState(1);9 10  const amount = Number(bill) || 0;11  const tip = (amount * tipPercent) / 100;12  const total = amount + tip;13 14  return (15    <main className="calculator">16      <h1>Tip calculator</h1>17      <label>18        Bill ($){" "}19        <input20          type="number"21          value={bill}22          onChange={(event) => setBill(event.target.value)}23        />24      </label>25      <TipButtons selected={tipPercent} onChoose={setTipPercent} />26      <p>27        People: {people}{" "}28        <button onClick={() => setPeople(people - 1)} disabled={people === 1}>29          Remove a person30        </button>31        <button onClick={() => setPeople(people + 1)}>Add a person</button>32      </p>33      <Summary tip={tip} total={total} people={people} />34    </main>35  );36}

In App.jsx:

• Lines 2 and 3 import the two components from their files.
• Lines 6 to 8 keep three pieces of state: the bill, the tip percent, and the number of people. The bill starts as the text "48", because a text box always holds text. Line 10 turns it into a number with Number, and uses 0 while the box is empty.
• Lines 19 to 23 are the text box. value={bill} shows the state, and onChange runs on every key you type, setting the state to what's in the box. It's a second kind of event; forms get their own lessons, starting with Reacting to input with state.
• Line 25 passes selected as well, so the buttons know which tip is chosen. Lines 28 and 31 change the number of people, and line 28's button is turned off while there's only one person.

In TipButtons.jsx, line 1 lists the choices and line 6 makes one button per choice with map (Rendering lists explains the key on line 8). Line 9 sets aria-pressed on the chosen button, which tells screen readers it's chosen and lets styles.css outline it. In Summary.jsx, line 6 divides the total by the number of people.

Try it: type 60 as the bill, choose 20%, and press Add a person twice. The tip is $12.00, the total $72.00, and each of the 3 people pays $24.00. Then press Edit & run and make it yours: add a 25% choice to line 1 of TipButtons.jsx, or change the starting bill on line 6 of App.jsx.

The same four steps in another app

Most React features you'll build follow the same four steps. Here is a different one, a tea order where you choose how many cups. Click Add one a few times:

1import { useState } from "react";2 3function Price({ amount }) {4  return <strong>${amount.toFixed(2)}</strong>;5}6 7export default function App() {8  const [quantity, setQuantity] = useState(1);9  const price = 3.5;10 11  return (12    <div>13      <h2>Green tea</h2>14      <p>15        {quantity} × $3.50 = <Price amount={quantity * price} />16      </p>17      <button onClick={() => setQuantity(quantity + 1)}>Add one</button>18    </div>19  );20}

Lines 3 to 5 are a component, Price, that shows an amount with two decimals. Line 8 keeps the quantity in state, starting at 1, and line 9 is the price of one cup. Line 15 shows data with curly braces and passes the line's price to Price as a prop. Line 17 handles a click by setting the state. After two clicks it says 3 × $3.50 = $10.50.

How to read the table: each row is one of the four steps, what it adds, and a line from the tip calculator that does it.

Common mix-ups

• "Changing a variable updates the screen." No. React only calls your component again when state changes. Step 3's variable changed, and the screen didn't.
• "onClick={choose(20)} runs choose when I click." No. It calls choose(20) right away, while React draws the button. Give onClick a function: onClick={() => choose(20)}.
• "After setTipPercent(20), tipPercent is 20 on the next line." No. The set function asks for a new render. tipPercent is 20 in the next call of App, not in the one that's running. State as a snapshot explains why.
• "React redraws the whole page after a click." No. It calls your components again, compares, and changes only what differs: three pieces of text in the playground.
• "Each component needs its own file." No. Steps 1 to 4 kept all three in one file. Separate files help once a component is used in many places or grows long.
• "I can call useState anywhere, like inside the click handler." No. Call hooks at the top of your component, as line 25 does in step 4. The rules of hooks explains why.

Practice exercises

Each exercise works on the calculator, or a small piece of it. Press Edit & run to change the code, and use the result to check your answer.

const bill = 40;
const tipPercent = 20;

function TipButtons() {
  return (
    <div>
      <button>10%</button>
      <button>15%</button>
      <button>20%</button>
    </div>
  );
}

function Summary({ tip, total }) {
  return (
    <div>
      <p>Tip: <strong>${tip.toFixed(2)}</strong></p>
      <p>Total: <strong>${total.toFixed(2)}</strong></p>
    </div>
  );
}

export default function App() {
  const tip = (bill * tipPercent) / 100;
  const total = bill + tip;

  return (
    <div className="calculator">
      <h2>Tip calculator</h2>
      <p>Bill: ${bill.toFixed(2)}, tip {tipPercent}%</p>
      <TipButtons />
      <Summary tip={tip} total={total} />
    </div>
  );
}

1const bill = 40;2const tipPercent = 20;3 4function TipButtons() {5  return (6    <div>7      <button>10%</button>8      <button>15%</button>9      <button>20%</button>10    </div>11  );12}13 14function Summary({ tip, total }) {15  return (16    <div>17      <p>Tip: <strong>${tip.toFixed(2)}</strong></p>18      <p>Total: <strong>${total.toFixed(2)}</strong></p>19    </div>20  );21}22 23export default function App() {24  const tip = (bill * tipPercent) / 100;25  const total = bill + tip;26 27  return (28    <div className="calculator">29      <h2>Tip calculator</h2>30      <p>Bill: ${bill.toFixed(2)}, tip {tipPercent}%</p>31      <TipButtons />32      <Summary tip={tip} total={total} />33    </div>34  );35}

1import { useState } from "react";2 3const bill = 48;4 5function TipButtons({ onChoose }) {6  return (7    <div>8      <button onClick={() => onChoose(10)}>10%</button>9      <button onClick={() => onChoose(15)}>15%</button>10      <button onClick={() => onChoose(20)}>20%</button>11    </div>12  );13}14 15function Summary({ tip, total }) {16  return (17    <div>18      <p>Tip: <strong>${tip.toFixed(2)}</strong></p>19      <p>Total: <strong>${total.toFixed(2)}</strong></p>20    </div>21  );22}23 24export default function App() {25  const [tipPercent, setTipPercent] = useState(15);26 27  const tip = (bill * tipPercent) / 100;28  const total = bill + tip;29 30  return (31    <div className="calculator">32      <h2>Tip calculator</h2>33      <p>Bill: ${bill.toFixed(2)}, tip {tipPercent}%</p>34      <TipButtons onChoose={setTipPercent} />35      <Summary tip={tip} total={total} />36    </div>37  );38}

1import { useState } from "react";2 3const bill = 48;4 5function TipButtons({ onChoose }) {6  return (7    <div>8      <button onClick={() => onChoose(10)}>10%</button>9      <button onClick={() => onChoose(15)}>15%</button>10      <button onClick={() => onChoose(20)}>20%</button>11    </div>12  );13}14 15function Summary({ tip, total }) {16  return (17    <div>18      <p>Tip: <strong>${tip.toFixed(2)}</strong></p>19      <p>Total: <strong>${total.toFixed(2)}</strong></p>20    </div>21  );22}23 24export default function App() {25  const [tipPercent, setTipPercent] = useState(20);26 27  const tip = (bill * tipPercent) / 100;28  const total = bill + tip;29 30  return (31    <div className="calculator">32      <h2>Tip calculator</h2>33      <p>Bill: ${bill.toFixed(2)}, tip {tipPercent}%</p>34      <TipButtons onChoose={setTipPercent} />35      <Summary tip={tip} total={total} />36    </div>37  );38}

1import { useState } from "react";2 3const bill = 48;4 5function TipButtons({ onChoose }) {6  return (7    <div>8      <button onClick={() => onChoose(10)}>10%</button>9      <button onClick={() => onChoose(15)}>15%</button>10      <button onClick={() => onChoose(20)}>20%</button>11    </div>12  );13}14 15function Summary({ tip, total }) {16  return (17    <div>18      <p>Tip: <strong>${tip.toFixed(2)}</strong></p>19      <p>Total: <strong>${total.toFixed(2)}</strong></p>20    </div>21  );22}23 24export default function App() {25  const [tipPercent, setTipPercent] = useState(15);26 27  const tip = (bill * tipPercent) / 100;28  const total = bill + tip;29 30  return (31    <div className="calculator">32      <h2>Tip calculator</h2>33      <p>Bill: ${bill.toFixed(2)}, tip {tipPercent}%</p>34      <TipButtons onChoose={setTipPercent} />35      <Summary tip={tip} total={total} />36    </div>37  );38}

1import { useState } from "react";2 3const bill = 48;4 5function TipButtons({ onChoose }) {6  return (7    <div>8      <button onClick={() => onChoose(10)}>10%</button>9      <button onClick={() => onChoose(15)}>15%</button>10      <button onClick={() => onChoose(20)}>20%</button>11      <button onClick={() => onChoose(25)}>25%</button>12    </div>13  );14}15 16function Summary({ tip, total }) {17  return (18    <div>19      <p>Tip: <strong>${tip.toFixed(2)}</strong></p>20      <p>Total: <strong>${total.toFixed(2)}</strong></p>21    </div>22  );23}24 25export default function App() {26  const [tipPercent, setTipPercent] = useState(15);27 28  const tip = (bill * tipPercent) / 100;29  const total = bill + tip;30 31  return (32    <div className="calculator">33      <h2>Tip calculator</h2>34      <p>Bill: ${bill.toFixed(2)}, tip {tipPercent}%</p>35      <TipButtons onChoose={setTipPercent} />36      <Summary tip={tip} total={total} />37    </div>38  );39}

import { useState } from "react";

export default function App() {
  const [people, setPeople] = useState(1);

  return (
    <p>
      People: {people}{" "}
      <button onClick={setPeople(people + 1)}>Add a person</button>
    </p>
  );
}

1import { useState } from "react";2 3export default function App() {4  const [people, setPeople] = useState(1);5 6  return (7    <p>8      People: {people}{" "}9      <button onClick={() => setPeople(people + 1)}>Add a person</button>10    </p>11  );12}

1import { useState } from "react";2 3const bill = 48;4 5function TipButtons({ onChoose }) {6  return (7    <div>8      <button onClick={() => onChoose(10)}>10%</button>9      <button onClick={() => onChoose(15)}>15%</button>10      <button onClick={() => onChoose(20)}>20%</button>11    </div>12  );13}14 15function Summary({ tip, total }) {16  return (17    <div>18      <p>Tip: <strong>${tip.toFixed(2)}</strong></p>19      <p>Total: <strong>${total.toFixed(2)}</strong></p>20    </div>21  );22}23 24export default function App() {25  const [tipPercent, setTipPercent] = useState(15);26 27  const tip = (bill * tipPercent) / 100;28  const total = bill + tip;29 30  return (31    <div className="calculator">32      <h2>Tip calculator</h2>33      <p>Bill: ${bill.toFixed(2)}, tip {tipPercent}%</p>34      <TipButtons onChoose={setTipPercent} />35      <Summary tip={tip} total={total} />36    </div>37  );38}

1import { useState } from "react";2 3const bill = 48;4 5function TipButtons({ onChoose }) {6  return (7    <div>8      <button onClick={() => onChoose(10)}>10%</button>9      <button onClick={() => onChoose(15)}>15%</button>10      <button onClick={() => onChoose(20)}>20%</button>11    </div>12  );13}14 15function Summary({ tip, total, people }) {16  return (17    <div>18      <p>Tip: <strong>${tip.toFixed(2)}</strong></p>19      <p>Total: <strong>${total.toFixed(2)}</strong></p>20      <p>Each person pays: <strong>${(total / people).toFixed(2)}</strong></p>21    </div>22  );23}24 25export default function App() {26  const [tipPercent, setTipPercent] = useState(15);27  const [people, setPeople] = useState(1);28 29  const tip = (bill * tipPercent) / 100;30  const total = bill + tip;31 32  return (33    <div className="calculator">34      <h2>Tip calculator</h2>35      <p>Bill: ${bill.toFixed(2)}, tip {tipPercent}%</p>36      <TipButtons onChoose={setTipPercent} />37      <p>People: {people}</p>38      <button onClick={() => setPeople(people + 1)}>Add a person</button>39      <Summary tip={tip} total={total} people={people} />40    </div>41  );42}

1import { useState } from "react";2 3const bill = 48;4 5function TipButtons({ onChoose }) {6  return (7    <div>8      <button onClick={() => onChoose(10)}>10%</button>9      <button onClick={() => onChoose(15)}>15%</button>10      <button onClick={() => onChoose(20)}>20%</button>11    </div>12  );13}14 15function Summary({ tip, total }) {16  return (17    <div>18      <p>Tip: <strong>${tip.toFixed(2)}</strong></p>19      <p>Total: <strong>${total.toFixed(2)}</strong></p>20    </div>21  );22}23 24export default function App() {25  const [tipPercent, setTipPercent] = useState(15);26 27  const tip = (bill * tipPercent) / 100;28  const total = bill + tip;29 30  return (31    <div className="calculator">32      <h2>Tip calculator</h2>33      <p>Bill: ${bill.toFixed(2)}, tip {tipPercent}%</p>34      <TipButtons onChoose={setTipPercent} />35      <Summary tip={tip} total={total} />36    </div>37  );38}

1import { useState } from "react";2 3const bill = 48;4 5function TipButtons({ selected, onChoose }) {6  return (7    <div>8      <button disabled={selected === 10} onClick={() => onChoose(10)}>10%</button>9      <button disabled={selected === 15} onClick={() => onChoose(15)}>15%</button>10      <button disabled={selected === 20} onClick={() => onChoose(20)}>20%</button>11    </div>12  );13}14 15function Summary({ tip, total }) {16  return (17    <div>18      <p>Tip: <strong>${tip.toFixed(2)}</strong></p>19      <p>Total: <strong>${total.toFixed(2)}</strong></p>20    </div>21  );22}23 24export default function App() {25  const [tipPercent, setTipPercent] = useState(15);26 27  const tip = (bill * tipPercent) / 100;28  const total = bill + tip;29 30  return (31    <div className="calculator">32      <h2>Tip calculator</h2>33      <p>Bill: ${bill.toFixed(2)}, tip {tipPercent}%</p>34      <TipButtons selected={tipPercent} onChoose={setTipPercent} />35      <Summary tip={tip} total={total} />36    </div>37  );38}

Check your understanding

For each code question, ask: is this value state or a plain variable, and does the click tell React? Press Edit & run on a question's code to check.

Key takeaways

• Start from the screen: name its parts, and write each as a component, a capitalized function that returns markup.
• Work out values with plain JavaScript, show them with curly braces, and pass them to other components as props.
• Give a button a function to run later with onClick={() => …}. Writing onClick={f()} calls it right away.
• Changing a plain variable doesn't change the screen: React isn't told, and the next call starts it fresh.
• useState gives a value React remembers and a set function. Setting it makes React call the component again and change only what differs on the page.

Coming next: Your first component. It starts the Describing the UI stage and teaches components properly: writing them, nesting them, and moving them into their own files.