Creación de componentes en React con createClass

Seguimos profundizando en el uso de la librería React, donde encontraremos diversas alternativas para crear componentes. Hoy, nos centraremos en la más tradicional: React.createClass().

Con React.createClass() podemos disfrutar de las ventajas del desarrollo basado en componentes, lo que nos permite crear aplicaciones avanzadas en las que tenemos diversos componentes que se usan unos a los otros para producir la funcionalidad deseada. Trabajar con este método es sencillo y con pocas líneas podremos tener componentes ya listos para usar, no solo en un proyecto, sino en cualquiera donde los necesitemos.

Una de sus ventajas es la inmediata puesta en marcha, ya que createClasss nos evita el uso de las clases puras de Javascript, que sólo tendríamos disponibles en el caso que hayamos configurado un entorno de trabajo con ES6.

Antes de ponernos a ello, te recomendamos consultar el blogpost Ejemplo práctico de React desde cero.

Definición de un componente

El método createClass de React nos sirve para crear un componente reutilizable. Es decir, una nueva etiqueta que podremos utilizar tantas veces como queramos o necesitemos. Para personalizar el componente debemos entregar a createClass un parámetro con un objeto de configuración. En ese objeto podemos incluir tantas cosas como necesitemos, que “darán vida” al componente y permitirán que al visualizarse en la página tenga un aspecto determinado.

Para nuestro ejemplo, de momento vamos a colocar un componente que todavía no tiene funcionalidad, sino un aspecto determinado. Es decir, a la hora de renderizarse mostrará un contenido en la página.

var MsgComponent = React.createClass({
render: function() {
return (
<p>
Esto es un mensaje <b>especial</b> en el artículo de React de <i>Arsys</i>
</p>
);
}
});

El componente que hemos creado se llama MsgComponent. Observa que la primera letra está en mayúscula, ya que es una clase. Es un requisito para que funcione.

El componente en sí, como habíamos dicho, tendrá solo una representación en pantalla. Ten en cuenta que en el objeto que enviamos a createClass estamos colocando solamente el método render, para indicar cómo se deberá representar en pantalla, al cual le pasamos el JSX necesario para definir su presentación.

Usar este componente

A la hora de usar el componente tendremos que colocar una etiqueta con su nombre. El nombre lo hemos definido por medio de la variable en la que hemos guardado el componente: MsgComponent, por lo que la etiqueta será <MsgComponent/>.

Para usarlo debemos apoyarnos en el método render de ReactDOM. Esto se explicó en el mencionado anterior artículo Ejemplo práctico de React desde cero.

ReactDOM.render(<MsgComponent/>, elementoparareact);

Observa que el componente tiene la primera letra en mayúscula, tal como se ha nombrado, insistimos que ésto es importante para que funcione todo correctamente.

El código completo para tu referencia lo tienes a continuación:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo básico de ReactJS con createClass</title>
</head>
<body>
<div id="elementoparareact"></div>
<script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.4.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 MsgComponent = React.createClass({
render: function() {
return (
<p>
Esto es un mensaje <b>especial</b> en el artículo de React de <i>Arsys</i>
</p>
);
}
});
ReactDOM.render(<MsgComponent/>, elementoparareact);
</script>
</body>
</html>
0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *