Build Your First React Website (Part II)
We talked about these in Part I
Values passed are
● JSX Javascript XML
Stateless snapshots
● Functional components
● Class-based components
Live!
Object-oriented
States
Lifecycle hooks
In this class
1. States
2. Forms and controlled components
3. Render props
4. Context
5. Lifecycle hooks
6. Observer pattern
Let’s Get Started!
Our Photo Journal Web App
<App />
<BannerImage />
Welcome to My Photo Journal
<StatusBar />
<ContentArea />
<UserManager />
<MessageArea />
<AlbumMaker />
<PhotoEntry />
<PhotoEntry />
<PhotoEntry />
<PhotoEntry />
LayeredDiv
Props
props
Props
this.props.name
States vs. Props
props
React Component
●
●
From outside
Cannot change
state
●
●
●
●
Internal
Persistent
Can only be changed by the
component itself
Determine if component is
re-rendered !!!!
props
State
set:
this.setState( { x: y } )
get:
this.state.attribute
Controlled components
this.state.userIDFieldValue
State
userIDFieldValue
passwordFieldValue
onChange
onChange
Render Prop
<App />
<BannerImage />
<App />
Welcome to My Photo Journal
<BannerImage />
<StatusBar />
<ContentArea />
<StatusBar />
<ContentArea />
<UserManager />
<MessageArea />
<LayeredDiv />
<AlbumMaker />
<UserManager />
<AlbumMaker />
Layer 1
<PhotoEntry />
<PhotoEntry />
<PhotoEntry />
<MessageArea />
Layer 2
<PhotoEntry />
<PhotoEntry />
<PhotoEntry />
Layer 3
LayeredDiv
Render Prop
<ContentArea />
<UserManager />
Okay here’s an x
as a Props:
a function
( x ) => { make MessageArea }
Meaning:
When you are ready, call me (I am a prop)
and give me an x and I will render a
component with x
<MessageArea />
X
Context
<App />
<BannerImage />
<App />
Welcome to My Photo Journal
<BannerImage />
<StatusBar />
<ContentArea />
<StatusBar />
<ContentArea />
<UserManager />
ContentAreaContext
<MessageArea />
<LayeredDiv />
<AlbumMaker />
<UserManager />
<AlbumMaker />
Layer 1
<PhotoEntry />
<PhotoEntry />
<PhotoEntry />
<MessageArea />
Layer 2
<PhotoEntry />
<PhotoEntry />
<PhotoEntry />
Layer 3
LayeredDiv
Lifecycle Hooks
Mounting Methods
Update Methods
●
constructor
●
componentWillReceiveProps
●
componentWillMount
●
shouldComponentUpdate
●
render
●
componentWillUpdate
●
componentDidMount
●
render
●
componentDidUpdate
Unmounting Methods
●
componentWillUnmount
Grey = deprecated (will be removed in future versions)
Observer Pattern
<App />
<BannerImage />
<App />
Welcome to My Photo Journal
<BannerImage />
<StatusBar />
<ContentArea />
<StatusBar />
<ContentArea />
<UserManager />
<MessageArea />
<LayeredDiv />
<AlbumMaker />
<UserManager />
<AlbumMaker />
Layer 1
<PhotoEntry />
<PhotoEntry />
<PhotoEntry />
<MessageArea />
Layer 2
<PhotoEntry />
<PhotoEntry />
<PhotoEntry />
Layer 3
LayeredDiv
Observer Pattern
<App />
AppContext
<StatusBar />
<x />
<UserManager />
Event!
Event
Observer List
<y />
<StatusBar />
<x />
<y />
<z />
<z />