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

React para Todos

React para Todos

11d2474c8637940299cecf8661a46687?s=128

Matheus Calegaro

January 17, 2019
Tweet

Transcript

  1. REACT PARA TODOS!

  2. Olá, me chamo Matheus Calegaro Dev @ Hit - B2W

    Digital RJ
  3. O que é React? Biblioteca para construção de interfaces baseadas

    em Componentes
  4. None
  5. Exemplo de um componente import React, { Component } from

    'react' export default class Hello extends Component { render() { return ( <div> <h1>Hello, World!</h1> </div> ) } }
  6. Conceitos Básicos Componente Virtual DOM Props State Lifecycle Methods

  7. Virtual DOM Representação do DOM real em um objeto JavaScript

    na memória; Computação das diferenças (diff) entre o DOM real e o VDOM; Aplicação de patch para atualizar o DOM real conforme o novo estado do VDOM.
  8. None
  9. Props Atributos especí cos de cada componente

  10. import React, { Component } from 'react' export default class

    SayHello extends Component { render() { const { name } = this.props return <h1>Hello, { name }</h1> } } import React, { Component } from 'react' import SayHello from './SayHello' export default class App extends Component { render() { return ( <div> <SayHello name="Matheus" /> </div> ) } }
  11. State Lugar onde os dados existem e se transformam ao

    longo do tempo
  12. import React, { Component } from 'react' export default class

    ExemploState extends Component { state = { user: { name: 'Matheus', email: 'matheus.calegaro@b2wdigital.com', isCool: true } } render() { const { user } = this.state return ( <ul> <li>{user.name}</li> <li>{user.email}</li> <li>{user.isCool ? 'You\'re cool :)' : 'Not cool :('}</li> </ul> ) } }
  13. Ciclo de Vida Um componenete "nasce", "cresce" e "morre" (assim

    como nós!)
  14. None
  15. Curti! Mas como faço para começar a escrever meus primeiros

    componentes? Х
  16. Node npm/yarn Estar em dia com o ES6/ESNext Create React

    App ( npm i -g create-react-app ) ou codesandbox.io Vontade de aprender!
  17. Code Time! ۫

  18. import React, { Component } from 'react' export default class

    Obrigado extends Component { render() { return ( <div> <h1>Muito obrigado! ȶ </h1> <p>https://github.com/mathcale/quinta-as-cinco</p> </div> ) } }