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
44
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
40
Other Decks in Technology
See All in Technology
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
370
Android Target SDK 35 (Android 15) 対応の概要
akkie76
0
200
LLM開発・活用の舞台裏@2024.04.25
yushin_n
3
1.4k
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
16
6.5k
競技としてのKaggle、役に立つKaggle
yu4u
7
2.5k
2024春 注目のWeb系 OSS & SaaS 3選
makies
0
210
How to Lead? Testimonial of a Lead Android Engineer
oleur
1
120
同じ様なUIをiOS/Android間で合わせるヒントNo.2
fumiyasac0921
1
110
M&A戦略を支えるデータマネジメント (MIDAS Tech Study #16 GENDA Komiyama)
kommy339
1
170
いいたいことちゃんという
tkengo
0
260
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Musicを例に~
otanet
0
320
require(ESM)とECMAScript仕様
uhyo
4
1k
Featured
See All Featured
What's new in Ruby 2.0
geeforr
337
31k
BBQ
matthewcrist
80
8.8k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Product Roadmaps are Hard
iamctodd
45
9.8k
KATA
mclloyd
16
12k
Statistics for Hackers
jakevdp
790
220k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Code Reviewing Like a Champion
maltzj
515
39k
Raft: Consensus for Rubyists
vanstee
133
6.3k
Fireside Chat
paigeccino
22
2.6k
Done Done
chrislema
178
15k
Scaling GitHub
holman
457
140k
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