React

React

1. 3 maneiras de criar componentes

   • Classe ES6
   • React.createClass
   • stateless functional components
   • Regras para decidir!!
     • Seu componentes vai acessar THIS?
       • Use Classe ES6
     • Seu componente necessita de um método de ciclo de vida?
     • Todos os demais casos
       • Use stateless functional components
         • Porque é muito mais performatico, pois pelo fato de você dizer ao React que não necessita manter uma instancia de ReactComponent, ele adota uma série de medidas performaticas

2. Componentes

   • ReactDOM.render
     • Essa é a principal função de todo componente React, todo componente deve possuir essa função, ela cria o componente como um novo nó no DOM e também instancia o componente em memórioa
       • Porém isso só será feito se você criou seu componente React com uma classe ES6, caso você tenha criado o componente com stateless functional, não será instanciado uma classe pois o componente é só uma função, isso é mais performático, pois não será necessário manter um vinculo entre o DOM e uma instancia em memória, em contra partida você não terá o this
   • Stateless Function
     • import React from 'react';
       • Importação do React nós não utilizamos nada dele ainda, porém na transpilação dele será utilizado a função do React
     • const App = () => ( <div> <h1>Meu Primeiro App React</h1> </div> );
       • É declarado uma constante, que recebe uma função que deve retornar o html do componente e pode conter um javascript ali também
     • export default App;
       • Tornar o componente exportável.
   • PROPS
     • Quando criamos um componente podemos acessar propriedades passadas na tag que chamou o componente, por exemplo o componente "Caderno" possui uma propriedade qtdPaginas, assim caso a pessoa chame <Caderno qtdPaginas="5"> esse valor 5 poderá ser acessado através de props.qtdPaginas dentro do componente Caderno