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
54
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
210
Seneca workshop
rualatngua
0
130
[ReactJS How to Workshop] Day 01
rualatngua
1
49
Other Decks in Programming
See All in Programming
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
840
What We Can Learn From OSS
inouehi
0
430
Site Reliability Engineering for GMO
pyama86
8
1.1k
try! Swift Tokyo 初参加報告LT
hinakko2
0
230
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
940
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
150
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
370
新宿ダンジョンを可視化してみた
satoshi7190
2
280
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
1.7k
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
120
2 週間で Twitter Bot を作ってみた
contour_gara
0
720
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
890
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
20
1.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
4 Signs Your Business is Dying
shpigford
176
21k
Optimising Largest Contentful Paint
csswizardry
11
2.4k
Ruby is Unlike a Banana
tanoku
96
10k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
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