No es un bug, es una característica no documentada

martes, 2 de abril de 2019

ReactJS I. Instalar React en Windows

11:52 Posted by Inazio Claver 13 comments

ReactJS (o React a secas) es una librería Javascript de código abierto creada por Facebook para diseñar interfaces de usuario en aplicaciones de una sola página. No os voy a aburrir con más teoría porque eso es muy fácil de encontrar, así que os enlazo directamente con pensada el artículo de Wikipedia y si os apetece podéis leerlo tranquilamente.

Aquí nos vamos a centrar en la parte más práctica y, aprovechando que estoy en pleno aprendizaje de esta tecnología, iré escribiendo en una nueva sección de tutoriales lo que vaya consiguiendo aprender.

Esta entrada será muy cortita, así que vamos al grano.

¿Cómo instalar ReactJS en Windows?

Para instalar React en Windows 10 usaremos el gestor de paquetes npm, que se incluye en la instalación de NodeJS (si bien no estamos supeditados a crear el backend de nuestra app con NodeJS, podemos usar el que más rabia nos de).

Nos vamos a la web de Node (https://nodejs.org/es/download/) y descargamos la versión que nos apetezca. En mi caso la de 64 bits.
Una vez descargado simplemente lo instalamos (siguiente - siguiente - siguiente) y al finalizar solo nos quedará comprobar si la instalación se ha llevado a cabo correctamente.

Abrimos la consola de comandos y escribimos este comando para que nos devuelva la versión actual de Node
node --version
Y lo mismo para comprobar si está instalado npm
npm --version
Si ha ido todo bien, veremos algo como lo siguiente


¿Tenemos todo ok? Perfecto. ¿No tenemos algo similar a la imagen? Eso se ha producido debido a que no se han agregado esos comandos a las variables de entorno. Podemos solucionarlo siguiendo los pasos que especifican en ésta pregunta de Stackoverflow.

Una vez que esa parte nos funciona, lo siguiente será hacer la instalación de todos los paquetes necesarios para ReactJS.

Escribiremos el siguiente comando
npm install -g create-react-app
Con este comando lo que hacemos es instalar ReactJS en nuestro ordenador de forma global. Si no agregásemos el parámetro -g sólo podríamos usar ReactJS en la carpeta donde hemos ejecutado el código. También podemos comprobar si se ha ejecutado correctamente con el comando
create-react-app --version
De esta manera lo podremos emplear donde gustemos. Veremos algo tal que así


¡Conseguido! Estamos listos para el último paso, crear un nuevo proyecto de ReactJS

¿Cómo crear un proyecto ReactJS en Windows?

Es harto sencillo y lo vamos a hacer desde la misma consola de comandos. Nos iremos al directorio donde queremos que se almacene el nuevo proyecto y escribimos el siguiente comando
create-react-app my-app
Este comando generará todo lo necesario para poder empezar a usar la nueva aplicación de ReactJS.
Veremos lo siguiente por consola



Al final de la imagen podemos ver que nos dan las instrucciones necesarias para arrancar nuestra aplicación de ReactJS, así comprobamos que todo está funcionando como debiera.
Ejecutamos los siguientes comandos
cd my-app
npm start
Y en nuestro navegador por defecto se abrirá la siguiente web


Eso sería todo de momento, en futuras entregar iremos ampliando con más cositas.
¡Salud y coding!

13 comentarios:

  1. Gracias,me fué de gran valor el tuto! Salu2 de @gringoinc

    ResponderEliminar
  2. Excelente, pude instalar la App. Muy didactico y efectivo para principiantes

    ResponderEliminar
  3. Genial Hermano, Gracias por la ayuda. God Bless you

    ResponderEliminar
  4. hola,

    despues de ejecutar el comando npm install -g create-react-app en mi pc windows 10, el comandos: create-react-app my app no funciono!! aqui les muestro el mensaje !!
    C:\Program Files\FAZT-YOUTUBE>create-react-app my-app
    'create-react-app' is not recognized as an internal or external command,
    operable program or batch file.

    ResponderEliminar
    Respuestas
    1. ¿Puedes probar con este comando? "npx create-react-app my-app". Si no te funciona, te recomiendo que sigas los pasos de esta respuesta en Stackoverflow: https://stackoverflow.com/questions/38977255/create-react-app-is-not-recognized-as-an-internal-or-external-command

      Eliminar
  5. Excelente, fue de gran ayuda. Simple y útil.

    ResponderEliminar
  6. Gracias por el aporte, me fue de gran ayuda.

    ResponderEliminar
  7. gracias, fue muy útil la explicación.

    ResponderEliminar