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
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1k
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
340
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
3
1.6k
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
210
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
120
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
390
ロールが細分化された組織でSREは何をするか?
tgidgd
1
200
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
2
340
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
190
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
360
Claude Code に プロジェクト管理やらせたみた
unson
8
4.9k
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
18
7k
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Designing for Performance
lara
610
69k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Designing Experiences People Love
moore
142
24k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The Pragmatic Product Professional
lauravandoore
35
6.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
We Have a Design System, Now What?
morganepeng
53
7.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
A designer walks into a library…
pauljervisheath
207
24k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
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