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 Component Pattern
Search
Juliane Albuquerque
September 24, 2019
Programming
0
56
React Component Pattern
Juliane Albuquerque
September 24, 2019
Tweet
Share
More Decks by Juliane Albuquerque
See All by Juliane Albuquerque
Retrospectiva CSS
julianealbuquerque
0
17
Design System
julianealbuquerque
0
57
Front End - Web + HTML
julianealbuquerque
0
36
Front End - Classes + ID's + CSS + GITHUB
julianealbuquerque
0
41
Front End - Estilizando com CSS
julianealbuquerque
0
29
Front End - Especificidade CSS + Box Model
julianealbuquerque
0
67
Front End - Bootstrap + Media Queries
julianealbuquerque
0
32
Front End - Javascript
julianealbuquerque
0
56
Front End - JQuery
julianealbuquerque
0
38
Other Decks in Programming
See All in Programming
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
A2A プロトコルを試してみる
azukiazusa1
2
1.2k
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
140
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
1k
GoのGenericsによるslice操作との付き合い方
syumai
3
700
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
0
200
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
100
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
230
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
110
童醫院敏捷轉型的實踐經驗
cclai999
0
200
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Adopting Sorbet at Scale
ufuk
77
9.4k
Producing Creativity
orderedlist
PRO
346
40k
Embracing the Ebb and Flow
colly
86
4.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Transcript
React Component Patterns Juliane Albuquerque
“Componentes permitem dividir a interface do usuário em partes independentes
e reutilizáveis, e pensar sobre cada parte isoladamente.” reactjs.org
5 tipos de componentes
None
Círculo
Círculo render props context state lifecycle events
render props context state lifecycle events render props context
Stateful render props context state lifecycle events Stateless render props
context
Círculo Pequeno círculo
Pequeno círculo no círculo
Pequeno círculo no círculo Verde
Pequeno círculo no círculo Azul
Nós podemos reutilizar o pequeno círculo
class SmallCircleInCircle { constructor() { super() this.state = { smarts:
“smarts”} } render() { return <SmallCircle {… state} /> } } const SmallCircle = props => <div>{props.smarts}</div> Pequeno círculo no círculo
class SmallCircleInCircle { constructor() { super() this.state = { smarts:
“smarts”} } render() { return <SmallCircle {… state} /> } } const SmallCircle = props => <div>{props.smarts}</div> Pequeno círculo no círculo
Pequeno círculo no círculo class SmallCircleInCircle { constructor() { super()
this.state = { smarts: “smarts”} } render() { return <SmallCircle {… state} /> } } const SmallCircle = props => <div>{props.smarts}</div>
Pequeno círculo no círculo class SmallCircleInCircle { constructor() { super()
this.state = { smarts: “smarts”} } render() { return <SmallCircle {… state} /> } } const SmallCircle = props => <div>{props.smarts}</div>
Pequeno círculo no círculo class SmallCircleInCircle { constructor() { super()
this.state = { smarts: “smarts”} } render() { return <SmallCircle {… state} /> } } const SmallCircle = props => <div>{props.smarts}</div>
Container Component
Porém esta é só a metade da solução
Eu quero reutilizar os círculos
None
Pequeno círculo no círculo no círculo pontilhado
function DottedCircle(AnyCircle) { return class Circle extends React.Component { constructor()
{ super() this.state = { smarts: “smarts”} } render() { return <AnyCircle {…this.state} /> } } } function SmallCircle(props) { return <div>{props.smarts}</div> } const SmallCircleInCircle = DottedCircle(SmallCircle)
function DottedCircle(AnyCircle) { return class Circle extends React.Component { constructor()
{ super() this.state = { smarts: “smarts”} } render() { return <AnyCircle {…this.state} /> } } } function SmallCircle(props) { return <div>{props.smarts}</div> } const SmallCircleInCircle = DottedCircle(SmallCircle)
function DottedCircle(AnyCircle) { return class Circle extends React.Component { constructor()
{ super() this.state = { smarts: “smarts”} } render() { return <AnyCircle {…this.state} /> } } } function SmallCircle(props) { return <div>{props.smarts}</div> } const SmallCircleInCircle = DottedCircle(SmallCircle)
function DottedCircle(AnyCircle) { return class Circle extends React.Component { constructor()
{ super() this.state = { smarts: “smarts”} } render() { return <AnyCircle {…this.state} /> } } } function SmallCircle(props) { return <div>{props.smarts}</div> } const SmallCircleInCircle = DottedCircle(SmallCircle)
function DottedCircle(AnyCircle) { return class Circle extends React.Component { constructor()
{ super() this.state = { smarts: “smarts”} } render() { return <AnyCircle {…this.state} /> } } } function SmallCircle(props) { return <div>{props.smarts}</div> } const SmallCircleInCircle = DottedCircle(SmallCircle)
Container Component
None
Higher order components (HOC’s)
None
Pequeno círculo no círculo tracejado no círculo
class Circle extends React.Component { constructor() { super() this.state =
{ smarts: “smarts”} } render() { return this.props.dashedCircle(this.state) } } function SmallCircle(props) { return <div>{props.smarts}</div> } const SmallCircleInCircle = <Circle dashedCircle={state => ( <SmallCircle {...state} /> )} />
class Circle extends React.Component { constructor() { super() this.state =
{ smarts: “smarts”} } render() { return this.props.dashedCircle(this.state) } } function SmallCircle(props) { return <div>{props.smarts}</div> } const SmallCircleInCircle = <Circle dashedCircle={state => ( <SmallCircle {...state} /> )} />
class Circle extends React.Component { constructor() { super() this.state =
{ smarts: “smarts”} } render() { return this.props.dashedCircle(this.state) } } function SmallCircle(props) { return <div>{props.smarts}</div> } const SmallCircleInCircle = <Circle dashedCircle={state => ( <SmallCircle {...state} /> )} /> this.state
class Circle extends React.Component { constructor() { super() this.state =
{ smarts: “smarts”} } render() { return this.props.dashedCircle(this.state) } } function SmallCircle(props) { return <div>{props.smarts}</div> } const SmallCircleInCircle = <Circle dashedCircle={state => ( <SmallCircle {...state} /> )} />
class Circle extends React.Component { constructor() { super() this.state =
{ smarts: “smarts”} } render() { return this.props.dashedCircle(this.state) } } function SmallCircle(props) { return <div>{props.smarts}</div> } const SmallCircleInCircle = <Circle dashedCircle={state => ( <SmallCircle {...state} /> )} />
Container Component
None
Render Props
5 tipos de componentes
Stateful Components
Stateless Components
Container Components
Higher order components (HOC’s)
Render Props
Container Component
Obrigada! Juliane Albuquerque Referências: https://medium.com/teamsubchannel/react-component-patterns-e7fb75be7bb0 https://www.youtube.com/watch?v=YaZg8wg39QQ