Recriando o React do Zero em 10 minutos

Front in Sampa 2023

Transcript

1. afonsopacifer.github.io Recriando o React do Zero em 10 minutos 1 afonsopacifer.github.io
2. Afonso Pacifer @afonsopacifer afonsopacifer.github.io DevRel & Front-End Specialist 2
3. Como usar o React? Sem create react app ou vite!
4. index.js import React . from “react" import ReactDom . from “react-dom" Inst al l $ npm install react $ npm install react-dom
5. const Element = React.createElement( 'h1', { className: ‘sampa' }, 'Hello World' ); Comp on ent HelloWorld.js ?
6. const Element = React.createElement( … } ReactDOM.render( Element, document.getElementById(‘app’) ); <div id=”app”><div/> Hello World index.js index.html Rend e
7. Por que usar?
8. Não toca no DOM
11. Duas funções
12. .component( ) JS const Element = component( 'h1', { id: ‘sampa' }, 'Hello' ); OBJ { type: 'h1', props: { id: ‘samba' }, children: [‘Hello'] }
13. .render( ) JS render( OBJ, document.getElementById(‘app’) ); <h1 id=”sampa”> Hello <h1/> DOM API Hello
14. Exemplo
15. .map( )
16. Não toca no DOM?
17. 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/>
18. Virtual DOM
19. Virtual DOM DOM
21. Developer Experience
23. const Element = ( <div> <h1>Hello, world!</h1> </div> ); const HelloWorld = () => ( <div> <Element/> </div> ); HelloWorld.js JSX
24. … 24
25. fronti n .j s fronti n .j s github.com/afonsopacifer/frontinjs $ npm install frontinjs Functional and stateless component library
26. fronti n .j s fronti n .j s github.com/afonsopacifer/frontinjs
27. 27 "Não se limite a ser apenas um(a) Dev React, seja um(a) Dev Front-End” - Afonso Pacifer
28. @afonsopacifer Obrigado Front in Sampa afonsopacifer.github.io 28