Cómo configurar tu primer proyecto en React.js

Clase 14 de 18 • Curso de Prework: Configuración de Entorno de Desarrollo en Windows

Christian Rangel

student•

Hola estaba siguiendo los pasos del profe Celis y me encontré con un problema al ejecutar el comando:

npx create-react-app test

ya que me pedía una versión de Nodejs de 14 en adelante y la que está en el repositorio de ubuntu llega hasta la v 10.19.0 Entonces si les ocurre esto al igual que a mí, les sugiero instalen directamente la version requerida, en mi caso usé la v14 y funcionó correctamete. líneas de código para instalar la versión 14 de NodeJs:

curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

Fuente: []Aquí (https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-20-04-es) [] y Aquí: (https://github.com/nodesource/distributions/blob/master/README.md) Saludos compañeros!

Carlos Antonio Munguia Cruz

student•

Muchisimas gracias por el aporte!

Norma Martínez Ramírez

student•

Muchas gracias compañero

Jery Rafael Ramírez Teo

student•

si les aparece el siguiente error mi solución fue agregarle sudo antes que todo y me deja instalar.

![](

Arnaldo José Cisneros Zambrano

student•

Gracias crack!

alejandro estrada rocha

student•

gracias!!!

José Mañaricúa Torres

student•

Si al estar listo para crear la aplicación con React te indica que necesitas un versión superior o más reciente de Node.js, como se puede ver en la siguiente imagen:

Una solución al problema es la siguiente:

Vamos a la página oficial de Node.js

como se observa en la imagen y damos click donde dice "Otras descargas", como lo señala la flecha roja. 2) Esto nos lleva a la siguiente imagen

en la parte inferior damos click donde dice "Install on Windows Subsystem for Linux (WSL)", como lo señala la flecha roja. 3) Ahora aplicamos el comando: cd ~ para ubicarnos en el home de nuesta instalación de Ubuntu. 4) Como vemos en la siguiente imagen

nos indica que para instalar Node.js en WSL (en específico en Ubuntu que tenemos instalado en WSL), es conveniente tener instalado un "Administrador de versiones", usaremos el administrador de versiones de Node.js, llamado comúnmente nvm. Pero previamente para evitar conflictos es recomendable eliminar las versiones instaladas de Node.js y npm, para lo cual aplicamos los siguientes comandos: sudo apt-get purge nodejs y sudo apt-get autoremove 5) Seguimos los pasos indicados en la siguiente imagen:

Para saber la última versión de nvm puedes ir al siguiente enlace: versión actual nvm y buscan la sección "Installing and Updating" como se ve en la imagen a continuación:

y así pueden saber que versión adecuada de nvm, por lo menos para la presente fecha como lo indica la página la versión de nvm es v0.39.1 De forma que el comando a ejecutar es: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash 6) Seguido realizamos lo indicado en las siguientes imagenes:

7) Finalmente regresamos al directorio donde nos encontrabamos cuando estabamos listos para crear la aplicación en React, con el siguiente comando: cd personalProjects y podemos seguir con lo que indica el video a continuación.

Oscar Javier Saavedra Montero

student•

gracias me ubiera gustado haberlo leido hace 2 dias :,) tuve que desinstalar todo y volver a instalar jsjsjs :,v

Luis Alfredo Diaz Restrepo

student•

gracias, pude resolver con tu aporte. ahora iré a otro aporte a resolver otro error y asi hasta que lo haga funcionar.. llevo 5 horas en esto.. saludos!

Gustavo Adolfo Nieto Gómez

student•

¡Hola! si alguien (como yo) tiene problemas al lanzar el npm test y les salta este error en el navegador solo denle permisos de administrador usando el comando sudo así, meten su contraseña y listo, no debería haber problemas!

sudo npm start

ecuerden que si no habían hecho esto antes en su pc les pedirá permisos en el firewall y de administrador al lanzarlo, debemos de concederlos para que funcione :3 esto me ayudó a mi.

Carlos Carrillo

student•

hola, gracias por tu aporte. Como le doy permisos desde firewall?

Juan Pablo Perez

student•

Muchas gracias todos los errores de los comentarios me sucedierón jaja.

Lautaro Pereyra

student•

El comando para darle permisos a VS Code para crear y editar archivos es: sudo chown -R [tu usuario] [la carpeta que quieres que tenga permisos (ejemplo: ~/projects)]

Joel Dominguez Merino

student•

Exactamente chown es para cambiar de propietario y ahí le estaríamos dando la propiedad al usuario indicado :)

Joel Pineda

student•

Excelente aporte, me ayudaste a quitarme ese error de VSCode, lo interesante es que pasa solo con los archivos guardados en Ubuntu.

Jhaider Jordan

