Slide 1

Slide 1 text

afonsopacifer.github.io Recriando o React do Zero em 10 minutos 1 afonsopacifer.github.io

Slide 2

Slide 2 text

Afonso Pacifer @afonsopacifer afonsopacifer.github.io DevRel & Front-End Specialist 2

Slide 3

Slide 3 text

Como usar o React? Sem create react app ou vite!

Slide 4

Slide 4 text

index.js import React . from “react" import ReactDom . from “react-dom" Inst al l $ npm install react $ npm install react-dom

Slide 5

Slide 5 text

const Element = React.createElement( 'h1', { className: ‘sampa' }, 'Hello World' ); Comp on ent HelloWorld.js ?

Slide 6

Slide 6 text

const Element = React.createElement( … } ReactDOM.render( Element, document.getElementById(‘app’) );
Hello World index.js index.html Rend e

Slide 7

Slide 7 text

Por que usar?

Slide 8

Slide 8 text

Não toca no DOM

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Duas funções

Slide 12

Slide 12 text

.component( ) JS const Element = component( 'h1', { id: ‘sampa' }, 'Hello' ); OBJ { type: 'h1', props: { id: ‘samba' }, children: [‘Hello'] }

Slide 13

Slide 13 text

.render( ) JS render( OBJ, document.getElementById(‘app’) );

Hello

DOM API Hello

Slide 14

Slide 14 text

Exemplo

Slide 15

Slide 15 text

.map( )

Slide 16

Slide 16 text

Não toca no DOM?

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Virtual DOM

Slide 19

Slide 19 text

Virtual DOM DOM

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Developer Experience

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

const Element = (

Hello, world!

); const HelloWorld = () => (
); HelloWorld.js JSX

Slide 24

Slide 24 text

… 24

Slide 25

Slide 25 text

fronti n .j s fronti n .j s github.com/afonsopacifer/frontinjs $ npm install frontinjs Functional and stateless component library

Slide 26

Slide 26 text

fronti n .j s fronti n .j s github.com/afonsopacifer/frontinjs

Slide 27

Slide 27 text

27 "Não se limite a ser apenas um(a) Dev React, seja um(a) Dev Front-End” - Afonso Pacifer

Slide 28

Slide 28 text

@afonsopacifer Obrigado Front in Sampa afonsopacifer.github.io 28