Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ReactJS - The Container component pattern
Search
Khánh Trần
October 25, 2016
Programming
0
61
ReactJS - The Container component pattern
A short slide for ReactJS workshop.
Khánh Trần
October 25, 2016
Tweet
Share
More Decks by Khánh Trần
See All by Khánh Trần
Docker-Compose workshop
rualatngua
2
230
Seneca workshop
rualatngua
0
140
[ReactJS How to Workshop] Day 01
rualatngua
1
53
Other Decks in Programming
See All in Programming
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
470
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
18k
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
870
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
130
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
150
Goで作る、開発・CI環境
sin392
0
230
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
760
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
120
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
Thoughts on Productivity
jonyablonski
69
4.7k
A designer walks into a library…
pauljervisheath
207
24k
Speed Design
sergeychernyshev
32
1k
Automating Front-end Workflow
addyosmani
1370
200k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Scaling GitHub
holman
460
140k
Typedesign – Prime Four
hannesfritz
42
2.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Code Reviewing Like a Champion
maltzj
524
40k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
How to train your dragon (web standard)
notwaldorf
95
6.1k
Transcript
The Container Component pattern
Container Components? A container does data fetching and then renders
its corresponding sub-component. That’s it. — - Jason Bonta • StockWidgetContainer => StockWidget • TagCloudContainer => TagCloud
Why containers? // CommentList.js class CommentList extends React.Component { constructor()
{ super(); this.state = { comments: [] } } componentDidMount() { $.ajax({ url: "/my-comments.json", dataType: 'json', success: function(comments) { this.setState({comments: comments}); }.bind(this) }); } render() { return <ul> {this.state.comments.map(renderComment)} </ul>; } renderComment({body, author}) { return <li>{body}—{author}</li>; } }
There’s nothing “wrong” with this but... ...you miss out on
a few benefits of React
Reusability CommentList can’t be reused unless under the exact same
circumstances. • Top Customer Reviews vs. Most Recent Customer Reviews
Data structure Your markup components should state expectations of the
data they require. PropTypes are great for this. — - Learn React with chantastic
This time with a container // CommentListContainer.js class CommentListContainer extends
React.Component { constructor() { super(); this.state = { comments: [] } } componentDidMount() { $.ajax({ url: "/my-comments.json", dataType: 'json', success: function(comments) { this.setState({comments: comments}); }.bind(this) }); } render() { return <CommentList comments={this.state.comments} />; } }
Let's rework on CommentList to get comments as a prop
// CommentList.js class CommentList extends React.Component { constructor(props) { super(props); } render() { return <ul> {this.props.comments.map(renderComment)} </ul>; } renderComment({body, author}) { return <li>{body}—{author}</li>; } }
So, what did we get? • We’ve separated our data-fetching
and rendering concerns. • We’ve made our CommentList component reusable. • ...next >
...we’ve given CommentList the ability to set PropTypes and fail
loudly CommentList.propTypes = { comments: React.PropTypes.object.isRequired }
Q&A
Bonus: Making your app fast with high- performance components