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
Laravel Boost 超入門
fire_arlo
3
220
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
130
Navigating Dependency Injection with Metro
zacsweers
3
3.5k
Swift Updates - Learn Languages 2025
koher
2
510
Cache Me If You Can
ryunen344
2
4k
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
290
AI Agents: How Do They Work and How to Build Them @ Shift 2025
slobodan
0
100
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
11
4.4k
Ruby Parser progress report 2025
yui_knk
1
460
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How STYLIGHT went responsive
nonsquared
100
5.8k
Navigating Team Friction
lara
189
15k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
What's in a price? How to price your products and services
michaelherold
246
12k
Agile that works and the tools we love
rasmusluckow
330
21k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Gamification - CAS2011
davidbonilla
81
5.4k
RailsConf 2023
tenderlove
30
1.2k
The Language of Interfaces
destraynor
161
25k
Code Reviewing Like a Champion
maltzj
525
40k
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