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
81
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
63
Open Source e Developer Experience
afonsopacifer
1
85
Conhecendo a área de Developer Experience (DevEx)
afonsopacifer
0
72
Do Zero ao Sênior Apenas com Projetos Open Source
afonsopacifer
1
77
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
afonsopacifer
0
79
O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5.
afonsopacifer
0
180
HTML 5.3: O que existe além de a11y e SEO?
afonsopacifer
0
170
State of JS 2022
afonsopacifer
0
290
Welcome CSS LV5
afonsopacifer
0
220
Other Decks in Programming
See All in Programming
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
Platformに“ちょうどいい”責務ってどこ? 関心の熱さにあわせて考える、責務分担のプラクティス
estie
1
230
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
Improving my own Ruby thereafter
sisshiki1969
1
160
OSS開発者という働き方
andpad
5
1.7k
rage against annotate_predecessor
junk0612
0
170
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.5k
Design Foundational Data Engineering Observability
sucitw
3
210
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
190
RDoc meets YARD
okuramasafumi
4
170
速いWebフレームワークを作る
yusukebe
5
1.7k
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
3
470
Featured
See All Featured
Facilitating Awesome Meetings
lara
55
6.5k
Statistics for Hackers
jakevdp
799
220k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Why Our Code Smells
bkeepers
PRO
339
57k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Git: the NoSQL Database
bkeepers
PRO
431
66k
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