Scribd
Upload
4 views

Lecture 05 - Building components and applications with React

The document outlines the process of building user interfaces with React by breaking down the UI into components, defining their visual states, and connecting them for data flow. It emphasizes the importance of state management, identifying where state should reside within the component hierarchy, and utilizing the useState() hook for interactivity. Additionally, it highlights the need for event handlers to manage user input effectively.

Uploaded by

Yuu Ichi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Lecture 05 - Building components and applications with React

The document outlines the process of building user interfaces with React by breaking down the UI into components, defining their visual states, and connecting them for data flow. It emphasizes the importance of state management, identifying where state should reside within the component hierarchy, and utilizing the useState() hook for interactivity. Additionally, it highlights the need for event handlers to manage user input effectively.

Uploaded by

Yuu Ichi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

Building Components and

Applications with React


Thinking in React
◆ When you build a user interface with React,
 First, break it apart into pieces called components.
 Then, describe the different visual states for each components.
 Finally, connect your components together so that the data flows through
them.

2
Start with the mockup

3
Break the UI into a component hierarchy

4
Build a static version
◆ 5 components

◆ The components only return JSX


◆ The component at the top of the hierarchy (FilterableProductTable)
will take the data model as a prop.

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

◆ Pass filterText and inStockOnly to


ProductTable and SearchBar as props:

13
Add the onChange event handlers

14

You might also like