xumarhu.net xumarhu.net biblioteca
Principal > Biblioteca > Manuales de Instalación > Instalación de React.JS (Linux)

Instalación de React.JS (Linux)



Se requiere seguir los siguientes pasos:

1) Instalar un editor de texto (Visual Studio Code de preferencia)
2) Instalar Node.JS (es un aplicación para ejecutar Javascript)
3) Instalar React.JS
4) Ver y editar nuestra aplicación creada



PASO 1) Instalar un editor de texto (Visual Studio Code de preferencia)

Ir a la página oficial
https://code.visualstudio.com/Download

Descargar la última versión (1.45 - mayo 2020)
code_1.45.0-1588868285_amd64.deb

Abrimos la terminal (en este ejemplo como usuario "rogelio")y nos cambiamos a usuario root:
rogelio@rogelio-VirtualBox:~$ sudo su root
[sudo] contraseña para rogelio:
root@rogelio-VirtualBox:/home/rogelio#

Nos cambiamos al directorio "Descargas" donde está el archivo que acabamos de descargar:
root@rogelio-VirtualBox:/home/rogelio# cd Descargas
root@rogelio-VirtualBox:/home/rogelio/Descargas#

Ejecutamos el instalador de paquetes "dpkg":
root@rogelio-VirtualBox:/home/rogelio/Descargas# dpkg -i code_1.45.0-1588868285_amd64.deb

Por seguridad nos sugiere no ejecutar como usuario "root", pot lo tanto debemos salir y cambiar al usuario anterior (rogelio):
root@rogelio-VirtualBox:/home/rogelio/Descargas# exit

Y ahora si podemos ejecutar "Visual Studio Code" escribiendo "code" en la terminal
rogelio@rogelio-VirtualBox:~$

A continuación ya aparece en pantalla el "Visual Studio Code" para poder empezar a trabajar. También si lo buscamos en las "Aplicaciones Instaladas" ahí lo encontraremos


PASO 2) Instalar Node.JS

En la página oficial de "Node.JS" se encuentra el software para descargar en sus diferentes versiones:
https://nodejs.org/en/

En el caso de Ubuntu, para que reconozca que descargará la última versión es necesario agregar el repositorio donde se encuentra la última versión (14.1.0, abril 2020), por lo tanto abrimos abrimos la terminal (en este ejemplo como usuario "rogelio")y nos cambiamos a usuario root para iniciar con la instalación:
rogelio@rogelio-VirtualBox:~$ sudo su root
[sudo] contraseña para rogelio:
root@rogelio-VirtualBox:/home/rogelio#

Vamos a requerir el comando "curl" que no viene instalado, por lo tanto lo instalamos primero:
root@rogelio-VirtualBox:/home/rogelio# apt-get install curl

Ahora si agregamos el repositorio a nuestro instalador de paquetes:
root@rogelio-VirtualBox:/home/rogelio# curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -

Si queremos verificar si quedó agregado el respositorio ejecutamos el siguiente comando:
root@rogelio-VirtualBox:/home/rogelio# cat /etc/apt/sources.list.d/nodesource.list

Y se debe de observar lo siguiente:
deb https://deb.nodesource.com/node_14.x focal main
deb-src https://deb.nodesource.com/node_14.x focal main

Ahora si procedemos a instalar "Node.JS":
root@rogelio-VirtualBox:/home/rogelio# apt-get install -y nodejs

Si queremos comprobar la instalación y la versión de Node.Js escribimos en la terminal:
root@rogelio-VirtualBox:/home/rogelio# node -v
v14.1.0

Y si aparece la versión quiere decir que ya está instalado "Node.JS". Al instalar "Node.JS" también debe de instalar el "NPM" (que es un administrador de paquetes de "Node.JS"), y para ello es necesario también verificar si quedó instalado, para ello tecleamos el siguiente comando:
root@rogelio-VirtualBox:/home/rogelio# npm -v
6.14.4

Y si aparece la versión quiere decir que ya está instalado "NPM".



PASO 3) Instalar React.JS

Abrimos la terminal (en este ejemplo como usuario "rogelio") y nos cambiamos a la carpeta "Escritorio", para ahí crear nuestro proyecto (aunque podemos escoger cualquier otra carpeta de nuestra computadora (siempre y cuando tengalos los privilegios necesarios
rogelio@rogelio-VirtualBox:~$ cd Escritorio
[sudo] contraseña para rogelio:
rogelio@rogelio-VirtualBox:~/Escritorio$

Y ahí ejecutamos "npx" para instalar y crear nuestra primera aplicación que llamaremos "primera-app" con el siguiente comando:
rogelio@rogelio-VirtualBox:~/Escritorio$ npx create-react-app primera-app

En este punto tardará un poco ya que descarga de Internet los paquetes necesarios y crea la estructura de nuestra primera aplicación.



PASO 4) Ver y editar nuestra aplicación creada

Para empezar a ver nuestra "primera-app", tendemos que arrancar nuestro editor de texto VSC (Visual Studio Code en este caso) y seleccionamos la opción:
File > Open Folder

Luego seleccionamos la ruta donde está nuestro proyecto y seleccionamos:
Escritorio

Ahí aparecerá la carpeta de nuestro proyecto:
"primera.app"

La seleccionamos y hacemos click en:
Aceptar

Ya en la pantalla del VSC observamos en la parte izquierda nuestro proyecto y sus diferentes carpetas y archivos.

Ahora vamos a abrir una consola dentro del VSC, y para ello hacemos click en las opciones
Terminal > New Terminal

Y aparecerá en la parte inferior del VSC una terminal ya posicionada en la carpeta de nuestra "primera-app". Para ejecutar nuestra aplicación ejecutamos en la consola del VSC la siguiente instrucción:
npm start

Observaremos que se abre el navegador por defecto (en este caso Firefox) y se observa en la barra de dirección lo siguiente:
localhost:3000

Que nos indica que tenemos un servidor local dedicado en el puerto 3000 donde corre nuestra aplicación de Rect.JS y de sebe observar en pantalla el logotipo de React (un átomo) girando, esto significa que ya hemos terminado la instalación de React.JS


Usted se encuentra Aquí > Principal > Biblioteca > Manuales de Instalación > Instalación de React.JS (Linux)
Portal de Tecnología desarrollado por: Rogelio Ferreira Escutia
Valid CSS Valid XHTML 5