React para Todos

React para Todos

11d2474c8637940299cecf8661a46687?s=128

Matheus Calegaro

January 17, 2019
Tweet

Transcript

  1. 4.
  2. 5.

    Exemplo de um componente import React, { Component } from

    'react' export default class Hello extends Component { render() { return ( <div> <h1>Hello, World!</h1> </div> ) } }
  3. 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.
  4. 8.
  5. 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> ) } }
  6. 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> ) } }
  7. 14.
  8. 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!
  9. 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> ) } }