Why React, and what we're building

Declarative UI, and a tour of the watchlist app you will build lesson by lesson.

What React does when the data changes

Type in the Title or Year box and watch the card.

You changed the data, not the page.

When the data changes, React:

1. Re-runs your component to get a new description of the screen.
2. Compares it with the last description.
3. Applies the difference to the real page.

Press the button and watch the three steps.

Only the year text flashes, and the heading does not move. React changes just the lines that differ, which is why re-rendering is cheap.

Before the first component

If you want extra practice on the show data first, start at the JavaScript refresher. The next lesson begins the app.