Los componentes React permiten dividir la interfaz de usuario en piezas separadas que pueden reutilizarse y manejarse de forma independiente.

Un componente React toma una entrada opcional y devuelve un elemento React que se renderiza en la pantalla.

Un componente React puede ser "stateful" o "stateless". Los componentes "con estado" son del tipo clase, mientras que los componentes "sin estado" son del tipo función.

En React, tenemos principalmente dos tipos de componentes:

Componente con estado

En un componente, el estado son los datos que importamos (normalmente para mostrarlos al usuario) y que están sujetos a cambios.

Podría cambiar porque la base de datos de la que estamos obteniendo puede ser actualizada.

import React from 'react';

// un ejemplo de componente de tipo de clase

class ExampleComponent extends React.Component {

        constructor(props) {

            super(props);

            this.state = {

                heading: "Esto es un ejemplo de componente de tipo de clase"

            }

        }

        render() {

            return ( 

                <div>

                 <h1 > {this.props.welcomeMsg} </h1>

                  <h2 > { this.state.heading} < /h2>

                  </div>);

 }

 }

                    
 export default class App extends React.Component {

  render() {

    const welcomeMsg="Welcome to Educative!";

    return (

      <div>

       <ExampleComponent welcomeMsg={welcomeMsg}/>

       </div>

     );

   }

 } 

Típicamente también tendríamos un componentDidMount() que tomaría nuestros datos de una base de datos.

Pero el ejemplo anterior debería darte una idea básica: tenemos estado, y podemos renderizar cosas desde el estado.

Componentes con y sin estado

Los componentes con y sin estado tienen muchos nombres diferentes.
También se les conoce como:

• Componentes inteligentes y componentes tontos

La diferencia literal es que uno tiene estado y el otro no. Eso significa que los componentes con estado están haciendo un seguimiento de los datos cambiantes, mientras que los componentes sin estado imprimen lo que se les da a través de props, o siempre renderizan lo mismo.

Componente con estado:

class Main extends Component {

 constructor() {

   super()

   this.state = {

     books: [ ]

   }

 }

 render() {

   return <BooksList books={this.state.books} />;



 }

}

Componente sin estado:

const BooksList = ({books}) => {

 return (

    <ul>

     {books.map(book => {

       return <li>book</li>

        })}
   </ul>
 )
}

Observa que el componente sin estado está escrito como una función. 

Siempre debes intentar que tus componentes sean tan simples y sin estado como sea posible, para que los diferentes componentes puedan ser reutilizados como piezas de Lego, incluso si no tienes planes inmediatos de reutilizar un componente.

¿Cuándo debo hacer un componente con o sin estado?

Es probable que no sepas exactamente cómo será un componente en cuanto empieces a escribir, lo irás descubriendo sobre la marcha, siguiendo algunas pautas. Aquí tienes algunas:

1. Escribe o visualiza tu sitio web como si fuera un solo componente. Ocupado, ¿verdad? A partir de ahí, divídelo en componentes más pequeños.
2. Necesitarás "estado" en algún lugar cuando la información cambie dinámicamente. Como por ejemplo, las canciones favoritas actuales de un usuario o sus mejores puntuaciones. Intenta que un componente padre guarde toda la información y la transmita a sus componentes hijos sin estado.

class Parent extends Component {

  constructor() {

    super()

    this.state = {

      books: [],

      favoriteAuthors: []

    }

  }

  render() {

    return (

      <div>

        <Books books={this.state.books} />

        <FavoriteAuthors favoriteAuthors={this.state.favoriteAuthors} />

        </div>
    )
  }
}

¿No se ve muy bien? Tener un componente padre que pasa datos a sus hijos también asegura que, si hay alguna depuración necesaria con respecto a la gestión del estado, podemos ir al componente padre para ver qué pasa, en lugar de comprobar el estado en cada componente hijo.

De lo único que tienen que preocuparse los componentes hijos es de recibir correctamente la información como props.

Así que los componentes con estado pueden variar dependiendo de la información que reciban.

La diferencia es que un componente con estado hace un seguimiento de la información por sí mismo, en lugar de simplemente tomarla a través de props y emitirla.

Si la información es completamente estática y se sabe que nunca va a cambiar, tenemos un componente muy "presentacional".

const Rules = () => {

  return (

     <div>

       <p>The rules are simple and unchanging:</p>

       <ol>

         <li>You don’t talk about the rules.</li>

         <li>You must follow the first rule.</li>

       </ol>

     </div>
  )
}

Este componente sin estado ni siquiera acepta props. Siempre es agradable cuando esto sucede, pero por lo general se debe esperar tener componentes hijos listos para mostrar la entrada a través de props.

Props

Los props son una entrada opcional, y pueden utilizarse para enviar datos al componente. Son propiedades inmutables, por lo que son de sólo lectura. Esto también las hace útiles cuando se quieren mostrar valores fijos.

Ciclo de vida

Cada componente tiene "métodos de ciclo de vida". Estos especifican el comportamiento del componente cuando pasa por una fase de su ciclo de vida.

Algunos ejemplos de diferentes fases podrían ser: cuando el componente está a punto de renderizarse en la pantalla, cuando se ha renderizado en la pantalla, o cuando se actualiza/modifica en respuesta a una petición.

Por ejemplo, componentWillMount se ejecuta justo antes de que el componente React esté a punto de montarse en el DOM y componentDidMount se ejecuta después de que el componente se monte en el DOM.

Aprende React

Academia Web cuenta con un curso completo sobre React. En el cual aprenderás todos los fundamentos necesarios para empezar a usar React en tus proyectos. ¿Qué esperas? ¡Entra ya!