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
80
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
62
Open Source e Developer Experience
afonsopacifer
1
82
Conhecendo a área de Developer Experience (DevEx)
afonsopacifer
0
69
Do Zero ao Sênior Apenas com Projetos Open Source
afonsopacifer
1
75
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
afonsopacifer
0
78
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
AIエージェント開発、DevOps and LLMOps
ymd65536
1
350
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
23
9k
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
1k
Rancher と Terraform
fufuhu
0
110
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
890
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
150
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
600
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
180
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
330
あのころの iPod を どうにか再生させたい
orumin
2
2.5k
AIでLINEスタンプを作ってみた
eycjur
1
200
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
180
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Invisible Side of Design
smashingmag
301
51k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
YesSQL, Process and Tooling at Scale
rocio
173
14k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
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