ProgramingWeb

¿Cómo instalar reactjs en 2020 ?

Los pasos a seguir en este tutorial sirven para instalar react tanto en windows,mac o linux, Lo primero que debemos hacer es verificar si tenemos nodejs y npm instalados. Vamos al terminal y escribimos lo siguiente.

node -v
## debería retornar algo como v13.12.0
npm -v
## 6.14.4

¿Qué hacer si node no esta instalado ?

En caso de que el comando anterior no regrese una versión valida de nodejs, necesitaremos instalar node para poder proceder con la instalacion de react, puedes instalar node desde el siguiente enlace nodejs.org, si estas usando un sistema ubuntu o derivado hemos echo un tutorial en el que aprenderas a instalar nodejs en tu sistema en base linux, tutorial para instalar nodejs

Instalando reactjs con create-react-app y npx

A continuación procederemos con la instalacion de react, las herramientas que usaremos son las siguientes:

  • npx: Es una herramienta de ejecución de paquetes de npm, nos permite instalar grandes paquetes sin necesidad de descargarlos de forma global en nuestro pc, esta disponible desde la versión 8.10 de node y 5.6 de npm.

  • create-react-app: Paquete creado por el equipo de react que viene con todos las dependencias configuradas y con una estructura de poryecto básica generada.

Una vez explicado esto procedaos con la instalación.

Usando la terminal para instalar react

Abre la terminal de tu sistema ya sea de windows linux o mac, una vez abierta ejecuta el siguiente comando.

npx create-react-app nombreDelProyecto

La descargar y configuración de los paquetes se iniciará, debes esperar a que termine de descargar todas las dependencias para poder abrir la aplicación creada.

Abriendo la aplicación react

El siguiente paso a realizar es navegar hasta el directorio.

cd app

Ahora ejecutamos npm start para iniciar la aplicación

npm start

El comando npm start debería abrirte automáticamente el navegador en el puerto 3000 con un boilerplate básico para empezar a trabajar con react. Ahora ya tenemos instalado y creado nuestro proyecto en reactjs.