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
78
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
57
Open Source e Developer Experience
afonsopacifer
1
80
Conhecendo a área de Developer Experience (DevEx)
afonsopacifer
0
66
Do Zero ao Sênior Apenas com Projetos Open Source
afonsopacifer
1
74
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
afonsopacifer
0
75
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
280
Welcome CSS LV5
afonsopacifer
0
220
Other Decks in Programming
See All in Programming
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
160
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
410
DatadogのArchived LogsをSnowflakeで高速に検索する方法(Archive Searchでオワコンにならないことを祈って) / How to search Datadog Archived Logs quickly with Snowflake (hoping Datadog Archive Search doesn’t make this obsolete)
civitaspo
0
100
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
35
11k
Flutterと Vibe Coding で個人開発!
hyshu
1
200
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
1
230
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
5
710
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
130
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
7.1k
Comparing decimals in Swift Testing
417_72ki
0
150
What's new in Adaptive Android development
fornewid
0
130
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
110
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
332
22k
GitHub's CSS Performance
jonrohan
1031
460k
Visualization
eitanlees
146
16k
The Language of Interfaces
destraynor
158
25k
Why Our Code Smells
bkeepers
PRO
337
57k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Raft: Consensus for Rubyists
vanstee
140
7k
Side Projects
sachag
455
43k
Adopting Sorbet at Scale
ufuk
77
9.5k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
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