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
82
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
64
Open Source e Developer Experience
afonsopacifer
1
87
Conhecendo a área de Developer Experience (DevEx)
afonsopacifer
0
74
Do Zero ao Sênior Apenas com Projetos Open Source
afonsopacifer
1
79
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
afonsopacifer
0
80
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
CSC509 Lecture 02
javiergs
PRO
0
410
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
920
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
240
CSC509 Lecture 04
javiergs
PRO
0
300
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
160
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
780
ててべんす独演会〜Flowの全てを語ります〜
tbsten
1
220
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
410
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
340
CSC305 Lecture 03
javiergs
PRO
0
230
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.5k
株式会社 Sun terras カンパニーデック
sunterras
0
230
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
224
10k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
Navigating Team Friction
lara
189
15k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.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