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
26
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
Open Source e Developer Experience
afonsopacifer
0
33
Conhecendo a área de Developer Experience (DevEx)
afonsopacifer
0
4
Do Zero ao Sênior Apenas com Projetos Open Source
afonsopacifer
0
13
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
afonsopacifer
0
17
O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5.
afonsopacifer
0
110
HTML 5.3: O que existe além de a11y e SEO?
afonsopacifer
0
80
State of JS 2022
afonsopacifer
0
200
Welcome CSS LV5
afonsopacifer
0
180
No pain no gain
afonsopacifer
0
150
Other Decks in Programming
See All in Programming
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
270
Lessons by WebAssembly app in production on CDN Edge Computing Service
tetsuharuohzeki
0
210
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
400
Regular Expressions, REXML, Automata Learning
makenowjust
0
220
マルチモジュールにおけるテスト最適化
fxwx23
0
210
Ebitengineの1vs1ゲーム WebRTCの活用
ponyo877
0
380
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
1.1k
今インフラ技術をイチから学び直すなら
yuhta28
1
140
Kotlin 2.0が与えるAndroid開発の進化
masayukisuda
1
410
状態管理ライブラリZustandの導入から運用まで
k1tikurisu
3
470
What is Parser
yui_knk
9
4.1k
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
9
2.4k
Featured
See All Featured
Facilitating Awesome Meetings
lara
49
6k
Fantastic passwords and where to find them - at NoRuKo
philnash
48
2.8k
Large-scale JavaScript Application Architecture
addyosmani
508
110k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.6k
Designing for Performance
lara
604
68k
Being A Developer After 40
akosma
84
590k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Happy Clients
brianwarren
96
6.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
359
19k
BBQ
matthewcrist
83
9.2k
Building a Scalable Design System with Sketch
lauravandoore
459
32k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
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