Step 2: the static version (props only)
Everything comes from PRODUCTS through props, and the components are pure. Typing in the box or ticking the checkbox changes nothing in the table yet: there is no state. (key on each row lets React tell rows apart, Topic 3.3.)
Thinking in React is the five-step method for turning a design into an app: break the mockup into a component tree, build a static version with props only, find the minimal state, decide which component owns each piece of state, and finally pass callbacks down so children can change it (inverse data flow).
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Apply steps 1 and 3 to a to-do app with: a text input and Add button, a list of to-dos with checkboxes, and a footer saying 2 items left. List the components and the minimal state.
In the finished product table, the header should show Showing 4 of 6 products. Is the count state? Where would you compute it?
Explain it without notes
List the five steps of Thinking in React.
How do you decide whether a piece of data should be state?
How do you decide which component should own a piece of state?
What is inverse data flow, and why does React use it instead of two-way binding?
Preview
Console
Nothing logged yet.