The Cinema as a React App

Welcome to the last project of the Web Development path! Starlight Cinema comes back one last time, and you'll rebuild it as a React app. Visitors will see the same pages: the films, the showtimes, the seats and their tickets. But inside, the site will be made of components that draw the page from data and state. When a visitor chooses a day or a seat, you won't change the page yourself, as script.js did: you'll change the state, and React redraws what has changed.

The files. The cinema is laid out like the apps of the React course:

• index.html is the app's only page: <div id="root"> and the script that loads main.jsx. The home page and the showtimes will both be drawn into it.
• main.jsx renders <App /> into #root and imports style.css, as in the React course.
• style.css is the stylesheet from the project The Cinema in Tailwind, unchanged: the theme with night, gold and the display font, the table cells, and the classes day, active, seat, taken and selected. When main.jsx imports it, Start Coder turns it into CSS, as before.
• App.jsx has the home page, already turned into JSX, so that you don't have to retype it: the header, the three sections and the footer.
• showtimes.json has the showtimes, as before.

Tailwind in JSX. Look at App.jsx: the classes are the same as on the old page, only class has become className, as in the JSX lesson. Tailwind looks for class names in all your files, the .jsx files included, so they work just as they did. Two more things have changed. The links in the header and See what's on have become buttons, with cursor-pointer like the Book button, and they don't do anything yet: an app with a single page has no other page to link to. You'll bring them to life in the next exercise. And in the table of prices, the rows are in a <tbody>. In HTML, the browser adds it by itself, but React builds the table exactly as the JSX says, and without <tbody>, it warns in the console.

What's outside React. React draws only what's inside #root. The head and the body itself are in index.html, which is ordinary HTML, so a class there is class, not className. The body needs the background and the text color of the old pages, and the head needs two lines from the old index.html: the viewport, without which phones shrink the page, and the description for search engines:

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A small cinema with big films, on Elm Street since 1932. This week's films, showtimes and ticket prices.">

The header as a component. Then you'll start splitting the page into components, as in the Components lesson. The header comes first, because it will soon have a job of its own: switching the pages.

(The footer says Website by Anna, the name in our example files. If you like, put your own name back.)