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
21
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
Do Zero ao Sênior Apenas com Projetos Open Source
afonsopacifer
0
7
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
afonsopacifer
0
15
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
79
State of JS 2022
afonsopacifer
0
190
Welcome CSS LV5
afonsopacifer
0
180
No pain no gain
afonsopacifer
0
150
A liberdade vem do Ether
afonsopacifer
0
39
Front-End 101: A resposta sobre “estudar a base”
afonsopacifer
4
550
Other Decks in Programming
See All in Programming
Activities at Cairo Library
cairolibrary720
0
1.2k
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
小さな開発会社を作った理由
polidog
0
1.9k
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
わかりやすい正解を捨てて、コトに向き合う - スクラムフェス金沢2024 スポンサーセッション
yusukekokubo
0
170
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
入社1ヶ月でここまでやった!Findy Toolsインフラ支援の最適化
rvirus0817
6
1.4k
Exploring the Gradually Lost Technical Skills in the Cloud Native Era
hwchiu
2
3.9k
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
CSC307 Lecture 10
javiergs
PRO
0
310
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Agile that works and the tools we love
rasmusluckow
325
20k
Building Applications with DynamoDB
mza
89
5.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Code Review Best Practice
trishagee
58
16k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
Navigating Team Friction
lara
181
13k
Fireside Chat
paigeccino
25
2.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
Web development in the modern age
philhawksworth
203
10k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
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