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
46
React Component Pattern
Juliane Albuquerque
September 24, 2019
Tweet
Share
More Decks by Juliane Albuquerque
See All by Juliane Albuquerque
Retrospectiva CSS
julianealbuquerque
0
16
Design System
julianealbuquerque
0
49
Front End - Web + HTML
julianealbuquerque
0
32
Front End - Classes + ID's + CSS + GITHUB
julianealbuquerque
0
33
Front End - Estilizando com CSS
julianealbuquerque
0
26
Front End - Especificidade CSS + Box Model
julianealbuquerque
0
63
Front End - Bootstrap + Media Queries
julianealbuquerque
0
31
Front End - Javascript
julianealbuquerque
0
52
Front End - JQuery
julianealbuquerque
0
35
Other Decks in Programming
See All in Programming
Infrastructure as Code でセキュリティを楽にしよう!
konokenj
5
1.4k
DjangoNinjaで高速なAPI開発を実現する
masaya00
0
440
Cloud Adoption Frameworkにみる組織とクラウド導入戦略(縮小版)
tomokusaba
1
170
M5Stack に色々な M5ユニットをつないで扱う為の新たなアプローチ
gob
0
200
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
0
140
VS Code extension: ドラッグ&ドロップでファイルを並び替える
ttrace
0
160
(Deep|Web) Link support with expo-router
mrtry
0
110
sqlcを利用してsqlに型付けを
kamiyam
0
230
CDKを活用した 大規模コンテナ移行 プロジェクトの紹介
yoyoyopg
0
240
ビット演算の話 / Let's play with bit operations
kaityo256
PRO
4
160
型付きで行うVSCode拡張機能開発 / VSCode Meetup #31
mazrean
0
230
色んなオートローダーを覗き見る #phpcon_okinawa
o0h
PRO
5
370
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.3k
Mobile First: as difficult as doing things right
swwweet
222
8.8k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.9k
Faster Mobile Websites
deanohume
304
30k
Building Better People: How to give real-time feedback that sticks.
wjessup
360
19k
Building a Modern Day E-commerce SEO Strategy
aleyda
37
6.8k
Six Lessons from altMBA
skipperchong
26
3.4k
Rails Girls Zürich Keynote
gr2m
93
13k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.7k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
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