0

Después de crear la App de React con el comando:

npx create-react-app my-app

cd my-app

npm start

No se pueden visualizar los cambios que hago en la ventana del navegador. Adjunto imágenes. La única forma de visualizarlos es volviendo a ejecutar el comando npm start (en mi ordenador tarda un mundo para ejecutarlo) ---UTILIZO CHROME---

Problema con la visualización a tiempo real en React

3
  • Pues eso es extraño, en mi ordenador tarda en cargar aproximadamente 3 minutos, apenas doy Ctrl+s al archivo app.js, los cambios se ven casi de inmediato en el browser, estoy usando la version de node v14.13.0
    – g.4
    Commented el 7 feb. 2021 a las 17:36
  • 1
    ¿Ya le echaste un vistazo a esto?
    – FranAcuna
    Commented el 7 feb. 2021 a las 18:59
  • revisa el archivo css si usaste create-react-app en el folder src edita app.css
    – 1uen
    Commented el 28 oct. 2022 a las 19:48

1 respuesta 1

2

Vengo a solucionar el error (No se visualizan los cambios en el navegador) //FACIL SOLUCION

Causa del Error o BUG --> Windows Update cambió el comportamiento del sistema de archivos WSL2. NO ES CULPA DE REACT HA SIDO UNA CAGAD* DE WINDOWS xD

Solución--> Abre a tu consola de comandos o terminal de LINUX para Windows

1.PARTE: Al abrir la consola de comandos o terminal de linux for windows (UBUNTU 20.04 en mi caso) nos ubicará en esta dirección:

root@LAPTOP-87878:/mnt/c/Users/tu_usuario#

2.PARTE: Introducimos el siguiente comando ( cd ) para ubicarnos en la raíz ~ Ahora deberíamos de observar que nos encontramos en:

root@LAPTOP-87878:~#

3.PARTE: Creamos una nueva carpeta con el siguiente comando ( mkdir nombre_de_carpeta )

4.PARTE: Nos movemos a la carpeta que hemos creado con el comando ( cd nombre_de_carpeta ). Ahora deberíamos de ver en la consola o terminal:

  root@LAPTOP-87878:~/nombre_de_carpeta#

5.PARTE: Creamos la app de React con el comando ( npx create-react-app nombre_del_proyecto )

6. PARTE: Una vez terminada la instalación nos movemos a la carpeta con el comando ( cd nombre_del_proyecto ). Deberíamos de ver en la terminal:

  root@LAPTOP-87878:~/nombre_de_carpeta/nombre_de_proyecto#

7.PARTE: Introducimos el comando ( npm start ).

A partir de ahora podremos ver todos los cambios que hagamos en el editor de texto en tiempo real..... Esto seria suficiente, espero les sirva de ayuda para continuar con el curso normalmente!!!!

Funciona con la última versión de React. (Fecha 07/02/2021) NO HACE FALTA UTILIZAR UNA VERSION ANTIGUA NI CREAR EL ARCHIVO .env !!!!!!!!!

EXPLICACIÓN DEL ERROR--> Al mover el proyecto a un directorio que no está vinculado a una carpeta de Windows el uso de ~/ evita la capa de traducción del sistema de archivos y permite detectar todos los cambios.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.