Run React and explain the render boundary

Your goal: Create a React project that shows one learning goal, and explain what each file does.

The application you will build

Complete Interactive Browser Apps and Git and GitHub for Your Projects first. You need to use a browser console, run a local server, and commit and push with Git. This course builds a tracker for learning goals. A React component is a function that describes one part of the screen. Think of a reusable name-card template: give it a name and it describes the card to show. React turns those descriptions into the browser's DOM, the page elements people use, and updates them when data changes. Keep using meaningful HTML and ordinary JavaScript. Start with one summary that does one clear job.

Install Node.js 22.12 or newer from nodejs.org (the LTS version is fine) and check it with node --version. Create an empty folder called goal-tracker, open a terminal in it and run the commands below. They install exact versions that were tested together. npm also writes package-lock.json, which records every package installed; keep it, because npm ci uses it to reinstall exactly the same set later.

npm init -y
npm install --save-exact react@19.3.0 react-dom@19.3.0
npm install --save-dev --save-exact vite@8.3.3

Save this as index.html in the project folder:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Learning goal tracker</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

React draws the whole interface inside the empty <div id="root">. The module script loads your code. Make a src folder and save this as src/main.jsx:

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
createRoot(document.getElementById('root')).render(<App />);

Save the worked example below as src/App.jsx. Start the development server with npx vite --host 127.0.0.1 and open the address it prints, usually http://127.0.0.1:5173/. Leave it running: it reloads the page every time you save. Stop it with Ctrl+C. Run git init -b main in the folder and add a .gitignore containing node_modules/ so the installed packages are never committed.

export default function App() {
  const goal = { title: 'Explain semantic HTML', minutes: 30 };
  return (
    <main>
      <h1>My learning goals</h1>
      <section aria-labelledby="goal-heading">
        <h2 id="goal-heading">{goal.title}</h2>
        <p>Planned practice: {goal.minutes} minutes.</p>
      </section>
    </main>
  );
}

You should see one main heading, one goal heading and a thirty-minute estimate. Change the object and check that the displayed values change.

JSX is the HTML-like syntax in the component. Inside it, braces such as {goal.title} evaluate a JavaScript expression, something that produces a value. A for loop is a statement, so it does not fit there. Use className instead of HTML's class. Return one containing element, or a fragment (<>...</>) that groups elements without adding another DOM element.

Practice and debugging

1. Add a useful summary, such as a deadline or completed session count. Give each summary a distinct job.
2. Deliberately change a field name in the object without changing where the component reads it. Predict what will go missing, then check the page.
3. Repair the mismatch.

If the page is blank, read both the browser console and the terminal. Check the script path, imports and code syntax. A CSS change cannot fix code that failed to load.

Check yourself

1. Why is App capitalized?
2. Is the goal a database record?
3. Why retain the lockfile?

Answers

1. React treats capitalized JSX names as components and lowercase names as built-in elements.
2. No, it is local example data recreated during rendering.
3. Your chosen packages also install other packages. The lockfile records that full set, including those indirect dependencies.

Project milestone

Create a tracker README with the audience, the commands to install and start the project and the minimum useful goal fields. Commit the working summary, push it to a new GitHub repository and explain the difference between source code, React's rendered description and the actual browser DOM. Consult the current React quick start when checking your explanation.