Two Pages in One App

The old site had two HTML files, and a link loaded the other one. A React app has a single page, and React draws into it whatever the state says. So which page the visitor sees is state too: page in App, either "home" or "showtimes". App keeps the header and the footer, and in main, it shows one of the two pages, with the conditional operator from the lesson Lists and Conditions:

<main className="mx-auto max-w-5xl px-4 md:px-8">
    {page === "home" ? <Home /> : <Showtimes />}
</main>

Each page is a component in its own file. Showtimes.jsx is ready, with the heading, the paragraph and the head of the table from the old showtimes page. Home.jsx is empty: the three sections of the home page move there from App.jsx. A component returns one element, and the sections are three, so Home returns them in a fragment, <>…</>.

Buttons, not links. The buttons in the header change the state, as the day tabs did in the Sharing State lesson: Header gets the setter in its props, <Header onNavigate={setPage} />, and its buttons call it, for example onClick={() => onNavigate("showtimes")}. They are buttons because they don't go to another address: they change something on this page. And the logo takes you home, as it did on the old site.

Most real websites made with React use a router for their pages, such as React Router, which the end of the React course mentions. With it, each page has an address of its own, such as /showtimes, so the browser's Back button works, and you can send someone a link to any page. For the two pages of our cinema, one state is enough. You'll notice the difference, though: when a visitor reloads the page, they're back at home, because the state starts as "home".