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
React Containers - South Bay JS
Search
Eli
February 10, 2016
Technology
1
46
React Containers - South Bay JS
Lightning talk about using "containers" in reactjs to create reuseable components.
Eli
February 10, 2016
Tweet
Share
More Decks by Eli
See All by Eli
Secure Peer-to-Peer Browser Communication
emattson
0
43
Other Decks in Technology
See All in Technology
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
360
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
16
6.5k
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
460
Building Products in the LLM Era
ymatsuwitter
10
4.4k
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
950
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
120
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
FastConnect の冗長性
ocise
1
9.6k
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
710
これからSREになる人と、これからもSREをやっていく人へ
masayoshi
6
4.1k
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
6
1.4k
SCSAから学ぶセキュリティ管理
masakamayama
0
140
Featured
See All Featured
Site-Speed That Sticks
csswizardry
3
370
Building Your Own Lightsaber
phodgson
104
6.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Adopting Sorbet at Scale
ufuk
74
9.2k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Making Projects Easy
brettharned
116
6k
Code Reviewing Like a Champion
maltzj
521
39k
Practical Orchestrator
shlominoach
186
10k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Transcript
Reactjs and containers Eli Mattson @elicodes
What is React? A JavaScript library for building user interfaces
JSX
CommentList Component class CommentList extends React.Component { constructor() { super();
this.state = {comments: [], title: ''}; } componentDidMount() { $.post('/echo/json/', {json: JSON.stringify(jsonData), delay: 1}) .done(d => this.setState({comments: d['comments'], title: d['title']})); } render() { let comments = this.state.comments.map(c => (<li>{c.body} - <em>{c.author} </em> </li>)); return ( <div> <h2> {this.state.title} Comments </h2> <ul> {comments} </ul> </div> ); } } React.render(<CommentList />, document.getElementById('test'));
CommentList Component class CommentList extends React.Component { constructor() { super();
this.state = {comments: [], title: ''}; } componentDidMount() { $.post('/echo/json/', {json: JSON.stringify(jsonData), delay: 1}) .done(d => this.setState({comments: d['comments'], title: d['title']})); } render() { let comments = this.state.comments.map(c => (<li>{c.body} - <em>{c.author} </em> </li>)); return ( <div> <h2> {this.state.title} Comments </h2> <ul> {comments} </ul> </div> ); } } React.render(<CommentList />, document.getElementById('test'));
Our App Component A Component A Component A Component A
CommentList Component class CommentList extends React.Component { constructor() { super();
this.state = {comments: [], title: ''}; } componentDidMount() { $.post('/echo/json/', {json: JSON.stringify(jsonData), delay: 1}) .done(d => this.setState({comments: d['comments'], title: d['title']})); } render() { let comments = this.state.comments.map(c => (<li>{c.body} - <em>{c.author} </em> </li>)); return ( <div> <h2> {this.state.title} Comments </h2> <ul> {comments} </ul> </div> ); } } React.render(<CommentList />, document.getElementById('test'));
Our App Component A Component A Other App Component A
Component A
None
The Solution! Use a container to handle the state and
render the corresponding sub- component as a “pure” component.
Component A Component A Component A Container State goes here
ONLY props goes here
TO THE CODE!!!!! https:/ /jsfiddle.net/elicodes/m9z3y2ve/
Credits / Links https:/ /medium.com/@learnreact/ container-components- c0e67432e005#.yvdmzmwsp https:/ /www.youtube.com/watch? v=KYzlpRvWZ6c
- Jason’s talk