student•

muy bueno el curso ojala que le metan mas recursos ala escuela de desarrollo web por que veo que falta contenido en la ruta del aprendizaje pero gracias por tu pasión por explicar las cosas Ricardo

Joel Dominguez Merino

student•

Tal cual! Igual yo me sentí incomprendido en aquel curso. Pero este ha resuelto todo :)

Andres David Sanchez

student•

puedes proponer otros cursos que le hagan falta a la ruta, siempre estan escuchando propuestas

ronal mora

student•

Hasta el react me motiva para que siga aprendiendo :)

Diego Alejandro Pardo Montero

student•

JAJAJAJJAJAJAJA Gran mensaje

Daniel Reymundo

student•

hahaha

Jorge Luis Baltodano Quispe

student•

SOLUCION!, SI APARECE ERROR DE NPX NO FOUND

Si en caso de que salte este error(ver imagen)

PASO A SEGUIR

Desinstalar nodejs y npm para reinstalar

sudo apt-get remove nodejs
sudo apt-get remove npm
sudo apt-get update

Reinstalar nodejs usando paquete npm y Ubuntu

sudo apt install curl
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

Verificar la instalacion y version de nodejs y npm

node -v
npm -v

Actualizar los script de actualizacion de nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

Instalar nvm

nvm install v14.17.2

Comprobar la instalacion de nvm

nvm use system

Ya se podra ejecutar el comando de nxp

npx create-react-app test

Finalmente aplicacion react creada

Jesús David Barrios Escorcia

student•

Genial !!

Javier Adrian Prieto Tetzpa

student•

En verdad muchas, muchas gracias estaba atorado

Priscila Grados Duque

student•

Clases de 9 minutos que duran 2 días mientras detecto y entiendo qué me salió mal y cómo lo arreglo. La verdad aprendí muchísimo de investigar y de todos los aportes. Gracias a quienes se han tomado el tiempo de escribirlos.

Sabrina Poggi

student•

Jajajajja siii 2 DIAS!

Iliana Ruiz Zurita

student•

Yo igual . Sería tan bonito que el profe agregara un módulo de errores... y que cubriera windows 11

Daniel Andrés Espinoza

student•

¿Qué es Reactjs! Una biblioteca de JavaScript para construir interfaces de usuario ¿React. El framework que revolucionó la web? . ¿Qué es Vuejs? Es un framework progresivo para construir interfaces de usuario. Vue.js: Qué es y por qué usarlo como framework de referencia . ¿Qué es Angular? Angular es un framework de desarrollo para JavaScript creado por Google. La finalidad de Angular es facilitarnos el desarrollo de aplicaciones web SPA y optimizar la experiencia. ¿Que es Angular y para que sirve?

Jimmy Buriticá Londoño

student•

Gracias por ampliar este tema.

Juan Pablo Perez

student•

Gracias.

Alonzo Luna

student•

♦Si tienes problemas para actulizar el Node.js 14 , sere muy breve con esta explicación.

Si te aparece esto

entonces sigue estos pasos

🏅PASO 1

🏅PASO 2

🏅PASO 3

🏅PASO 4 Verifica la versión.

Fredy Acosta

student•

Excelente, me funciono de maravilla. gracias!!

Emilio Andres Garcia Giaquinta

student•

Muchas gracias, me funciono

Elmo López Jirón

student•

Este curso me ha dado tantos errores, que me ha quitado las ganas de aprender

Jean Carlos Soto

student•

Todo es ensayo y error, así que no hay que desanimarse, al contrario debería ser de mayor entusiasmo para seguir aprendiendo, puede parecer frustrante a veces pero el que persevera vence.

Ricardo Ochoa

student•

Si xd me tengo que detener a cada rato porque me surgió algún error que no sale en el video, este video de 10 minutos se me hizo como de 40 por tanto error. Deberían actualizar

Sebastian Vizcarra

student•

Jairo Saul Salas Quiñones Pro-Dev | Sci-Tech

student•

Gran resumen!!! solo unas cuantas aclaraciones... es react.js, no create.js vue.js es la patrocinada por AliExpress, no node.js

David Hernandez

student•

Gracias, esto me ayudo aclarar mis dudas, excelente.

Alexis Sebastián Ruiz Álvarez

student•

En mi caso, uso linux nativo (Ubuntu 18.04.5) y me marcaba error al utilizar comando :

npx create-react-app test

Me di cuenta que primero tenía que instalar React.js, antes de poder crear una app con él. Para instalar React.js de manera global, se usa el comando:

sudo npm install -g create-react-app

Una vez instalado React.js, ya me fue posible crear una app en mi carpeta preferida. Espero a alguien le sirva

Luis Eduardo Alanís Villarreal

