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
PicoRuby on Rails
makicamel
2
110
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.1k
A2A プロトコルを試してみる
azukiazusa1
2
1.2k
VS Code Update for GitHub Copilot
74th
1
470
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
110
童醫院敏捷轉型的實踐經驗
cclai999
0
200
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
230
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
230
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
110
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
460
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
580
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
500
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
710
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Designing Experiences People Love
moore
142
24k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
KATA
mclloyd
30
14k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Scaling GitHub
holman
459
140k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
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