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
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
100
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
460
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
220
Building Products in the LLM Era
ymatsuwitter
10
4.4k
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
880
20250208_OpenAIDeepResearchがやばいという話
doradora09
PRO
0
170
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.5k
AndroidデバイスにFTPサーバを建立する
e10dokup
0
240
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
770
Featured
See All Featured
Music & Morning Musume
bryan
46
6.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Bash Introduction
62gerente
610
210k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Code Review Best Practice
trishagee
66
17k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Practical Orchestrator
shlominoach
186
10k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Become a Pro
speakerdeck
PRO
26
5.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
It's Worth the Effort
3n
184
28k
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