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
36
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
6
Open Source e Developer Experience
afonsopacifer
0
42
Conhecendo a área de Developer Experience (DevEx)
afonsopacifer
0
14
Do Zero ao Sênior Apenas com Projetos Open Source
afonsopacifer
1
22
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
afonsopacifer
0
25
O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5.
afonsopacifer
0
120
HTML 5.3: O que existe além de a11y e SEO?
afonsopacifer
0
90
State of JS 2022
afonsopacifer
0
210
Welcome CSS LV5
afonsopacifer
0
180
Other Decks in Programming
See All in Programming
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
1
300
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
0
160
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
240
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
270
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism- An Example
philipschwarz
PRO
0
170
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
4
1.6k
外部システム連携先が10を超えるシステムでのアーキテクチャ設計・実装事例
kiwasaki
1
230
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
4
4.3k
EventSourcingの理想と現実
wenas
6
2.1k
CSC305 Lecture 13
javiergs
PRO
0
130
のびしろを広げる巻き込まれ力:偶然を活かすキャリアの作り方/oso2024
takahashiikki
1
410
offers_20241022_imakiire.pdf
imakurusu
2
360
Featured
See All Featured
For a Future-Friendly Web
brad_frost
175
9.4k
GitHub's CSS Performance
jonrohan
1030
460k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Building Adaptive Systems
keathley
38
2.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
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