Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Recriando o React do Zero em 10 minutos

Recriando o React do Zero em 10 minutos

Front in Sampa 2023

Afonso Pacifer

July 29, 2023
Tweet

More Decks by Afonso Pacifer

Other Decks in Programming

Transcript

  1. index.js import React . from “react" import ReactDom . from

    “react-dom" Inst al l $ npm install react $ npm install react-dom
  2. .component( ) JS const Element = component( 'h1', { id:

    ‘sampa' }, 'Hello' ); OBJ { type: 'h1', props: { id: ‘samba' }, children: [‘Hello'] }
  3. 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/>
  4. const Element = ( <div> <h1>Hello, world!</h1> </div> ); const

    HelloWorld = () => ( <div> <Element/> </div> ); HelloWorld.js JSX
  5. fronti n .j s fronti n .j s github.com/afonsopacifer/frontinjs $

    npm install frontinjs Functional and stateless component library
  6. 27 "Não se limite a ser apenas um(a) Dev React,

    seja um(a) Dev Front-End” - Afonso Pacifer