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
79
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
58
Open Source e Developer Experience
afonsopacifer
1
80
Conhecendo a área de Developer Experience (DevEx)
afonsopacifer
0
68
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
280
Welcome CSS LV5
afonsopacifer
0
220
Other Decks in Programming
See All in Programming
新世界の理解
koriym
0
130
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
430
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
260
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
120
Jakarta EE Meets AI
ivargrimstad
0
580
QA x AIエコシステム段階構築作戦
osu
0
240
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
800
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
280
AIのメモリー
watany
12
1.2k
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
670
Workers を定期実行する方法は一つじゃない
rokuosan
0
140
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
Designing for Performance
lara
610
69k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
540
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
750
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Statistics for Hackers
jakevdp
799
220k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
BBQ
matthewcrist
89
9.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
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