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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. Por que
   
   
   usar?
   

   View Slide

8. Não toca no DOM
   

   View Slide

9. View Slide

10. View Slide

11. Duas funções
    

    View Slide

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

    View Slide

13. .render( )
    JS
    render(
    
    
    OBJ,
    
    
    document.getElementById(‘app’)
    
    
    );
    Hello
    DOM API
    Hello
    

    View Slide

14. Exemplo
    

    View Slide

15. .map( )
    

    View Slide

16. Não toca no DOM?
    

    View Slide

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
    
    

    View Slide

18. Virtual DOM
    

    View Slide

19. Virtual DOM
    DOM
    

    View Slide

20. View Slide

21. Developer
    Experience
    

    View Slide

22. View Slide

23. const Element = (
    
    
    
    
    
    Hello, world!
    
    
    
    
    
    );
    
    
    const HelloWorld = () => (
    
    
    
    
    
    
    
    
    
    
    
    );
    HelloWorld.js
    JSX
    

    View Slide

24. …
    24
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide