ReactJS - Componentes

Neste capítulo, aprenderemos como combinar componentes para tornar o aplicativo mais fácil de manter. Esta abordagem permite atualizar e alterar seus componentes sem afetar o resto da página.

Exemplo sem estado

Nosso primeiro componente no exemplo a seguir é App. Este componente é proprietário deHeader e Content. Estamos criandoHeader e Content separadamente e apenas adicionando-o dentro da árvore JSX em nosso Appcomponente. SomenteApp componente precisa ser exportado.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <Header/>
            <Content/>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>Content</h2>
            <p>The content text!!!</p>
         </div>
      );
   }
}
export default App;

Para ser capaz de processar isso na página, precisamos importá-lo em main.js arquivo e chamada reactDOM.render(). Já fizemos isso ao definir o ambiente.

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

O código acima irá gerar o seguinte resultado.

Exemplo com estado

Neste exemplo, definiremos o estado do componente proprietário (App) oHeadercomponente é adicionado como no último exemplo, pois não precisa de nenhum estado. Em vez de tag de conteúdo, estamos criandotable e tbody elementos, onde vamos inserir dinamicamente TableRow para cada objeto do data array.

Pode-se ver que estamos usando a sintaxe de seta EcmaScript 2015 (=>), que parece muito mais limpa do que a antiga sintaxe JavaScript. Isso nos ajudará a criar nossos elementos com menos linhas de código. É especialmente útil quando precisamos criar uma lista com muitos itens.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: 
         [
            {
               "id":1,
               "name":"Foo",
               "age":"20"
            },
            {
               "id":2,
               "name":"Bar",
               "age":"30"
            },
            {
               "id":3,
               "name":"Baz",
               "age":"40"
            }
         ]
      }
   }
   render() {
      return (
         <div>
            <Header/>
            <table>
               <tbody>
                  {this.state.data.map((person, i) => <TableRow key = {i} 
                     data = {person} />)}
               </tbody>
            </table>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}
class TableRow extends React.Component {
   render() {
      return (
         <tr>
            <td>{this.props.data.id}</td>
            <td>{this.props.data.name}</td>
            <td>{this.props.data.age}</td>
         </tr>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Note - Observe que estamos usando key = {i} inside map()função. Isso ajudará o React a atualizar apenas os elementos necessários, em vez de renderizar novamente a lista inteira quando algo mudar. É um grande aumento de desempenho para um grande número de elementos criados dinamicamente.