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
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
3
460
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.2k
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
190
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
410
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
620
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
9
1.1k
rubygem開発で鍛える設計力
joker1007
2
190
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
180
VISITS_AIIoTビジネス共創ラボ登壇資料.pdf
iotcomjpadmin
0
160
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
220
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
260
Кто отправит outbox? Валентин Удальцов, автор канала Пых
lamodatech
0
330
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Unsuck your backbone
ammeep
671
58k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Invisible Side of Design
smashingmag
299
51k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Speed Design
sergeychernyshev
32
1k
Designing for humans not robots
tammielis
253
25k
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