Comenzamos un tema importante en React, ya que en esta librería realizamos un desarrollo basado en componentes. Básicamente quiere decir que, mediante anidación de componentes podremos crear aplicaciones completas de una manera modular, de fácil mantenimiento a pesar de poder ser complejas.

Como ya hemos comentado anteriormente sobre las bondades del desarrollo basado en componentes, vamos a abordar más técnicamente este apartado, observando algunas cosas interesantes sobre cómo debemos desarrollar componentes mediante la alternativa más clásica.

Los componentes se definen de diversas maneras. Lo ideal es que encontremos la que más se adapta a nuestros gustos o necesidades. Veremos en esta ocasión un método llamado createClass(), que es el más tradicional a la hora de construir componentes, y que nos permite empezar sin la necesidad de crear un entorno de desarrollo complejo para producir nuestras aplicaciones.

Crear un componente con createClass()

Comencemos creando un componente por medio de un método que pertenece al objeto React, llamado createClass(). No es la manera más novedosa de crear componentes pero sí la más tradicional. Luego veremos cómo crear los componentes con clases de verdad, de las que nos permite realizar Javascript con ES6, pero createClass() es interesante de ver por dos motivos.

1. Porque nos permite crear componentes sin necesidad de crear un entorno de desarrollo complicado.
2. Porque hay muchos tutoriales más antiguos que éste donde podrás encontrar código como el que te vamos a proponer ahora. Así te será más fácil entender otras posibles referencias de estudio.

En el código que encuentras a continuación observarás que para crear un componente usamos React.createClass(), enviando como parámetro la configuración del componente, indicada por medio de un literal de objeto Javascript.

var MiComponente = React.createClass({
  render: function() {
    return (
      <div>
        <h1>componente con createClass()</h1>
        <p>Este componente React lo creo como simple prueba. Lo hago con CreateClass porque quiero centrarme en ES5</p>
      </div>
    );
  }
});

Dentro del objeto de configuración enviado colocamos todas las cosas que debería tener nuestro componente. De momento observarás que le hemos pasado único método: render(), que es lo mínimo que debería tener todo componente básico.

El método render() contiene el código que debe usarse para representar el componente en la página. Como estamos dentro de React podemos usar la sintaxis JSX.

Como render() solamente sirve para devolver código que representar en la vista, lo único que encontramos es un return. Ya dentro del return estará el código JSX que construye la vista a usar para la representación del componente.

Usar un componente

Un componente que hemos creado mediante createClass() no produce ninguna salida. Tendremos que usar el componente para que realmente podamos verlo en funcionamiento en la página. Esta parte requiere de la otra pieza de React que necesitamos para funcionar: React-DOM.

En este caso, como contenido a representar a React-DOM, le indicamos el código del componente que acabamos de crear. Recuerda que como segundo parámetro tenemos que indicar un objeto del DOM donde anclar la visualización del componente.

ReactDOM.render(<MiComponente />, anclaje);

Una de las posibilidades de desarrollar con componentes es que, una vez definido el componente, lo podemos usar varias veces en el código de nuestra aplicación. Para ello simplemente colocamos varias veces su etiqueta. Su contenido entonces se renderizaría en cada sitio donde lo estamos usando.

Sin embargo, esto así no te funcionará:

ReactDOM.render(<MiComponente /><MiComponente />, anclaje);

El contenido del método render() no es posible escribirlo con un número de etiquetas hermanas. Si quieres usar cualquier número de veces ese componente tendrás que envolverlo en una etiqueta cualquiera. Esto es porque JSX es como si produjera un return por cada etiqueta que tiene y no es posible que una función devuelva dos return diferentes. La envoltura nos permite que solo se devuelva una única salida, aunque luego esa etiqueta pueda tener hijos, nietos, etc. en cualquier estructura de árbol.

Ahora con el siguiente código sí obtendremos resultados positivos.

ReactDOM.render(
  <div>
    <MiComponente />
    <MiComponente />
  </div>,
  anclaje
);

Observarás como hemos colocado unos saltos de línea en el código, simplemente para que se pueda leer mejor por el ojo humano. Estos saltos de línea son perfectamente válidos y dulcifican la sintaxis de JSX, a la vez que producen un código más mantenible y similar al HTML.

Ejemplo completo componente react con createClass()

El ejemplo completo de este ejercicio lo tienes a continuación.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test React desde una página en blanco</title>
</head>
<body>
  <div id="anclaje"></div>


  <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
  <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
  <script type="text/babel">
  var MiComponente = React.createClass({
    render: function() {
      return (
        <div>
          <h1>componente con createClass()</h1>
          <p>Este componente React lo creo como simple prueba. Lo hago con CreateClass porque quiero centrarme en ES5</p>
        </div>
      );
    }
  });


  ReactDOM.render(
    <div>
      <MiComponente />
      <MiComponente />
    </div>,
    anclaje
  );


  </script>
</body>
</html>

Ese código lo puedes ejecutar tal cual, copiando y pegando en cualquier fichero con extensión .html y luego abriéndolo en tu navegador. No necesita de nada más para funcionar, salvo que tengas conexión a Internet para que se puedan cargar los códigos de los scripts cargados desde el CDN de React.

De momento no hay mucho más que agregar, solo que permanezcas atento a futuros artículos donde estaremos explicando otros mecanismos interesantes que nos permiten crear componentes con clases ES6.