React para Todos

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
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.
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!)
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> ) } }