Instala ReactJS y crea tu primera aplicación

La otra vez les comenté acerca de lo que era React, ahora, les explicaré como instalarlo en tan solo unos cuantos pasos.

Para instalar y poder usar ReactJS vamos a necesitar dos cosas: Node.js y NPM. Como generalmente me gusta que la gente sepa lo que está haciendo y por qué lo está haciendo, les explicaré un poco lo que hacen cada una de estas herramientas. Node.js es un entorno de ejecución de Javascript que nos permite ejecutar programas o códigos escritos con este lenguaje como si trabajáramos en un servidor. Recuerda que toda aplicación web está pensada para ser ejecutada en un servidor (o un servidor local, si la estamos ejecutando desde nuestra computadora). Por otro lado NPM es un administrador de paquetes para Javascript, es decir, NPM nos permite instalar librerias de Javascript para poder aumentar la cantidad de funcionalidades básicas que disponemos al momento de programar.

Esta guía está pensada para sistemas operativos basados en Linux. Lo primero que necesitamos es un paquete llamado curl. Si no lo tienes, o no estás seguro de tenerlo instalado, puedes instalarlo introduciendo el siguiente comando en un terminal:

sudo apt-get install curl

El terminal te pedirá que ingreses tu contraseña para poder utilizar los permisos de sudo. Luego de que la instalación haya finalizado, instalaremos Node.js con el siguiente comando:

curl -sL https://deb.nodesource.com/**setup_6.x** | sudo -E bash -

Yo instalaré Node.js v6 versión LTS. Si lo deseas, puedes instalar la versión más nueva que es la v8, simplemente reemplazando setup_6.x por setup_8.x. **Ambas versiones funcionarán por igual.

El comando que acabas de utilizar añadió el repositorio de Node.js a tu lista de repositorios, ahora necesitamos instalarlo mediante el siguiente comando:

sudo apt-get install -y nodejs

Si todo se instaló correctamente, puedes verificar que Node.js y NPM están instalados (NPM se instala junto con Node.js) escribiendo node -v y npm -v, y deberás ver algo por estilo:

julio@debian:~$ node -v
v6.11.1
julio@debian:~$ npm -v
3.10.10

Vamos a instalar también el paquete build-essential que es necesario para que Node pueda funcionar correctamente:

sudo apt-get install -y build-essential

Ahora, vamos a instalar React con el siguiente comando:

sudo npm install -g create-react-app

create-react-app es un paquete que podemos encontrar en NPM que hará nuestra experiencia mucho más sencilla, ya que este se encarga de hacer todas las configuraciones necesarias, y nos deja una aplicación lista para ser utilizada. Ahora que hemos instalado create-react-app, vamos a crear nuestra primera aplicación con el siguiente comando:

create-react-app hello-world

cd /hello-world

Luego de unos segundos un mensaje aparecerá diciendo que nuestra aplicación fue creada exitosamente y nos dará algunas instrucciones básicas. Luego de que haya terminado de configurar la aplicación, nos movemos al directorio que se acaba de crear y que tendrá por nombre el mismo nombre de nuestra aplicación. Mi aplicación se llama hello-world, así que escribiré cd /hello-world. La tuya, puede llamarse como tu prefieras. Ahora, estando dentro del directorio de la aplicación, ejecutamos el siguiente comando:

npm start

Este comando iniciará un servidor virtual y abrirá nuestra aplicación en el navegador:

Esta es una aplicación de ejemplo que está incluida dentro de create-react-app. Si quieres cerrar el servidor local, puedes presionar la combinación de teclas Crtl+C. Una característica bastante útil es que todos los cambios que hagas dentro de tu aplicación mientras el servidor local este corriendo serán mostradas automáticamente en el navegador sin la necesidad de apretar el botón de Refrescar página/F5. Ahora, vamos a modificar un poco esta aplicación, yo voy a abrir el directorio en donde se encuentra la aplicación con el editor Visual Studio Code, ustedes pueden utilizar el de su preferencia.

En el lado izquierdo de la pantalla pueden ver la estructura de la aplicación

node_modules: aquí se instalan todas las librerías y paquetes de nuestra aplicación.
public: aquí se encuentran los archivos que serán públicos dentro del servidor y para las personas, tales como el index.html, el favicon, las hojas de estilo, scripts que importemos dentro de index.html, etc.
src: aquí se encontrarán todos nuestros Componentes de React.

Vamos a ir al archivo llamado App.js y vamos a editarlo un poco. Borramos la parte de código que está seleccionada y vamos a cambiarla. Ten en cuenta que tu componente debe devolver un único elemento, generalmente se suele devolver un div gigante con todo lo que queremos mostrar dentro, como se muestra en la siguiente imagen. Cuando hayamos terminado de editar nuestro componente, guardamos los cambios: