de aquí en adelante,
Comenzarás a codificar en tu propia computadora.
y está prácticamente garantizado que se producirán errores
y que algunas cosas simplemente no funcionarán.
Y así, desde el principio,
Quiero mostrarte algunas técnicas.
para hacer frente a estos errores y problemas.
Entonces esta es una conferencia realmente importante,
así que no te lo saltes.
Entonces digamos que estás haciendo algún cambio aquí en tu código.
y guárdelo, y luego querrá ver el resultado.
Pero imagina que por alguna razón,
su página no se actualizó aquí.
¿Entonces, Qué haces?
Entonces, cuando suceda, no entre en pánico, sino más bien,
Pruebe algunas soluciones, que le contaré ahora.
Y lo primero es asegurarse
que la aplicación realmente se está ejecutando.
Y créeme o no
De hecho, esto me ha pasado antes.
Entonces pensé que la aplicación debería estar ejecutándose.
y estaba haciendo algunas actualizaciones al código,
cambiando algo,
y me preguntaba por qué la aplicación no se recargaba.
Entonces, en algún momento,
Me di cuenta de que, bueno,
De hecho, ni siquiera había iniciado la aplicación.
Y esto es realmente algo que puede suceder.
Entonces, si no tienes la aplicación ejecutándose, por supuesto,
Entonces, si no usaste "npm start" como te mostré antes,
Entonces, por supuesto, tu aplicación no puede recargarse en el navegador.
Pero si estás seguro de que realmente se está ejecutando
pero aún no se actualiza,
entonces una solución puede ser detener la aplicación y reiniciarla.
Así que aquí está la pestaña en la terminal.
donde actualmente tengo la aplicación ejecutándose.
Y para detenerlo usamos Control + C.
Entonces, en Mac, eso es Control + C.
y en Windows también es solo Control + C.
Luego en Windows creo que podría preguntarte
si realmente quieres parar
y luego puedes simplemente escribir 'Y' y presionar enter.
Entonces con esto lo tienes detenido y luego puedes reiniciar.
Entonces eso es nuevamente "npm start"
que luego debería abrir una nueva pestaña
y sí, ahí vamos.
y entonces
sí, aquí está.
Y si cambio algo ahora
entonces debería reflejarse inmediatamente.
Así que ahí está.
Y en realidad es más común de lo que piensas.
que tienes que hacer este tipo de cosas.
Y es por eso que realmente quería
incluir esta conferencia desde el principio.
Y lo que también es bastante común
es que a veces todo lo que tienes que hacer
es hacer una recarga completa aquí en el navegador.
Así que simplemente haz clic en este botón de recarga.
porque esta recarga automática,
por lo que el reemplazo del módulo en caliente realmente se rompe todo el tiempo
por alguna razón.
Y entonces una de las soluciones.
es simplemente recargar el navegador.
Ahora otro buen consejo que puedo darte.
es mantener siempre la terminal abierta aquí en todo momento.
Y lo mismo aquí para las herramientas de desarrollo.
en el navegador.
Bueno, no lo es...
Entonces, inspeccionando, y aquí eso es demasiado grande.
Sí, entonces aquí, con la consola abierta.
También hay algo llamado herramientas de desarrollo de React.
pero hablaremos de eso un poco más tarde.
Entonces es bueno mantenerlos abiertos.
porque entonces en caso de que haya algunos errores inesperados
Aparecerán aquí en esta consola y también aquí abajo.
Y también si tienes esto abierto,
Siempre puedes estar seguro de que la aplicación se está ejecutando.
Tal vez pueda hacerlo un poco más pequeño.
porque, bueno, la ventana aquí ya es muy pequeña,
de lo contrario, casi no podremos ver nuestro código.
Ahora, antes estaba hablando de mensajes de error.
y por eso a veces aparecen cuando haces algo mal.
Entonces Create-React-App en realidad tiene algo interno
que mostrará automáticamente los errores aquí en la parte superior.
Así como arriba en la ventana,
y también todos los de aquí. Te lo mostramos.
Así que escribiré algo aquí.
lo que creará un error.
Y efectivamente tenemos el error aquí.
Bueno, en realidad no aquí.
pero a veces aparecen errores importantes aquí.
Pero tenemos esta superposición en toda la aplicación.
lo que nos da este mensaje de error.
Entonces es una buena idea
echa un vistazo a este mensaje de error
y tal vez intente comprender qué salió mal exactamente.
Por lo general, esta primera parte aquí no es realmente importante.
pero aquí nos dice "elementos JSX adyacentes
debe estar envuelto en una etiqueta adjunta.
¿Querías un fragmento JSX?"
Y tal vez si realmente no entiendes esto,
puedes simplemente tomar esto, copiarlo,
abre tu nueva pestaña y búscala en Google.
Y este es ahora el poder de la enorme comunidad de React.
porque cientos, si no miles, de personas
antes de haber tenido el mismo problema y haberlo buscado en Google,
o me ha gustado hacer una pregunta sobre Stack Overflow.
Y entonces encontrarás tu respuesta allí.
Éste es un poco más viejo, como lo vi antes.
Entonces en
2016.
Sí, normalmente deberías encontrar algo un poco más reciente.
como este aquí de 2020.
Pero sí, entonces aquí no lo estamos intentando.
para resolver un problema específico.
Solo estaba mencionando que muchas veces es una buena idea.
para buscar en Google estos mensajes de error aquí mismo.
Entonces, en este caso, realmente no está permitido.
para devolver más de un elemento.
Así que aquí estamos devolviendo el h1 y el p.
y eso no está permitido en React, así que simplemente elimínelo
y luego el error desaparecerá.
Otro consejo importante es trabajar siempre con ESLint.
Entonces ESLint está habilitado de forma predeterminada.
Por ejemplo, si haces esto,
como constante x = 'jonas'
y dale un guardado,
Entonces inmediatamente aparece esta advertencia aquí.
Entonces puedes desplazarte y te avisará.
que x se declara, pero su valor nunca se lee.
Y este es sólo uno de los innumerables ejemplos.
y situaciones en las que ESLint puede advertirle
que estás a punto de hacer algo
que se supone que no debes hacerlo.
Porque, si tienes una variable que no estás usando,
significa que probablemente en otro lugar
declaraste la variable incorrecta
que en realidad no quisiste,
¿bien?
Y por cierto, estos problemas,
También aparecen aquí abajo en esta pestaña Problemas.
Entonces esto también es muy útil aquí abajo.
Entonces, siempre que tengas algún problema como este
Entonces estas líneas amarillas debajo de parte de tu código,
Probablemente deberías comprobar lo que está pasando allí.
Ahora hablando aquí sobre estas pestañas aquí abajo
a veces la extensión Prettier deja de funcionar
por alguna razón.
Y cuando eso sucede
Es una buena idea venir aquí a esta pestaña Salida.
Y luego aquí puedes seleccionar
uno de estos procesos que se ejecuta dentro de su código VS.
Por ejemplo, como decía, Más Bonita.
Aquí parece que todo funciona bien.
pero a veces te mostrará un error aquí
y luego puedes intentar arreglar eso.
Y lo mismo ocurre con ESLint.
Entonces, si notas que ESLint
por alguna razón dejó de funcionar,
Puedes venir aquí y comprobar si hay algún problema.
Así que aquí incluso parece que hay algún problema.
Sí, hay un error aquí, pero bueno, todavía funciona.
Entonces sí, no necesitamos preocuparnos por eso en este caso.
¿bueno? Pero volvamos a nuestra terminal,
que es el que queremos abierto la mayor parte del tiempo.
Entonces, si todo parece correcto en tu código
y si hicieras todo lo que te dije
pero aún así tu código no funciona,
probablemente significa que tienes algún error en tu código
porque es diferente a aquel
que os muestro en el vídeo.
Y entonces, en ese caso, lo mejor que se puede hacer
es abrir el código final para cada uno de los proyectos,
entonces el que descargamos al principio
y luego simplemente intenta compararlo con mi código.
Y hacerlo debería permitirle
para encontrar el error que tienes en tu código.
Y hablando de errores,
De hecho, introduje un error aquí en esta parte de renderizado.
Entonces, la forma en que renderizamos antes de React 18
recuerda es este React.render,
pero en ninguna parte estamos contando aquí
dónde renderizar el componente de la aplicación.
Y nuevamente, necesitamos seleccionar ese elemento raíz.
y de hecho lo coloco aquí como segundo argumento.
Entonces, solo para arreglar esto aquí,
pero de nuevo no vas a escribir esto tú mismo
pero tal vez trabajes en una base de código más antigua en algún momento,
que utiliza una versión anterior de React.
Y así es como se representará ese proyecto.
el elemento raíz en su aplicación.
y por cierto,
Puedes ver qué versión de React estás usando aquí.
en la matriz de dependencias.
Y en este caso, estamos usando React 18.2.
O al menos lo soy.
Entonces, si estás viendo hasta aquí en el futuro
Entonces probablemente ya haya salido alguna otra versión.
Pero todo esto, de lo que estamos hablando aquí
por supuesto,
Se aplicará probablemente a la mayoría de las versiones futuras.
Y eso es todo.
Esa es la lista de consejos que tengo para ti.
para afrontar problemas que tarde o temprano llegarán
a medida que comienzas a escribir tus propias aplicaciones React,
e incluso mientras sigues este curso.