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
57
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
62
Conhecendo a área de Developer Experience (DevEx)
afonsopacifer
0
42
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
48
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
JAWS Days 2025のインフラ
komakichi
1
120
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
300
Jasprが凄い話
hyshu
0
180
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
500
Introduction to kotlinx.rpc
arawn
0
770
Formの複雑さに立ち向かう
bmthd
1
940
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
940
The Clean ArchitectureがWebフロントエンドでしっくりこないのは何故か / Why The Clean Architecture does not fit with Web Frontend
twada
PRO
2
580
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
120
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
200
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
160
Domain-Driven Design (Tutorial)
hschwentner
13
22k
Featured
See All Featured
Site-Speed That Sticks
csswizardry
4
410
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Practical Orchestrator
shlominoach
186
10k
Gamification - CAS2011
davidbonilla
80
5.2k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
13
1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
BBQ
matthewcrist
87
9.5k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Statistics for Hackers
jakevdp
797
220k
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