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
Recriando o React do Zero em 10 minutos
Search
Afonso Pacifer
July 29, 2023
Programming
0
56
Recriando o React do Zero em 10 minutos
Front in Sampa 2023
Afonso Pacifer
July 29, 2023
Tweet
Share
More Decks by Afonso Pacifer
See All by Afonso Pacifer
Developer Experience (DevEx) no mundo Front-End: Do Ruby ao Next.js
afonsopacifer
0
30
Open Source e Developer Experience
afonsopacifer
1
61
Conhecendo a área de Developer Experience (DevEx)
afonsopacifer
0
41
Do Zero ao Sênior Apenas com Projetos Open Source
afonsopacifer
1
49
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
afonsopacifer
0
47
O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5.
afonsopacifer
0
150
HTML 5.3: O que existe além de a11y e SEO?
afonsopacifer
0
130
State of JS 2022
afonsopacifer
0
250
Welcome CSS LV5
afonsopacifer
0
190
Other Decks in Programming
See All in Programming
Jakarta EE meets AI
ivargrimstad
0
390
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
200
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
210
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
110
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
920
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
40
16k
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
150
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
260
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
150
PRレビューのお供にDanger
stoticdev
1
230
Learning Kotlin with detekt
inouehi
1
130
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.3k
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
The Cult of Friendly URLs
andyhume
78
6.2k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
For a Future-Friendly Web
brad_frost
176
9.6k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Embracing the Ebb and Flow
colly
84
4.6k
Thoughts on Productivity
jonyablonski
69
4.5k
Practical Orchestrator
shlominoach
186
10k
A designer walks into a library…
pauljervisheath
205
24k
Transcript
afonsopacifer.github.io Recriando o React do Zero em 10 minutos 1
afonsopacifer.github.io
Afonso Pacifer @afonsopacifer afonsopacifer.github.io DevRel & Front-End Specialist 2
Como usar o React? Sem create react app ou vite!
index.js import React . from “react" import ReactDom . from
“react-dom" Inst al l $ npm install react $ npm install react-dom
const Element = React.createElement( 'h1', { className: ‘sampa' }, 'Hello
World' ); Comp on ent HelloWorld.js ?
const Element = React.createElement( … } ReactDOM.render( Element, document.getElementById(‘app’) );
<div id=”app”><div/> Hello World index.js index.html Rend e
Por que usar?
Não toca no DOM
None
None
Duas funções
.component( ) JS const Element = component( 'h1', { id:
‘sampa' }, 'Hello' ); OBJ { type: 'h1', props: { id: ‘samba' }, children: [‘Hello'] }
.render( ) JS render( OBJ, document.getElementById(‘app’) ); <h1 id=”sampa”> Hello
<h1/> DOM API Hello
Exemplo
.map( )
Não toca no DOM?
OBJ { type: 'h1', props: {id: “app”}, children: [] }
New OBJ { type: ‘h2', props: {id: “app”}, children: [] } JS component( 'h1', { id: ‘sampa' }, 'Hello' ) JS render( OBJ, document.getElementById(‘app’) ); Diff <div id=”app”><div/>
Virtual DOM
Virtual DOM DOM
None
Developer Experience
None
const Element = ( <div> <h1>Hello, world!</h1> </div> ); const
HelloWorld = () => ( <div> <Element/> </div> ); HelloWorld.js JSX
… 24
fronti n .j s fronti n .j s github.com/afonsopacifer/frontinjs $
npm install frontinjs Functional and stateless component library
fronti n .j s fronti n .j s github.com/afonsopacifer/frontinjs
27 "Não se limite a ser apenas um(a) Dev React,
seja um(a) Dev Front-End” - Afonso Pacifer
@afonsopacifer Obrigado Front in Sampa afonsopacifer.github.io 28