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
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
660
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
150
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
200
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
12k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
870
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
280
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
500
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
7.3k
What's new in AppKit on macOS 26
1024jp
0
150
ニーリーにおけるプロダクトエンジニア
nealle
0
950
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
It's Worth the Effort
3n
185
28k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Docker and Python
trallard
45
3.5k
Writing Fast Ruby
sferik
628
62k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
A better future with KSS
kneath
238
17k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
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