Component Hierarchy &

Passing Props

React Week 06

Schedule

01

03

02

05

04

06

Recap

Break

Component Hierarchy

Styling Components

Passing Props

Questions!

25 min

20 min

25 min

20 min

10 min

10 min

Previously on ReDi React

Rendering Lists

​

Handling Events

Component Hierarchy

Thinking in React

1. Start with a mock (or sketch)
2. Break The UI Into A Component Hierarchy
3. Build A Static Version in React
4. Identify The Minimal (but complete) Representation Of UI State
5. Identify Where Your State Should Live
6. Add Inverse Data Flow

Start With a Mockup

Break The UI Into A Component Hierarchy

Tweet

Avatar

Author

Time

Message

ReplyButton

LikeButton

RetweetButton

MoreOptionsButton

Live Coding!

Break!

Passing Props

How do we pass props?

Live Coding!

Questions?

Resources

• https://reactjs.org/docs/thinking-in-react.html
• https://reactjs.org/docs/components-and-props.html

• Component Hierarchy Notion Card
• Passing Props Notion Card

• https://codesandbox.io/s/static-tweet-live-intsz
• https://codesandbox.io/s/props-tweet-live-v3cif

DOCS & WALKTHROUGHS

FURTHER READING / STRETCH

EXERCISES

Thank You!