¿Has escuchado alguna vez hablar de ReactJS? ¿Estás interesado en aprender más sobre esta popular librería? Si es así, entonces estás en el lugar indicado, pues hoy comenzaremos con nuestro primer tutorial de ReactJS. Primeramente daremos una pequeña introducción sobre qué es exactamente ReactJS y luego sí, nos pondremos manos a la obra a ver no solamente como funciona y por qué es tan popular sino también como se utiliza.
¿Qué es ReactJS?
ReactJS es una librería frontend de código abierto desarrollada por Facebook. Esta librería, se caracteriza por ser muy fácil de aprender y sumariamente eficiente. Actualmente es una de hecho una de las más populares, con además una comunidad muy grande que la apoya. Y no solamente eso, sino que también hay empresas muy grandes que la utilizan, como por ejemplo Instagram, Facebook, Dropbox y muchas más.
Cabe destacar que en muchos casos escucharas hablar de él como un Framework, pero es una definición incorrecta, pues como bien Facebook lo indica, es una librería, no un Framework como tal.
¿Para qué sirve?
Esta librería nos ayuda a crear interfaces de usuario y aplicaciones javascript re-utilizables. Comportándose así como la «V» en lo que conocemos como el modelo MVC (Modelo, Vista y Controlador). Por lo cual, al estar centrada en lo que es la visualización de nuestra web, nos ayudará a manipular lo que es nuestro DOM de una forma más fácil, eficiente y rápida.
Esta librería incluso puede ser utilizada con Angular JS, ya que como bien comentamos, no es un Framework. Básicamente ReactJS hará todo lo relacionado a las vistas y Angular (o bien el framework MVC que estés utilizando) se encargará de lo demás.
¿Por qué utilizarlo?
La verdad es que hay muchos motivos por los cuales utilizar ReactJS. Algunos de ellos, son por ejemplo el hecho de que es realmente eficiente en su trabajo, tiene una gran comunidad por detrás y por supuesto, fue desarrollado por una empresa realmente grande y poderosa, que por sobretodo lo utiliza.
Pero aquí les dejamos algunas ventajas más detalladas:
[wp-svg-icons icon=»smiley» wrap=»i»] Experiencia de Usuario
ReactJS utiliza algo llamado Virtual DOM, que aumenta la performance de las aplicaciones debido a que es mucho más rápido y potente que el DOM regular.
[wp-svg-icons icon=»tab» wrap=»i»] Cliente y Servidor
Algo muy interesante también sobre ReactJS, es que puede ser utilizado tanto del lado del servidor como del lado del cliente.
[wp-svg-icons icon=»tree» wrap=»i»] Mejor Estructura
El hecho de poder reutilizar componentes nos ayuda a mantener una mejor estructura de nuestro proyecto, lo cual no solo ayuda en cuanto a performance, sino que también es un plus para los desarrolladores.
[wp-svg-icons icon=»thumbs-up» wrap=»i»] Compatibilidad con Frameworks
Como comentábamos anteriormente, al ser una librería, ReactJS puede ser utilizado con otros Frameworks, así como también incluso aquellos basados en Javascript.
[wp-svg-icons icon=»file-2″ wrap=»i»] Utiliza JSX
JSX es un pseudolenguaje utilizado por ReactJS, que nos hace la vida mil veces más fácil. Lo que nos permite básicamente JSX, es escribir nuestro HTML directamente dentro de nuestro Javascript, pero de una manera mucho más elegante y fácil, más parecida al convencional HTML. Lo que sí debemos tener en cuenta es que al no ser solamente Javascript, no lo podemos utilizar directamente, sino que es necesario compilarlo y convertirlo al convencional Javascript que sí puede ser interpretado por el navegador.
Para ello, tenemos dos opciones, utilizar JSXTransformer o bien Babel. Te recomendamos sin dudas este último, pues en realidad JSXTransformer ya fue deprecado por Facebook. Nosotros, en el tutorial de hoy, estaremos utilizando babel cargado vía javascript, debido a que simplemente estaremos creando un «Hola Mundo«.
Ahora que ya sabemos un poco más de que se trata ReactJS, comencemos a dar nuestros primeros pasos utilizándolo. Cabe destacar que para ello necesitarás saber al menos lo básico en cuanto a HTML y Javascript.
Instalación de la librería ReactJS
Lo primero que debemos hacer para comenzar a trabajar con ReactJS es bajarnos la librería, o bien utilizarla como CDN. Para ello, debemos acceder a la Documentación de React JS y allí seleccionar la opción que te quede más cómoda. En nuestro caso, debido a que hoy haremos simplemente una introducción estaremos utilizando React JS a través del CDN.
Veamos algo bien sencillo, que es con lo que la mayoría hemos comenzado a aprender un lenguaje un «Hola Mundo» con ReactJS.
Pasos que vamos a realizar
- Primero debemos crear un index.html con el esqueleto básico de HTML de siempre.
- Luego a eso, debemos agregarle las librerías de ReactJS y babel, que estaremos utilizando el día de hoy.
- Luego de ello, crearemos un simple «div», con un id cualquiera, que será en el cual estaremos mostrando nuestro «Hola Mundo«.
- Y por último, escribiremos el script, que nos colocará el texto allí, el código sería el siguiente:
ReactDOM.render(
<h1>Hola, Mundo!<h1>
, document.getElementById('root') );
Y así, con algo tan simple, podremos crear nuestro primer «Hola Mundo» con ReactJS. Como vemos, tendremos algunos puntos importantes a recordar. Por ejemplo, debemos agregar las librerías de React y Babel o JSXTransformer ( No recomendado, ya que como hemos comentado está deprecada, recuerda que lo mejor es utilizar Babel, tecnología de la que hablaremos más adelante ).
Luego, de esto, ya podremos comenzar a escribir nuestro código. Como podremos ver aquí, en este caso, para poder renderizar HTML en un div de nuestro DOM, llamamos a ReactDOM.render, y le indicamos allí, como primer parámetro el HTML a renderizar, escrito exactamente igual que siempre y luego como segundo parámetro el elemento en el cual irá.
En general, el ejercicio completo nos quedaría de la siguiente forma:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hola Mundo</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hola, Mundo!</h1>,
document.getElementById('test')
);
</script>
</body>
</html>
Conclusión
Como hemos visto en nuestro primer Tutorial de ReactJS, hay muchas ventajas que sin dudas nos llevan a inclinarnos por él. Además, si bien en el ejercicio de hoy podríamos llegar a decir que no hay mucha diferencia entre la forma en la que hemos renderizado un elemento con ReactJS y como lo haríamos con Javascript nativo, más adelante veremos que realmente vale la pena aprenderlo.
Y sin lugar a dudas, en cuanto a rendimiento y experiencia de usuario se trata, es una de las mejores opciones hoy día.
