Hace unas semanas tuve la oportunidad de ir a @coSfera a ver una charla de @javivelasco sobre ReactJS, y pude comprobar de primera mano que para la creación de web, reactJS es una alternativa a tener en cuenta.
La charla sobre ReactJS
Antes de nada, comentar que la charla ofrecida por Javier Velasco sobre ReactJS terminó de convencerme de que hay que usar nuevas tecnologías porque facilitan las cosas, si bien es cierto que hay que invertir tiempo en ampliar conocimientos. En concreto, además de presentar cúal es la filosofía de ReactJS, el tema de los estados, el renderizado web, y otras muchas cosas, al terminar la charla, Javi hizo una demostración en vivo usando una librería React Toolbox para crear un pequeño buscador de YouTube en el que no invirtió más de 15 minutos, poniendo en valor una herramienta tremendamente visual, rápida (bueno, cuando la conocer, claro está!) y práctica.
Ahora, es mi turno de poner en práctica lo aprendido en la charla, y amplicar esos conocimientos para usar ReactJS, que para los que no somos expertos en la parte front-end, disponemos de nuevas herramientas que hagan fácil esta tarea.
Por donde comenzar
Lo primero de todo es ir a ReactJS y descargarse la librería, o bien usar los CDN (que es lo que yo he hecho!).
React es una libreria para realizar interfaces de usuario.
React funciona mediante la creación de componentes, que se pueden reutilizar, y adherir a los elementos del DOM, o bien, crearlos vitualmente, si usas NodeJS. El funcionamiento interno no es tan simple, porque el renderizado depende del contenido, y sólo será “modificado” aquello que cambia. Se trata de que el “peaje” de actualizar el DOM sea más liviano. Además, no esperer bidireccionalidad, porque no la hay (aunque puede incluirse con los add-ons!).
Los principales motivos para comenzar a utilizar ReactJS son:
- Que se basa en componentes reutilizables
- La librería es bastante ligera, unos 140 Kb
- Es muy rápida
- Es sencilla de aprender (mucho más que otras!) y se integra perfectamente con jQuery, y otras librerias
- Tiene un DOM virtual
- Tiene un lenguaje JSX para crear los componentes como si fuera HTML, que luego es compilado a Javascript mediante JSXTransformer.js
Creo que con esta carta de presentación, bien merece la pena probar esta librería, y empezar a utilizarla en tus propios proyectos.
En caso de que necesites conocer más, tienes disponible la documentación oficial en https://facebook.github.io/react/docs/getting-started.html. Además, dispones de acceso a herramientas online de desarrollo con React en JSbin, tanto con JSX como sin él.
Mi primer ejemplo
Seguramente, no sea mi código más espectacular, pero no hay nada como empezar por el primer paso, con este HTML y un poco de Javascript para poner en marcha React:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Manejando Datos</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.5/jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
var PrimerComponente = React.createClass({
render: function() {
return (
<h2>Manejando datos ... y React</h2>
);
}
});
ReactDOM.render(<PrimerComponente />, document.getElementById('content'));
</script>
</body>
</html>
El código es bastante simple. En la parte del head hacemos referencia a las librerias React, y que son necesarias cargar dos: react y react-dom. La tercera libreria es JSXTransformer, que es la que permite traducir el código de react a javascript. Además, creamos un DIV donde se mostrará la acción.
Es importante incluir type=”text/jsx” en script para revelar que el contenido a incluir es JSX.
Para crear un componente, creamos una nueva clase de React.createClass y a continuación le añadimos las propiedades. Siempre debe existir un método render, que es el que dice qué se muestra el componente.
Para mostrar el componente en el DOM, necesitamos ejecutar el método render de ReactDOM, incluyendo el componente a incluir, con sus parámetros si los tuviera, y dónde será mostrado.
ReactJS me gusta
A pesar de que es sólo un pequeño ejemplo de cómo trabajar con ReactJS, tengo que admitir que me gusta y que dedicaré las próximas a conocer más detenidamente esta librería!
Happy coding!