Cargando

Ir a contenido

X

 


Primeros pasos con React

En este tutorial daremos nuestros primeros pasos con React, veremos por qué se usa, las características más importantes del mismo, su obtención y un pequeño ejemplo de su uso.


Escrito por jul 14 2015 08:43


Las librerías de JavaScript que se encargan de la manipulación de las vistas y la forma en que hacen el despliegue de la información cada vez incluyen más funcionalidades que hacen que el desarrollo de aplicaciones sea cada vez más sencillo para el desarrollador y más agradables para los usuarios que las utilizan.

 

Entre estas librerías tenemos React, el cual es una librería de JavaScript de código libre enfocada principalmente en la creación de interfaces de usuarios para single-page applications o aplicaciones de una sola página la cual es usada por Facebook e Instagram para manejar todo lo que se refiere a las vistas, solventando el problema de grandes aplicaciones donde la data que se le muestra al usuario cambia de manera constante.

 

 

Características de React


Para solventar este problema que comentábamos React basa su filosofía en las siguientes características:

 

Simple
Esta característica expresa como nuestra aplicación debe lucir en un punto determinado y de que manera lo hace, y lo que hace React es que el mismo maneja de manera automática todos las actualizaciones en la interfaz del usuario cuando se hacen cambios fundamentales en la aplicación.

Declarativo
Cuando la información cambia en nuestra aplicación React realiza la función de refrescar nuestra página pero solo donde la información ha cambiado.

Construcción de componentes combinables
Cuando hablamos de React, principalmente hablamos de la construcción de componentes reutilizables, de hecho con esta librería lo que hacemos la mayoría de las veces es construir componentes y gracias a que son encapsulados, estos hacen que la reutilización de código, las pruebas y la separación de funcionalidades sea sumamente sencilla.

 

 

Obteniendo React


Ahora que ya sabemos en que consiste React y las características del mismo, vamos a obtener la última versión de la librería y realizar una implementación sencilla para mostrar el famoso Hola Mundo.

 

Para obtener la última versión nos descargamos un comprimido con la librería en el siguiente enlace. Luego de realizar la descarga, descomprimimos y colocamos el contenido dentro de una carpeta llamada Hola_React y dentro creamos un archivo llamado hola_react.html que contendrá el siguiente contenido:

<!DOCTYPE html>
<html>
  <head>
    <script src="react-0.13.3/build/react.js"></script>
    <script src="react-0.13.3/build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="ejemplo_react"></div>
    <script type="text/jsx">
	  React.render(
	    <h1>Hola, Mundo!</h1>,
	    document.getElementById('ejemplo_react')
	  );
    </script>
  </body>
</html>
Como vemos es un código bastante sencillo que nos permite realizar el renderizado de un texto en nuestra vista principal gracias a la inclusión de react.js. Adicionalmente utilizamos JSX que es sintaxis XML dentro de nuestro JavaScript para luego hacer la transformación en el navegador, lo cual lo podemos utilizar gracias a la implementación de la segunda librería llamada JSXTransformer.js

 

Además de esto podemos hacer nuestro código más legible y modular separando la lógica del mismo, esto lo podemos lograr haciendo dos archivos, para ello creamos uno llamado hola_react.js y colocamos el siguiente código:

	  React.render(
	    <h1>Hola, Mundo!</h1>,
	    document.getElementById('ejemplo_react')
	  );
Luego en nuestro HTML lo que hacemos es incluir nuestro archivo .js dentro de la etiqueta script y tendremos el mismo funcionamiento:
<!DOCTYPE html>
<html>
  <head>
    <script src="react-0.13.3/build/react.js"></script>
    <script src="react-0.13.3/build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="ejemplo_react"></div>
    <script type="text/jsx" src="hola_react.js">
    </script>
  </body>
</html>
Veamos entonces cuando ejecutamos nuestro ejemplo en el navegador la respuesta del mismo:

 

primeros-pasos-react.jpg

 

Como vemos la manipulación de la data fue bastante sencilla, sin embargo hay una forma mejor de implementar React, ya que de la forma que lo estamos realizando el código esta utilizando el transformador de JSX del navegador como veremos en el mensaje que recibimos por consola.

 

Este mensaje por consola nos da la solución a este pequeño warning, y es realizar una pre-compilación de nuestro código .js, para ello utilizaremos el gestor de paquetes de Node.js para esta tarea, por lo que si no tenemos este entorno instalado en nuestra PC vamos a página oficial y lo descargamos en el caso que estemos trabajando en Windows y en el caso que estemos trabajando en Linux podemos seguir los pasos de este tutorial.

 

 

Pre-compilando nuestro código


Para realizar esta tarea nos dirigimos a nuestra consola de Node.js y con la ayuda de npm instalamos la herramienta de React para la consola de comandos llamada react-tools para lo cual solo necesitamos ejecutar esta línea:
npm install –g react-tools
Ahora lo que hacemos es traducir nuestro código a JavaScript puro de la siguiente forma:
jsx --watch hola_react.js
Esto no solo traduce nuestro código sino que autogenera el archivo hola_react.js cada vez que se hace un cambio en nuestra aplicación, veamos la respuesta de la consola cuando ejecutamos este comando:

 

react.jpg

 

Por último modificamos nuestro HTML retirando la inclusión de la librería JSXTransformer.js ya que no la necesitamos y hacemos la inclusión de nuestro script de manera convencional, veamos:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello React!</title>
    <script src="react-0.13.3/build/react.js"></script>
    <!-- No necesitamos el JSX -->
  </head>
  <body>
    <div id="ejemplo_react"></div>
    <script src="hola_react.js"></script>
  </body>
</html>
Como mencionamos la ultima operación que realizamos por consola autogenera el archivo cada vez que hacemos un cambio en nuestra aplicación por lo cual si hemos realizados cambios la consola nos lo notificará de la siguiente manera:

 

react2.jpg

 

Como podemos apreciar tenemos dos notificaciones de que se realizaron cambios en el archivo, que fueron efectivamente aquellos que hicimos con respecto a retirar la librería y hacer la inclusión convencional de un archivo JavaScript.

 

Así finalizamos este tutorial, donde pudimos dar nuestros primeros pasos con React y su implementación en nuestras aplicaciones, esto para ayudarnos con la construcción de componentes para la visualización de data en nuestras vistas, comprobando que no solo es simple sino que nos provee de herramientas que harán nuestro desarrollo mucho más sencillo.



AYUDA A MEJORAR ESTE TUTORIAL!

¿Quieres ayudarnos a mejorar este tutorial más? Puedes enviar tu Revisión con los cambios que considere útiles. Ya hay 0 usuario que han contribuido en este tutorial al enviar sus Revisiones. ¡Puedes ser el próximo!


Tutoriales Relacionados



Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado jul 14 2015 08:43
  •   Actualizado ago 22 2016 15:28
  •   Visitas 1.9K
  •   Nivel
    Profesional