React es una de las tecnologías de JavaScript que más ha crecido y se ha popularizado en los últimos años, peleando mano a mano con Angular como herramienta líder del mercado, con amplias diferencias, pero que también permite lograr una SPA funcional con gran rendimiento. En este Informe USERS aprenderás a crear tu propia SPA utilizando React.
Autor: Santiago Aguirre
React
React, la librería de JavaScript creada y mantenida por Facebook, se destaca por ser una herramienta versátil que se diferencia de los frameworks como Angular por su libertad a la hora de trabajar. Permite crear tus propias estructuras de proyecto, generar componentes de la manera que prefieras, manejar funciones o clases, y tener distintas libertades que los entornos de trabajo no brindan, por ser herramientas más cerradas y dogmáticas.
React es una librería de JavaScript desarrollada y mantenida por Facebook.
React se caracteriza por ser una herramienta fácil de instalar en una computadora donde solo necesitas tener Node.JS y NPM para comenzar a trabajar y crear tu propia SPA, o Single Page Application (aplicación de una sola página). Hay quienes confunden la funcionalidad y el objetivo de las SPA, y las evitan pensando que se trata de herramientas demasiado sencillas. En realidad, el término SPA hace referencia a una característica de estas aplicaciones, que, independientemente de su tamaño y estructura, no necesitan refrescar el navegador para funcionar, sino que trabajan en el browser del cliente de manera completa, cargando una vez y sin tener que refrescarlo, ni siquiera a la hora de enviar un formulario, modificar la ruta, comunicarse con un servidor, o cualquier otra operación. Las SPA que se pueden desarrollar en tecnologías como React, Angular o Vue.JS pueden ser tanto una página pequeña de aterrizaje, como un sitio de tamaño medio o una aplicación de gran tamaño.
Como página única o SPA, se distinguen por su rendimiento, velocidad y facilidad de trabajo para los usuarios finales.
NodeJS es una herramienta de código abierto desarrollada para ejecutar código JavaScript más allá de los navegadores.
Para comenzar a trabajar con React, solo necesitas tener Node.JS instalado en tu computadora. Se trata de una herramienta Open Source y gratuita, además de multiplataforma, con lo cual puedes instalarlo en sistemas Windows, Linux o MacOS. Node.JS es un entorno de JavaScript construido bajo el compilador de Chrome V8 para este lenguaje, con el cual puedes ejecutar código fuera del navegador, y crear programas y servidores con este lenguaje. Es decir, es una herramienta que te libera para trabajar con JavaScript, más allá del código que utilices en el front-end.
Su instalación es sencilla, y en el proceso, se instalarán tanto el entorno Node.JS como npm, el gestor de paquetes de software de JavaScript. Npm es una herramienta similar a Composer (para aquellos que hayan trabajado con PHP), que permite instalar dependencias y gestionar proyectos. Si deseas ver paso a paso la instalación de Node.JS, o si quieres aprender más sobre Node, como se lo conoce coloquialmente, y sobre la forma de trabajar con JavaScript en este entorno, puedes recurrir a la colección Node.JS, donde aprenderás desde cero hasta aspectos avanzados de desarrollo, en este enlace.
Una vez que hayas instalado Node.JS, para comenzar a trabajar tendrás que dirigirte al directorio donde quieras colocar tus proyectos y abrir allí una terminal.
Node.JS es un intérprete de JavaScript para ejecutar código por fuera del navegador.
En ella ejecuta el comando npx create-react-app primer-app-spa, que creará una aplicación de React en el directorio donde te encuentres y generará todos los archivos JavaScript necesarios para la aplicación. Una vez que la terminal finaliza su trabajo, puedes iniciar la aplicación mediante la misma consola, ejecutando el comando cp primer-app-spa y, luego, npm start. Estos comandos se encargarán, en primer lugar, de ingresar en la carpeta del proyecto y, luego, de iniciar el servidor de desarrollo que te permitirá trabajar con React, viendo al instante cualquier cambio en el código. También puedes abrir el proyecto en tu editor de código favorito, y allí, si este posee una terminal integrada (como es el caso de editores como Visual Studio Code), puedes ejecutar el comando npm start para trabajar directamente desde el editor y no tener otras ventanas o programas abiertos en la computadora.
Una vez abierto el proyecto en tu editor preferido, es momento de comenzar a trabajar.
Continúa leyendo el Informe USERS 205 y aprende a desarrollar componentes con React.
Informe USERS es una publicación digital semanal exclusiva para suscriptores de RedUSERS Premium, en ella analizamos en profundidad temas de actualidad en tecnología: tendencias, aplicaciones, hardware, nuevas tecnologías y más.
RedUSERS PREMIUM contiene cientos de publicaciones y puedes leerlas a todas, por una mínima cuota mensual SUSCRIBETE!
