Continuando con nuestro tutorial de ReactJs, y ahora que ya tenemos el setup de nuestro proyecto realizado, ya podemos comenzar a ver diferentes ejemplos de como utilizamos esta librería más a fondo y de diferentes formas. Veamos entonces, como utilizar estos famosos componentes atados a funciones, como encapsularlos adecuadamente y qué podemos exactamente hacer con ellos.
Ejemplos de uso de la librería ReactJS
Cómo renderizar elementos dentro de nuestro HTML
Anteriormente, como primer ejemplo, habíamos visto como añadir elementos dentro de otros elementos ya presentes en nuestro HTML.
Veamos un ejemplo para refrescar nuestra memoria, además ya nos servirá para los ejemplos más avanzados que veremos al final de este tutorial. A tener en cuenta que estaremos modificando el día de hoy, solamente nuestro archivo Index.js y que por ahora, para evitar conflictos de nombre de variables, lo mejor es que quitemos el import de nuestro App.js el cual deberías de tener si seguiste correctamente el Tutorial de ReactJS parte 2.
Lo que habíamos aprendido anteriormente:
Si por ejemplo contamos con un div, con id «container«:
<div id="container"></div>
Podemos de la siguiente forma, incluir un elemento dentro de él.
const elemento = <h1>Hola Mundo</h1>
ReactDOM.render(
element,
document.getElementById('container')
);
Cómo actualizar elementos dentro de nuestro HTML
Ahora, ¿qué sucede si deseamos actualizar dicho elemento? Para ello debemos en realidad crear un nuevo elemento, y pasarlo nuevamente a «ReactDOM.render«, y allí en el nuevo elemento, colocar los datos actualizados. Con ReactJS, no es posible actualizar elementos en sí, una vez creados, no podrás cambiar sus atributos o hijos. Aunque si podrás crear uno nuevo, que suplantará al viejo.
Veamos un ejemplo:
const element = (
<div>
<h1>Hola Mundo!!</h1>
</div>
);
ReactDOM.render(
element,
document.getElementById('container')
);
En este caso, con el Hola Mundo en React JS comparará los elementos y solamente actualizará aquellos que hayan cambiado, lo demás lo dejará igual.
Otro ejemplo interesante, y en el que quizás veremos más detalladamente el ejemplo, es realizando un pequeño «reloj«. Básicamente crearemos una pequeña función que nos muestre la hora, y con un setInterval, la actualizaremos cada cierto tiempo, para poder ir viendo como van cambiando los segundos, minutos y horas.
Para ello, en nuestro index, colocamos lo siguiente:
function reloj() {
const element = (
<h1>Son las {new Date().toLocaleTimeString()}</h1>
);
ReactDOM.render(
element,
document.getElementById('container')
);
}
setInterval(reloj, 1000);
Como vemos con esta función, la hora que veremos irá cambiando «en tiempo real«. Pero en caso de que hayan otros componentes o bien mensajes en nuestro HTML, lo demás quedará intacto. Eso lo podrán ver más a detalle si chequean en la consola de des-arrolladores de Chrome por ejemplo, o bien del navegador que estén utilizando.
Creando componentes desde ReactJS
Lo último que habíamos visto en nuestro tutorial, era como crear componentes.
Veamos un poco más sobre ello:
Por ejemplo, un componente muy sencillo, sería el de decirle hola a un nombre que sea pasado por parámetros.
function Saludar(props) {
return <h1>Hola {props.name} !</h1>;
}
const element = <Saludar name="Guiadev" />;
ReactDOM.render(
element,
document.getElementById('container')
);
En este ejemplo veremos algo muy sencillo. Pero lo interesante de este componente, es que será re-utilizable y cambiará según el nombre que le pasemos por parámetros. Es decir, que de ahora en más, no tendremos que estar copiando y pegando código, sino que simplemente con llamar la función e indicarle la nueva persona a saludar, éste será capaz de hacerlo.
Oto punto importante, es que también será re-utilizable dentro de otros componentes. Es decir, los componentes podrán, dentro de ellos, tener otros componentes, lo cual nos da un sin fin de posibilidades y sin dudas nos ayuda a mantener nuestro código bien organizado.
Digamos por ejemplo que contamos con una función Tareas, en las cuales le vamos pasando la tarea a realizar y otra que las lista.
Componentes dentro de Componentes:
function Tareas(props) {
return <li>Debo comprar {props.name} !</li>;
}
function Listar() {
return (
<ul>
<Tareas name="Pan" />
<Tareas name="Leche" />
<Tareas name="Harina" />
</ul>
);
}
ReactDOM.render(
<Listar />,
document.getElementById('container')
);
El ejemplo nos quedaría de la siguiente forma:
Un punto importante a tener en cuenta también, es que debemos encapsular bien nuestros componentes, así los podemos hacer reutilizables. Esto igualmente es casi como en cualquier otro lenguaje, cuanto más encapsulemos las cosas, obviamente sin pasar a lo absurdo, más organizado nuestro código es, más legible y re-utilizable.
Es decir, por ejemplo con nuestra función anterior del reloj. Podríamos en realidad, crear una simplemente para el reloj y otro componente que coloque el mensaje, así nos estamos asegurando de que el componente que nos muestra y actualiza el reloj es independiente y puede ser utilizado en cualquier otro lugar que lo necesitemos.
Conclusión
Como vemos, con ReactJS obtenemos muchas nuevas features interesantes. Además, muchas de estas cosas si bien no es que no las podamos hacer con Javascript/jQuery, tendríamos que implementarlas nosotros mismos. El hecho de contar con una librería que lo haga por si sola y que además es muy fácil de implementar (y no olvidemos que tiene una comunidad muy grande de des-arrolladores por detrás), es algo realmente grandioso.
Especialmente para aquel tipo de aplicaciones en los cuales partes de la web van cambiando constantemente y no queremos que el usuario tenga que estar esperando que TODA la página recargue, cuando simplemente le íbamos a mostrar un mensaje nuevo o algo en específico cambió su contenido.
Con ReactJS, sin lugar a dudas obtenemos una mejora en performance y por sobre todo en cómo el usuario percibe nuestra web. Recordemos que no hay cosa que le moleste más a un usuario, que un sitio lento o tener que estar esperando por cosas más de necesario.