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
15
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
O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5.
afonsopacifer
0
88
HTML 5.3: O que existe além de a11y e SEO?
afonsopacifer
0
74
State of JS 2022
afonsopacifer
0
170
Welcome CSS LV5
afonsopacifer
0
170
No pain no gain
afonsopacifer
0
140
A liberdade vem do Ether
afonsopacifer
0
36
Front-End 101: A resposta sobre “estudar a base”
afonsopacifer
4
540
PRPL pattern na prática com React
afonsopacifer
1
260
Style Strategies in Vue.js
afonsopacifer
2
130
Other Decks in Programming
See All in Programming
Fast JSX: Don't clone props object #28768
yossydev
1
130
"config" ってなんだ? / What is "config"?
okashoi
0
240
Milestoner
bkuhlmann
1
410
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
370
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
390
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
370
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
190
Java 22 Overview
kishida
1
190
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
Tailwind CSSを本気でカスタマイズする方法
fsubal
14
5.3k
Featured
See All Featured
Design by the Numbers
sachag
274
18k
Thoughts on Productivity
jonyablonski
58
3.8k
BBQ
matthewcrist
80
8.8k
A designer walks into a library…
pauljervisheath
200
23k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.9k
Ruby is Unlike a Banana
tanoku
96
10k
Happy Clients
brianwarren
92
6.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Rails Girls Zürich Keynote
gr2m
91
13k
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