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
57
React Component Pattern
Juliane Albuquerque
September 24, 2019
Tweet
Share
More Decks by Juliane Albuquerque
See All by Juliane Albuquerque
Retrospectiva CSS
julianealbuquerque
0
18
Design System
julianealbuquerque
0
57
Front End - Web + HTML
julianealbuquerque
0
36
Front End - Classes + ID's + CSS + GITHUB
julianealbuquerque
0
42
Front End - Estilizando com CSS
julianealbuquerque
0
29
Front End - Especificidade CSS + Box Model
julianealbuquerque
0
68
Front End - Bootstrap + Media Queries
julianealbuquerque
0
32
Front End - Javascript
julianealbuquerque
0
57
Front End - JQuery
julianealbuquerque
0
39
Other Decks in Programming
See All in Programming
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
520
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
140
Swift Updates - Learn Languages 2025
koher
2
470
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
290
Navigating Dependency Injection with Metro
zacsweers
3
260
RDoc meets YARD
okuramasafumi
4
170
Laravel Boost 超入門
fire_arlo
3
210
Design Foundational Data Engineering Observability
sucitw
3
190
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
270
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
The Cult of Friendly URLs
andyhume
79
6.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Side Projects
sachag
455
43k
Bash Introduction
62gerente
615
210k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Context Engineering - Making Every Token Count
addyosmani
2
41
Testing 201, or: Great Expectations
jmmastey
45
7.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
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