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
83
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
65
Open Source e Developer Experience
afonsopacifer
1
90
Conhecendo a área de Developer Experience (DevEx)
afonsopacifer
0
76
Do Zero ao Sênior Apenas com Projetos Open Source
afonsopacifer
1
80
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
afonsopacifer
0
81
O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5.
afonsopacifer
0
190
HTML 5.3: O que existe além de a11y e SEO?
afonsopacifer
0
180
State of JS 2022
afonsopacifer
0
290
Welcome CSS LV5
afonsopacifer
0
230
Other Decks in Programming
See All in Programming
ドメイン駆動設計のエッセンス
masuda220
PRO
7
1.5k
Go言語はstack overflowの夢を見るか?
logica0419
0
610
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
120
Introduce Hono CLI
yusukebe
6
3.1k
Ktorで簡単AIアプリケーション
tsukakei
0
110
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
110
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.6k
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
1.6k
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.8k
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
130
社会人になっても趣味開発を続けたい! / traPavilion
mazrean
1
100
マンガアプリViewerの大画面対応を考える
kk__777
0
280
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
697
190k
Designing for humans not robots
tammielis
254
26k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Agile that works and the tools we love
rasmusluckow
331
21k
The Language of Interfaces
destraynor
162
25k
Into the Great Unknown - MozCon
thekraken
40
2.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
640
Code Reviewing Like a Champion
maltzj
526
40k
Automating Front-end Workflow
addyosmani
1371
200k
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