Understand React, the browser, and the app we will build

Before you start

Know JavaScript functions, arrays, objects, events and promises. HTML/CSS basics are introduced as needed. No Python or Django is required.

Explanation

A web page starts with HTML describing its structure, CSS controlling its appearance, and JavaScript responding to events. React helps organize the JavaScript interface into components: functions that describe what should appear for their current inputs. A component is not a separate web server. React updates the browser DOM when its state changes; you usually describe the next interface instead of finding elements and changing their text yourself.

Our project is a job-application tracker. It will show fictional companies, roles, application status, an optional applied date, a job link, and notes. You will build create/edit/remove forms, search, pagination, saved browser data, and a second page that fetches example templates. There is no login, cloud database, automatic job search, or application submission. A Django backend is a possible later extension, not a prerequisite or hidden dependency.

React is the UI library. Vite supplies a development server and production build. A router coordinates app URLs. Browser storage persists the example data on one origin. Learning these boundaries helps you diagnose problems: a failed component render, a missing static asset, and unavailable storage need different fixes. Begin by reading the small component below. Capitalizing its name allows JSX to distinguish it from built-in HTML elements.

Worked example

Complete JSX component: Vite transforms this syntax. The verifier renders its initial output; project and browser tests exercise events.

export default function TrackerHeading() {
  return <section><h1>Applications</h1><p>Keep track of your next opportunity.</p></section>;
}

Expected behavior

ApplicationsKeep track of your next opportunity.

For rendered examples, the text above is the initial visible text; element boundaries may add visual spacing.

Common mistakes

Treating React as a database leads to expectations of account synchronization that this project does not provide. Writing a lowercase component name makes JSX treat it as an HTML element. Returning two adjacent elements without a wrapper is invalid JSX.

Guided practice

Write a small diagram with three boxes: browser, Vite development server, and static hosting. Place React, localStorage, and the finished JavaScript bundle in the correct boxes. Predict which boxes are needed after a static build is published.

Independent practice

Change the paragraph in TrackerHeading while keeping one h1. Explain which part is data and which part is structure. Success means you can describe why refreshing a page does not retrieve applications from StringClass or Django.

Check your work

Work in src/App.jsx. Record a prediction, observed result, and one failure case. These are local project tasks; StringClass does not execute or automatically grade them.

Recap

Explain how components turn data into interface elements and identify what runs in the browser.

References

Official documentation. Course baseline: React 19.3.1, Vite 8.3.5, React Router 8.5.0 and Node.js 24 LTS. Editorial verification: October 26, 2026.