Create React App, crea tu primera aplicación con React Ubuntu 20.04

En el siguiente artículo vamos a echar un vistazo a cómo podemos crear nuestra primera aplicación con ReactJS en Ubuntu 20.04 utilizando Create React App. ReactJS es una biblioteca JavaScript de código abierto que se utiliza para crear la interfaz de usuario, mantenida por Facebook y la comunidad de desarrolladores. ReactJS se puede utilizar en el desarrollo de aplicaciones web o aplicaciones móviles.

En React, también conocido como ReactJS, los datos se procesan en el DOM. Para ejecutar la aplicación React se requieren bibliotecas adicionales para la gestión del estado y el enrutamiento. Algunos ejemplos de estas bibliotecas son Redux y React Router.

Instalación de React en Ubuntu 20.04

Para instalar React en nuestro sistema, primero debemos saber qué es npm y comprender por qué los necesitamos. Npm son las siglas de Node Package Manager, y es el registro de software de código abierto más grande del mundo. Contiene más de 800.000 paquetes de códigos. Npm es de uso gratuito y cualquier software público se puede descargar y utilizar sin necesidad de registrarse ni de iniciar sesión.

Npm es una herramienta de administración de dependencias para aplicaciones javascript, que ayuda a instalar todas las bibliotecas y otras herramientas para respaldar el desarrollo de las aplicaciones JS.

Instalar npm

Para instalar nodejs, que incluye npm, no tendremos más que abrir una terminal (Ctrl+Alt+T) y ejecutar el siguiente comando:

sudo apt install nodejs

Después de finalizar la instalación de npm, podemos verificar su versión y la de node. Esto podremos hacerlo con el comando:

npm -v

La versión de npm instalada depende de la fecha de instalación, ya que la actualización se realiza con frecuencia. Es necesario que nos aseguremos de tener instalada una versión superior a la 5.

Para comprobar la versión instalada de node, el comando a utilizar será:

node -v

Si no tienes la última versión de npm instalada en tu sistema, puedes actualizar Node Package Manager (npm) a la última versión ejecutando este comando en la terminal:

sudo npm install -g npm@latest

Instalar create-react-app

Para instalar un entorno productivo de React, necesitaremos configurar herramientas como babel, webpack, etc… lo cual es complejo de configurar para principiantes en el mundo React. Pero podemos encontrar varias herramientas que nos resultarán de ayuda en la configuración. Entre ellas encontraremos create-react-app, que es la herramienta más sencilla de utilizar y configurar.

Create React App es un ambiente cómodo para aprender React, y es la mejor manera de comenzar a construir una nueva aplicación de página única usando React.

Create React App configura tu ambiente de desarrollo de forma que puedas usar las últimas características de Javascript, brindando una buena experiencia de desarrollo, y optimizando tu aplicación para producción. Según indican en su web, es necesario tener Node >= 8.10 y npm >= 5.6 instalados en tu máquina.

Podremos instalar create-react-app usando npm. Para ello, en una terminal (Ctrl+Alt+T) solo necesitaremos ejecutar el siguiente comando de instalación:

sudo npm install -g create-react-app

Una vez finalizada la instalación de la aplicación create-react-app en nuestro sistema, podemos verificar la versión instalada ejecutando el siguiente comando:

create-react-app --version

Creando la primera aplicación React

Nuestra primera aplicación React se puede crear simplemente usando create-react-app. Tan solo tendremos que utilizar el siguiente comando:

create-react-app mi-primera-app

El comando anterior va a crear una aplicación React llamada mi-primera-app. Al mismo tiempo se va a crear una nueva carpeta con el mismo nombre de la aplicación que incluye todos los archivos, configuraciones y bibliotecas necesarias.

Ejecutando la aplicación React

Una vez que se crea el proyecto React, tendremos que movernos al directorio del proyecto y ejecutar la aplicación React usando el siguiente comando en la terminal (Ctrl+Alt+T):

npm start

El comando npm start inicia el servidor de desarrollo que realizará todo el proceso de compilación.

La terminal nos va a indicar que debemos abrir el navegador y cargar la aplicación que se ejecutará en la URL http://localhost:3000 de forma predeterminada. Cuando se abra el navegador, veremos en pantalla el logotipo y textos de React.

Desinstalar create-react-app y npm

Los usuarios podremos desinstalar cualquier biblioteca instalada desde npm utilizando el comando de desinstalación de npm. Ejecuta el siguiente comando en la terminal (Ctrl+Alt+T) para desinstalar create-react-app:

sudo npm uninstall -g create-react-app

De manera similar, podremos desinstalar npm utilizando este otro comando en la misma terminal:

sudo apt remove nodejs

Se puede obtener más información sobre esta biblioteca JavaScript para crear interfaces de usuario en la documentación del proyecto.