React

React

3 maneiras de criar componentes
1. Classe ES6
2. React.createClass
3. stateless functional components
4. Regras para decidir!!
  1. Seu componentes vai acessar THIS?
    1. Use Classe ES6
  2. Seu componente necessita de um método de ciclo de vida?
  3. Todos os demais casos
    1. Use stateless functional components
      1. 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
Componentes
1. ReactDOM.render
  1. 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
    1. 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
2. Stateless Function
  1. import React from 'react';
    1. 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
  2. const App = () => ( <div> <h1>Meu Primeiro App React</h1> </div> );
    1. É declarado uma constante, que recebe uma função que deve retornar o html do componente e pode conter um javascript ali também
  3. export default App;
    1. Tornar o componente exportável.
3. PROPS
  1. 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

Próximo

Descrição

Resumo de Recurso

Semelhante

	Criado por Adriano Oliveira mais de 7 anos atrás