student•

¿No se suponía que npx era para ejecutar todo sin tener que instalar paquetes?

Es que a mi me saca que si quiero instalar los paquetes pero por eso estamos usando npx en lugar de npm, no?

Rolando Mamani Salas

student•

Muchas gracias por el dato

Ricardo Carron Ramírez

student•

Tuve problemas con este error dos veces la primera solución fue habilitar el IIS (Internet Information Sever) que se habilita desde características de Windows y la segunda usar el comando sudo npm start. Gracias a la ayuda de otros comentarios logré solucionarlos. Por esto creo que es justo dejar el mío. Muchas, Muchas Gracias a todos los que van dejando sus experiencias y aportes en el camino.

Daniel García Expósito

student•

Me ha funcionado tu solución xD

Isabella Bellizzia

student•

Me sigue arrojando el error, pero gracias!

Usuario anónimo

user•

✨ Mi primera experiencia con React.js, descubrí que la perseverancia es importante.

Franyer Rangel

student•

El inicio del camino ninja :D

Rolando Mamani Salas

student•

Pronto tomare el mismo camino

Iván Arcos

student•

Acá les dejo la solución en caso de que no les permita guardar y visualizar en e navegador sus cambios:

sudo chown -R tusuario ~/tuNombredeCarpeta

Andres Felipe Cuellar Ortiz

student•

Gracias crack !

Luis David Soto Orrantia

student•

me sirvió, gracias!

David Galicia Gomez

student•

Si cuando intentaste correr tu proyecto en react te salio un error relacionado con la version de Node JS 10.19 que es la que se instala por defecto, lo que tienes que hacer como posiblemente ya lo notaste en el error es actualizar Node JS, yo lo hice con los siguientes comandos:

sudo apt update curl -sL https://deb.nodesource.com/setup_16.x | sudo bash - sudo apt install -y nodejs node -v

Actualmente la version estable es la 16.x al parecer en la parte donde dice "setup_16.x" especificas la version que vas a bajar. Espero les ayude

José Manuel Córdoba

student•

Gracias

Milwar Riveros Ramos

student•

Gracias!

Rodrigo Alberto Herrera Pizarro

student•

Para el problema de las versiones de node (ya que al momento de crear $ npx create-react-app test, solicita node versión 14), es recomendable hacer lo siguiente:

En Windows Terminal asegurarse de estar en home con cd ~
escribir el siguiente comando curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -
escribir el siguiente comando: sudo bash nodesource_setup.sh

(Esto instalará los paquetes necesarios para actualizar node.js)

escribir el siguiente comando:

sudo apt install nodejs

(esto instalara nuevamente node a la version 14)

5 revisar version de node con el siguiente comando:

node -v

(habiendo corroborado que la version de node es superior a 14.0, continuar con la creación del archivo react app test) ejecutando los siguientes comandos

cd personalProjects

npx create-react-app test

Si esto es correcto (la version node debe ser 14.0); debiera crear lo propuesto por el profesor.

Eduardo Sanchez

student•

Genial... gracias me sirvio de ayuda

juan carlos gallego contreras

student•

Gracias @rherrerap7

Adrián Flores

student•

Me aparece el siguient emensaje luego de iniciar el comando npx create-react-app test: npx: installed 67 in 3.517s You are running Node 10.19.0. Create React App requires Node 14 or higher. Please update your version of Node.

Raúl J. Ojeda Castillo

student•

Yo use estos comenados

sudo apt update

sudo apt install build-essential checkinstall libssl-dev

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.35.1/install.sh | bash

nvm –version

nvm ls-remote

nvm install v14.18.2

Espero te sirva

Jose Carlos Espinosa Espinosa

student•

el ultimo comando cual es, es que nvm me marca como not found no se que puede estar mal

Cómo configurar tu primer proyecto en React.js

Herramientas para la web

¡Tenemos una nueva versión de este curso!

Qué es un navegador web

Qué aprenderás para configurar tu entorno de desarrollo en Windows

Instalando Firefox, Chrome y usando sus DevTools

Editor de texto

Editor de texto: instalando el tuyo

Extensiones y personalización de Visual Studio Code

Cómo usar Live Server en proyectos reales de HTML y CSS

Linux dentro de Windows

¿Qué es Windows Subsystem for Linux?

Instalación de Windows Subsystem for Linux

Configuración de Ubuntu en WSL

Instalación de VirtualBox

Instalando Ubuntu en una máquina virtual

Comandos básicos de la terminal e instalación de Node.js

Cómo configurar tu primer proyecto en React.js

Git y Github

Instalando Git

Vinculando nuestra llave SSH en Github

Subiendo nuestro primer repositorio

¿Qué es lo que sigue?