> Manuales > Manual de React

Cómo crear componentes ReactJS con el método más tradicional, el método createClass() del objeto React.

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.

Nota: Este artículo es interesante porque createClass() es una manera bastante tradicional de crear componentes React. Hoy, dado que todos los navegadores modernos aceptan programación con Javascript ES6, no es tan relevante. Sin embargo, sigue siendo importante que conozcas este mecanismo, ya que seguramente lo encontrarás en tutoriales y código heredado de proyectos antiguos. Por tanto, te vendrá bien conocer los detalles de la creación de componentes con createClass. En futuros artículos estudiaremos alternativas que a nuestro juicio son más recomendables, basicamente la creación de componentes React con clases de ES6.

Actualización: Es importante aclarar que en la versión más nueva de React han cambiado la locaclización del método createClass(). El código de este ejercicio funciona, porque traemos React desde un CDN en la versión 15, pero en la versión 16 quitaron ese método del núcleo de React. Es todavía posible crear componentes con createClass(), pero hay unas pequeñas diferencias para acceder a esa funcionalidad. Lo puedes ver resumido en el artículo React Without ES6 de la documentación de React. De todos modos, como se ha mencionado, la manera recomendada actualmente para crear componentes en React es a partir de clases ES6, por lo que quizás sería más útil ir directamente a ese artículo para continuar con el manual.

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.
Nota: Este modo de desarrollo haría continuación al artículo Comenzar con React en un entorno vacío. Sería interesante echarle un vistazo a ese artículo para entender algunas cosas que ahora no vamos a explicar de nuevo.

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.

Nota: Volvemos a referirnos al artículo de hola mundo en React desde un archivo en blanco y entorno vacío, donde explicamos conceptos como React-DOM y el modo de usar estas piezas de React.

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.

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online Escu...

Manual