ReactJS - Componentes

En este capítulo, aprenderemos cómo combinar componentes para facilitar el mantenimiento de la aplicación. Este enfoque permite actualizar y cambiar sus componentes sin afectar el resto de la página.

Ejemplo sin estado

Nuestro primer componente en el siguiente ejemplo es App. Este componente es propietario deHeader y Content. Estamos creandoHeader y Content por separado y simplemente agregándolo dentro del árbol JSX en nuestro Appcomponente. SolamenteApp el componente necesita 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 poder representar esto en la página, necesitamos importarlo en main.js archivar y llamar reactDOM.render(). Ya hicimos esto mientras configuramos el entorno.

main.js

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

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

El código anterior generará el siguiente resultado.

Ejemplo con estado

En este ejemplo, estableceremos el estado del componente propietario (App). losHeaderEl componente simplemente se agrega como en el último ejemplo, ya que no necesita ningún estado. En lugar de etiqueta de contenido, estamos creandotable y tbody elementos, donde insertaremos dinámicamente TableRow para cada objeto del data formación.

Se puede ver que estamos usando la sintaxis de flecha de EcmaScript 2015 (=>) que se ve mucho más limpia que la antigua sintaxis de JavaScript. Esto nos ayudará a crear nuestros elementos con menos líneas de código. Es especialmente útil cuando necesitamos crear una lista con muchos elementos.

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 - Note que estamos usando key = {i} inside map()función. Esto ayudará a React a actualizar solo los elementos necesarios en lugar de volver a renderizar la lista completa cuando algo cambie. Es un gran impulso de rendimiento para una mayor cantidad de elementos creados dinámicamente.