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
74
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
52
Open Source e Developer Experience
afonsopacifer
1
76
Conhecendo a área de Developer Experience (DevEx)
afonsopacifer
0
62
Do Zero ao Sênior Apenas com Projetos Open Source
afonsopacifer
1
69
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
afonsopacifer
0
72
O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5.
afonsopacifer
0
170
HTML 5.3: O que existe além de a11y e SEO?
afonsopacifer
0
160
State of JS 2022
afonsopacifer
0
280
Welcome CSS LV5
afonsopacifer
0
210
Other Decks in Programming
See All in Programming
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
kuro_kurorrr
0
120
ReadMoreTextView
fornewid
1
450
A comprehensive view of refactoring
marabesi
0
970
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
3
770
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
970
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
320
FormFlow - Build Stunning Multistep Forms
yceruto
1
190
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
300
GoのGenericsによるslice操作との付き合い方
syumai
2
680
統一感のある Go コードを生成 AI の力で手にいれる
otakakot
0
3k
Java on Azure で LangGraph!
kohei3110
0
160
Datadog RUM 本番導入までの道
shinter61
1
310
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
39
1.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Cult of Friendly URLs
andyhume
79
6.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Adopting Sorbet at Scale
ufuk
77
9.4k
The Pragmatic Product Professional
lauravandoore
35
6.7k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Code Review Best Practice
trishagee
68
18k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Designing for humans not robots
tammielis
253
25k
Bash Introduction
62gerente
614
210k
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