Lecture 05 - Building components and applications with React
Lecture 05 - Building components and applications with React
2
Start with the mockup
3
Break the UI into a component hierarchy
4
Build a static version
◆ 5 components
5
ProductRow
6
ProductTable
7
SearchBar
8
Make the UI interactive
◆ Use state, State is like a component’s memory.
◆ State as the minimal set of changing data that your app needs to
remember.
◆ The most important principle for structuring state is to keep it
DRY (Don’t Repeat Yourself)
9
Identify the State
1. The original list of products not state, passed in as props
2. The filtered list of products not state, it can be computed
3. The search text the user has entered state
4. The value of the checkbox state, changes over time and can’t
be computed
10
Identify where the state lives
◆ React uses passing data from parent to child component
◆ Identify every component that renders something based on that
state.
◆ Find their closest common parent component—a component above
them all in the hierarchy.
put the state directly into their common parent.
put the state into some component above their common parent.
11
Decide where the state lives
◆ SearchBar needs state
(search text and checkbox
value)
◆ ProductTable needs state to
filter the product list.
◆ FilterableProductTable:
common parent keep the
filter text and checked state
values
12
useState() Hook
◆ Add two state variables at the top of FilterableProductTable, and
initialize state
13
Add the onChange event handlers
14