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
73
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
45
Open Source e Developer Experience
afonsopacifer
1
75
Conhecendo a área de Developer Experience (DevEx)
afonsopacifer
0
58
Do Zero ao Sênior Apenas com Projetos Open Source
afonsopacifer
1
66
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
afonsopacifer
0
70
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
150
State of JS 2022
afonsopacifer
0
270
Welcome CSS LV5
afonsopacifer
0
210
Other Decks in Programming
See All in Programming
List Unfolding - 'unfold' as the Computational Dual of 'fold', and how 'unfold' relates to 'iterate'"
philipschwarz
PRO
0
110
TSConfig Solution Style & subpath imports to switch types on a per-file basis
maminami373
1
180
「MCPを使ってる人」が より詳しくなるための解説
yamaguchidesu
0
530
TypeScript を活かしてデザインシステム MCP を作る / #tskaigi_after_night
izumin5210
4
460
Duke on CRaC with Jakarta EE
ivargrimstad
1
680
PT AI без купюр
v0lka
0
180
Proxmoxをまとめて管理できるコンソール作ってみました
karugamo
1
390
Feature Flag 自動お掃除のための TypeScript プログラム変換
azrsh
PRO
4
610
OpenNext + Hono on Cloudflare でイマドキWeb開発スタックを実現する
rokuosan
0
110
Interface vs Types ~型推論が過多推論~
hirokiomote
1
220
クラシルリワードにおける iOSアプリ開発の取り組み
funzin
1
790
漸進。
ssssota
0
540
Featured
See All Featured
Bash Introduction
62gerente
614
210k
Documentation Writing (for coders)
carmenintech
71
4.8k
Building an army of robots
kneath
306
45k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
The Invisible Side of Design
smashingmag
299
50k
Into the Great Unknown - MozCon
thekraken
39
1.8k
We Have a Design System, Now What?
morganepeng
52
7.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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