Midu, sos un verdadero crack. No se que estaras haciendo ahora de tu vida pero se nota que programar y enseñar es lo tuyo. Un gusto haber clickeado tu video
Por si a alguien le surgió la misma duda que a mi, cuando se corre el useEffect, primero se ejecuta el clean up que pusimos en el return (osea, removeEventListener), y despues el efecto (de hecho en el video dice que el cleanup se ejecuta ANTES que el efecto), por eso cuando hacemos enabled=true el evento si se añade, porque primero se corre el removeEventListener, y despues el addEventListener
Midulive de verdad que es un placer disfrutar tus videos, son geniales y das un gran aporte a la comunidad, me has motivado mucho a seguir aprendiendo y tu manera de enseñar simplemente estupenda. Grande Crack 💻
Me recuerdas a esos que resuelven el cubo de Rubick en 6 segundos y a mi me lleva una semana... Qué rapidez!!! (y yo qué lento) Gracias por los cursos...
bro sos un crack la verdad, ojala llehgar a ser algun dia como vos, solo que no expliques todo tan rapido, se que hay personas que son muy cracks como vos, pero tambien hay juniors como yo que apenas andan aprendiendo react y que vayas tan rapido se dificulta un poco, pero igual seguis siendo un puto crack
Estoy muy agradecido por el curso, se que aprenderé mucho acá, pero por lo pronto siento que necesito aprender lo básico de react ya que esta sesión me esta costando un poco entenderla, pero volveré pronto
Hola Midu, te agradezco muchísimo por todo el contenido y por compartir tus conocimientos. Empecé a ver los directos de Twitch acerca del curso de React, todo me pareció súper bien estructurado cuando hablaste del contenido del curso, pero en algún momento (creo que fue cuando fuiste a la conferencia de Chile) se empezó a desordenar un poco lo del curso y ya eran algunas cosas como random acerca de React y pues la verdad le perdí el hilo 😓, de pronto es solo mi percepción pero así me pareció. Gracias de nuevo por tu tiempo y lo que haces por la comunidad. Sería genial que el curso sí fuese como en el orden que lo planteaste en un principio 😊
Por si hay gente que tiene problemas con standard. Hay una extensión para vscode que funciona bien (StandardJS - JavaScript Standard Style ) , al menos en mi caso con la de ESLint no me funcionaba.
@@SneijderLV tienes que isntalar en general eslint - npm install -g eslint - y luego configurar la extension en - settings.json - con lo siguiente y ahi me funciono :) espero que te sirva "[javascriptreact]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" // aca elegis como preedeterminado la extesion }, "editor.codeActionsOnSave": { "source.fixAll.eslint": true // aca le decis que guar y arregle :) }
Curso buenisimo. Para los que os ocurra el mismo problema que a mi con el ESLINT debeis de borrar el archvio .eslintrc.cjs que esta en cada proyecto para que no tenga normas propias y coja las generales. O asignarselo en el propio archvio en extends : [ ''standard', ... ... ] Espero que a alguien le ayude ya que llevo un buen rato para que me fucnione con el estandard
Después del 1 video y 40 min de este video y replicar el código y consulta a una IA las dudas comienzo a entender el useState jajaja! muy útil el video! me doy cuenta lo oxidado que estoy para la lógica de programación, pero es la sensación que da siempre un video que tiene muchas horas de trabajo por detrás que no se ven, un día deberías hacer un video mostrando todo el proceso de desarrollo desde la idea inicial, la investigación, etc. creo que tendría el efecto de mostrar todo el proceso que es la programación (supongo que igual daría para mas de un video, pero reflejaría lo que es el proceso de trabajar en programación, como a partir de una idea viene un proceso de investigación y desmenuzar esa idea en los componentes primordiales que posiblemente como programador los hagas en forma automática, por ejemplo una vez que sabes andar en bicicleta no piensas en el proceso y el ensayo y error).
Acabo de hacer mi primer despliegue contigo miduuuu! Subi el tic-tac-toe para que mi hijo juego en su celular! Muchas gracias por todo lo que has enseñado hasta el momento! A la siguiente clase!
Lo primero muchas gracias por subir estos videos, están muy bien. Creo recordar que este video antes tenía marcas de tiempo, eran muy útiles porque te permiten ir directamente a la parte del video que quieres repasar. ¿Las podéis añadir otra vez por favor? Gracias.
Oye midu, lo que dices en el minuto 33:13 creo que no es del todo correcto. La actualización del estado no es asíncrona. Lo que pasa es que la actualización primero se hace sobre una variable interna de react que luego se usa para actualizar la variable de estado del componente cuando se vuelve a renderizar. Es decir que el setWinner se ejecuta de inmediato pero no afecta directamente la variable de estado del componente.
Excelente todos tus cursos! viendo la capacidad que tienes como desarrollador esperare con ansias algun dia algun curso de react.js explicando cada detalle de como funcionan las cosas por adentro. Alguna clase magistral explicando que pasa en cada cosa under the hook! Saludos y gracias por todo!
Yo cuando activo el estado del mouseFollow (enabled, en tu vídeo) me desaparece el cursor y se mueve el div que hace de círculo, pero también me inhabilita los clicks en el botón, así que no puedo volver a desactivar el estado :( EDIT: Ya está resuelto. Si a alguien le pasa es porque no puso los mismos estilos que midu. Él ha usado pointerEvents: 'none' para que los clicks atraviesen el div del círculo que queda justo debajo del cursor, por tanto si no quitas los pointerEvents (pointer-events en css) vas a clicar sobre ese div (el círculo que hace como de cursor) y no sobre el botón que queda justo debajo del div. Aprovecho el comentario para decir que eres un maestro, Midu. Estoy aprendiendo muchísimo contigo y con tus vídeos :D Un saludo desde Valencia (España) :D xD
Hola Midu! En la parte de configurar linter para monorepo si añado las líneas de eslintConfig me tira este error en el Output: "Error: Plugin "react" was conflicted between "projects\01-test\.eslintrc.cjs » plugin:react/jsx-runtime" and "package.json » ./node_modules/standard/eslintrc.json » eslint-config-standard-jsx" Sin embargo si no pongo nada el linter parece que funciona aunque no me dice de corregir los import con comillas "", otras cosas sí. Muchas gracias por estos cursos de verdad
Por si a alguien más le pasa, para solucionarlo dentro del proyecto borrad el .eslintrc.cjs y quitad las dependencias del eslint del package.json y ya el linter debería funcionarte como en el vídeo
muchas gracias midu!!! muy guay ambos proyectos aunque el tres en ralla pensaba que seria más facil y cuesta seguirte jeje, pero bueno, me lo remiro o lo practico en código probando un multiplayer o algo :)
muy buen curso midu 🙌🏼 aplicando tu explicación de useState lo apliqué a un proyecto de api y el login es un componente, el logout , intento que cambie el estado dentro de App pero no cambia el button a logout , la sesion se guarda con redux
Buenas buenas... las circunstancias me han obligado ponerme a estudiar un poco de React y agradezco haber encontrado este canal... Dicho esto, desde que se vio lo de la función cleanup en el return del useEffect hasta el minuto 2:03:14 he estado algo confundido... y es que al estar dicha función justo a lo último, uno supone que primero se evalúa el if (enabled) y eventualmente se activa el addEventListener, y luego se desactiva en el return, lo cual no tendría sentido porque quedaría siempre el addEventListener desactivado. Pero es al revés, primero se retorna la función cleanup y luego se ejecuta lo que está arriba, lo cual me obliga a profundizar un poco mas en el asunto. No obstante, me sacado de la confusion justo en este instante. Gracias!!
por un momento analizé lo complejo que iba a ser evitar que se sobreescriba el array al presionar sobre una casilla ya marcada y viene midu y me tira un "if(board[index]) return" por toda la cara
no entiendo este codigo 39:33 por qué el "winner !==null" al ser true renderiza lo que esta despues del &&? o a que se refiere la linea entera? como se llama este tema para poder investigarlo? es que no entiendo porque un AND haria que se renderice algo es que pense que pudiera ser una expresion ternaria, pero su estructura inclue un "?" y ":"
ok, investigando encotre que si en una comparacion logica todo da verdadero usando &&, retorna el elemento de hasta la derecha. Y como las llaves renderizan el codigo js que es retornado entonces renderiza lo que hay dentro del parentesis no sabia esa propiedad del &&, pero no borrare el comentario por si alguien tiene la misma duda
El operador logico AND (&&) da verdadero si todo es verdadero, si por ejemplo tienes "if (a > 5 && b > 5 )" , si la primera condicion no se cumple no checa la 2da porque a fin de cuentas el resultado ya seria falso. En este caso, se usa esa condicion de "winner !== null' porque si da True significa que hay un ganador y pasara a la siguiente parte de la condicion que en ese caso seria la renderizacion de un una serie de etiquetas (incluso pueden ser componentes hechos por ti), esa sintaxis se usa mucho para renderizar componentes condicionalmente.
Instalé la extensión de ESLint en VS Code y me han salido errores del tipo: 'winner' is missing in props validation eslint (react/prop-types), sucedió con winner, resetGame, children, isSelected, updateBoard, index que son los parámetros que reciben los componentes de WinnerModal y el de Square. Y ni si quiera marcó los errores de usar comillas dobles en vez de simples. ¿Alguien me puede explicar a qué se debe?
Una pregunta. Aquí midu normalmente utiliza function expressions para las funciones que añaden dinamismo al proyecto o para componentes secundarios como es , y sólo utiliza functions declarations para el componente principal. ¿Esto algo estándar en React, buenas prácticas o simplemente una preferencia de midu? Gracias de antemano por sus respuestas y gracias a midudev por todo su contenido que tanto ayuda a los que estamos aprendiendo :)
Explicas excesivamente rápido, dar pausas a cada rato influye en el flujo de aprendizaje de las personas, te recomiendo un leve más lento, pues, gana lo que dices a lo que haces, y aunque no es confuso y está bien explicado, no permite seguirte si no es con pausa tras pausa tras pausa.
Increíble que vi un curso de React pago y nunca mencionaron que podía o debería limpiar el efecto una vez se actualice una dependencia/se desmonte un componente.
Chicos, en el TIC TAC TOE hay un bug, donde si termina la partida y reseteas la página, puedes hacer movimientos extras y seguir llenando los círculos de uno en uno. Para eso, deben crear otro estado pero esta vez del winner.
así es yo lo hice asi const [winner, setWinner] = useState(() => { const winnerStorage = window.localStorage.getItem('winner') return JSON.parse(winnerStorage) ?? null })
Alguien sabe como hace para que le aparezcan previsualizaciones del console.log al lado de las sentencias? es por el copilot o es otra extension? esta muy buena!
Excelente curso midu, pero tnego una consulta, no se si es por eslinter o que, pero me sale un error en el proyecto anterior, en el componente de twitterFollowCard, me dice "userName, children y initialIsFollowing is missing in props validation" eso es que debo agregarle tipado? (pregunto es porque no me afecta al correr el código)
Por si alguien quiere que desaparezca el círculo (mouse follower) mientras el botón esté inactivo, pueden agregar la ternaria en el style del div: display: enabled ? 'block' : 'none'
Hola, no me quedé precisamente atorado pero sí tengo una situación y es que no puedo visualizar las "x" y las "o" en el tableto, como aparece en el min 23:13. Lo demás me funciona, para cuando detecta un ganador etc, solo ese problemilla tengo, no sé qué hice mal jajaja, alguien podría ayudarme?
Midu vengo de vue, y en vue existe un concepto llamado EMIT en el cual puedes emitir eventos desde un componente hijo hacia el padre, quisiera saber si en react existe algo parecido a esto y asi no pasar funciones como props.
Minuto 29, yo lo resolvería así rápido y corriendo sin pensar demasiado de este manera (pero seguramente exista alguna mejor): horizontales if (n == 0 || n % 6 == 0) { if BOARD[n] = BOARD[n+1] AND BOARD[n+2] = BOARD[n+1] EXIT; } diagonales if (n == 0 || n == 2) { // IF n = 0 if BOARD[n] == BOARD[n+4] AND BOARD[n+4] == BOARD[n+8] EXIT // If n = 2 else if BOARD[n] == BOARD[4] AND BOARD[6] = BOARD[4] EXIT
por que el json a veces se ve asi var nombreVariable ={ campo1: 'text',campo2: 5} y a veces se pone comillas en los nombres de los campos var nombreVariable ={ "campo1": 'text',"campo2": 5}
👏🏻👏🏻Genial video Midu, como siempre! ❓❓ PREGUNTA: 1:34:00 se puede lograr el mismo efecto para limpiar el *window.addEventListener* del puntero usando un *else* o un *else if(!enabled)* en vez de usar un *return () => window.removeEventListener* en el useEffect?
Excelente Midu!!, Solo... como defines el orden las funciones dentro del cuerpo de la App ?, tu las dejaste en este orden: 1. const resetGame = () => {} 2. const updateBoard = (index) => {} . En que te basas para ordenar las funciones??
@@josestudyingenglish-vk6ie muchas gracias por la respuesta hermano, eso del orden me daba un poco de ruido, por lo que veo se pueden ordenar de la forma que se quiera
Hola amigo muy buen video, solo que me surgió la siguiente pregunta, cuales son las diferencias entre export function y export const?, siguiendo mi lógica en base a este escenario, yo creo que se define export function a lo que cambia de manera recurrente dentro del componente y del lado del const es por que no habrá cambios significativos, en tu experiencia es correcto esto
A ver si alguien me puede responder esta pregunta, para el 03-mouse-follower ¿Por qué creamos la función handlemove dentro del useEffect en lugar de fuera? Lo que estamos haciendo no seria volver a construir la función cada vez que se cambia el valor de enable y por lo tanto¿ no seria mejor crearla fuera?
esa es una muy buena pregunta, la verdad nose, pero tiene sentido que cada vez que se ejecuta el useEffect se ejecuta nuevamente el handleMove, toncs puede ser que sea mejor que este afuera ... psdt: lo acabo de probar y funciona igual xd, debe ser mejor en rendimiento
Midu, sos un verdadero crack. No se que estaras haciendo ahora de tu vida pero se nota que programar y enseñar es lo tuyo. Un gusto haber clickeado tu video
Tercera vez que veo el video... Cada vez aprendo mas y mas. Gracias Midu por todo el aporte. Aunque me resulte muy difícil voy a seguir practicando
te re costo si lo viste 3 veces
@@NehuenDeveloper si narigon, no lees?
Es increíble que siempre aprendo algo nuevo, me llevo siempre buenas prácticas y tips que te abren la cabeza en tus videos.
Gracias midu por hacer todo esto gratis, cada que veo tus videos aprendo algo nuevo y me motivas aun más.
Woow qué manera de explicar y dominio de tema. Dios te bendiga. Sigue así Midu. Saludos.
Cada segundo de este video vale oro. He aprendido muchas buenas prácticas GRACIAS MIDU!
Por si a alguien le surgió la misma duda que a mi, cuando se corre el useEffect, primero se ejecuta el clean up que pusimos en el return (osea, removeEventListener), y despues el efecto (de hecho en el video dice que el cleanup se ejecuta ANTES que el efecto), por eso cuando hacemos enabled=true el evento si se añade, porque primero se corre el removeEventListener, y despues el addEventListener
Tuve la misma duda me toco poner console logs por todas partes para saber el orden de ejecucion XD
Midulive de verdad que es un placer disfrutar tus videos, son geniales y das un gran aporte a la comunidad, me has motivado mucho a seguir aprendiendo y tu manera de enseñar simplemente estupenda. Grande Crack 💻
Me recuerdas a esos que resuelven el cubo de Rubick en 6 segundos y a mi me lleva una semana... Qué rapidez!!! (y yo qué lento)
Gracias por los cursos...
bro sos un crack la verdad, ojala llehgar a ser algun dia como vos, solo que no expliques todo tan rapido, se que hay personas que son muy cracks como vos, pero tambien hay juniors como yo que apenas andan aprendiendo react y que vayas tan rapido se dificulta un poco, pero igual seguis siendo un puto crack
Estoy muy agradecido por el curso, se que aprenderé mucho acá, pero por lo pronto siento que necesito aprender lo básico de react ya que esta sesión me esta costando un poco entenderla, pero volveré pronto
Hola Midu, te agradezco muchísimo por todo el contenido y por compartir tus conocimientos. Empecé a ver los directos de Twitch acerca del curso de React, todo me pareció súper bien estructurado cuando hablaste del contenido del curso, pero en algún momento (creo que fue cuando fuiste a la conferencia de Chile) se empezó a desordenar un poco lo del curso y ya eran algunas cosas como random acerca de React y pues la verdad le perdí el hilo 😓, de pronto es solo mi percepción pero así me pareció. Gracias de nuevo por tu tiempo y lo que haces por la comunidad. Sería genial que el curso sí fuese como en el orden que lo planteaste en un principio 😊
Estoy de acuerdo contigo!!
Eres increible Midu, millones de gracias siempre por todo el trabajo que haces por la comunidad y por compartir este gran conocimiento!!
En colombia le llamamos triki midu, me encanta tu contenido esta super genial! de verdad siento que contigo se hace fácil aprender
Por si hay gente que tiene problemas con standard. Hay una extensión para vscode que funciona bien (StandardJS - JavaScript Standard Style
) , al menos en mi caso con la de ESLint no me funcionaba.
No te funcionaba? Lo pudiste resolver? Y como podes hacer el autoformateado
@@SneijderLV tienes que isntalar en general eslint - npm install -g eslint - y luego configurar la extension en - settings.json - con lo siguiente y ahi me funciono :) espero que te sirva
"[javascriptreact]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint" // aca elegis como preedeterminado la extesion
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true // aca le decis que guar y arregle :)
}
sos el mejor profesor que existe en youtube, valen oro tus cursos
Excelente curso, me encanto, aprendi mucho mas que en muchos curso de Udemy
Curso buenisimo.
Para los que os ocurra el mismo problema que a mi con el ESLINT debeis de borrar el archvio .eslintrc.cjs que esta en cada proyecto para que no tenga normas propias y coja las generales.
O asignarselo en el propio archvio en extends : [
''standard',
...
...
]
Espero que a alguien le ayude ya que llevo un buen rato para que me fucnione con el estandard
crack! soluciona el problema
Deseando tener todas las clases disponibles del curso!!!!
Después del 1 video y 40 min de este video y replicar el código y consulta a una IA las dudas comienzo a entender el useState jajaja! muy útil el video! me doy cuenta lo oxidado que estoy para la lógica de programación, pero es la sensación que da siempre un video que tiene muchas horas de trabajo por detrás que no se ven, un día deberías hacer un video mostrando todo el proceso de desarrollo desde la idea inicial, la investigación, etc. creo que tendría el efecto de mostrar todo el proceso que es la programación (supongo que igual daría para mas de un video, pero reflejaría lo que es el proceso de trabajar en programación, como a partir de una idea viene un proceso de investigación y desmenuzar esa idea en los componentes primordiales que posiblemente como programador los hagas en forma automática, por ejemplo una vez que sabes andar en bicicleta no piensas en el proceso y el ensayo y error).
Será midulive mi mentor?... Espro disfrutar de este canal y aprender un montón de cosas nuevas! A POR ELLO!!!!
Que bien explicas Midu, es una locura! Gracias
que gran video no tiene desperdicio #Midu!! eternas graciasss!! sdos desde Argentina, Bs As.!!
Gracias, Gaby!
@@midulive no, gracias a vos Midu te mereces todos los éxitos q te pasan y más hno! Gran Instructor de la programación! 👏💪
Acabo de hacer mi primer despliegue contigo miduuuu! Subi el tic-tac-toe para que mi hijo juego en su celular! Muchas gracias por todo lo que has enseñado hasta el momento! A la siguiente clase!
Qué grande. ¡Felicidades! 🚀
Buenisimo justo lo que andaba necesitando!
Me alegro que te sirva!
Lo primero muchas gracias por subir estos videos, están muy bien. Creo recordar que este video antes tenía marcas de tiempo, eran muy útiles porque te permiten ir directamente a la parte del video que quieres repasar. ¿Las podéis añadir otra vez por favor? Gracias.
Esta clase se acompaña con unos mates. Gracias Midu
Ya lo tengo en mi lista de videos que debo ver bien con calmita jejeje. Me fascina! Se que aprenderé mucho así como aprendí con el otro.
Grande Midu!! Gran contenido y gran persona.
Excelente midu , el curso va súper bien 🎉
siempre me llevo algo nuevo de tus videos midu, sos crack gracias!
Oye midu, lo que dices en el minuto 33:13 creo que no es del todo correcto. La actualización del estado no es asíncrona. Lo que pasa es que la actualización primero se hace sobre una variable interna de react que luego se usa para actualizar la variable de estado del componente cuando se vuelve a renderizar. Es decir que el setWinner se ejecuta de inmediato pero no afecta directamente la variable de estado del componente.
Exelente video, muchas gracias midu.
A ti por comentar!!!
Gracias midu, sos un héroe!
Que excelente segunda parte de React maestro !!!!
Impresionante tu contenido midu!!! Gracias por compartir
Excelente todos tus cursos! viendo la capacidad que tienes como desarrollador esperare con ansias algun dia algun curso de react.js explicando cada detalle de como funcionan las cosas por adentro. Alguna clase magistral explicando que pasa en cada cosa under the hook! Saludos y gracias por todo!
de tanto escucharte ya hablo moodGallego miduuuu :D
genio, buen video y muy buenos los proyectos creados
2 meses mas de videos asi, y salgo sindo alto dev😎, gracias miduDios!!
Jajajajaja y mucha practica!!
Yo cuando activo el estado del mouseFollow (enabled, en tu vídeo) me desaparece el cursor y se mueve el div que hace de círculo, pero también me inhabilita los clicks en el botón, así que no puedo volver a desactivar el estado :(
EDIT: Ya está resuelto. Si a alguien le pasa es porque no puso los mismos estilos que midu. Él ha usado pointerEvents: 'none' para que los clicks atraviesen el div del círculo que queda justo debajo del cursor, por tanto si no quitas los pointerEvents (pointer-events en css) vas a clicar sobre ese div (el círculo que hace como de cursor) y no sobre el botón que queda justo debajo del div.
Aprovecho el comentario para decir que eres un maestro, Midu. Estoy aprendiendo muchísimo contigo y con tus vídeos :D
Un saludo desde Valencia (España) :D xD
Hola Midu! En la parte de configurar linter para monorepo si añado las líneas de eslintConfig me tira este error en el Output: "Error: Plugin "react" was conflicted between "projects\01-test\.eslintrc.cjs » plugin:react/jsx-runtime" and "package.json » ./node_modules/standard/eslintrc.json » eslint-config-standard-jsx" Sin embargo si no pongo nada el linter parece que funciona aunque no me dice de corregir los import con comillas "", otras cosas sí. Muchas gracias por estos cursos de verdad
Por si a alguien más le pasa, para solucionarlo dentro del proyecto borrad el .eslintrc.cjs y quitad las dependencias del eslint del package.json y ya el linter debería funcionarte como en el vídeo
@@nemmmu Gracias :D
@@nemmmu muchas gracias, este comentario me salvo la vida jaja
muchas gracias midu!!! muy guay ambos proyectos aunque el tres en ralla pensaba que seria más facil y cuesta seguirte jeje, pero bueno, me lo remiro o lo practico en código probando un multiplayer o algo :)
muy buen curso midu 🙌🏼 aplicando tu explicación de useState lo apliqué a un proyecto de api y el login es un componente, el logout , intento que cambie el estado dentro de App pero no cambia el button a logout , la sesion se guarda con redux
Midu, que extensión estas usando para el auto generado de código ??
Buenas buenas... las circunstancias me han obligado ponerme a estudiar un poco de React y agradezco haber encontrado este canal... Dicho esto, desde que se vio lo de la función cleanup en el return del useEffect hasta el minuto 2:03:14 he estado algo confundido... y es que al estar dicha función justo a lo último, uno supone que primero se evalúa el if (enabled) y eventualmente se activa el addEventListener, y luego se desactiva en el return, lo cual no tendría sentido porque quedaría siempre el addEventListener desactivado. Pero es al revés, primero se retorna la función cleanup y luego se ejecuta lo que está arriba, lo cual me obliga a profundizar un poco mas en el asunto. No obstante, me sacado de la confusion justo en este instante. Gracias!!
Excelente contenido como siempre Midu!
por un momento analizé lo complejo que iba a ser evitar que se sobreescriba el array al presionar sobre una casilla ya marcada y viene midu y me tira un "if(board[index]) return" por toda la cara
muy buen video, me ayudo a entender el hook UseEffect, saludos Midu!
no entiendo este codigo 39:33
por qué el "winner !==null" al ser true renderiza lo que esta despues del &&? o a que se refiere la linea entera? como se llama este tema para poder investigarlo? es que no entiendo porque un AND haria que se renderice algo
es que pense que pudiera ser una expresion ternaria, pero su estructura inclue un "?" y ":"
ok, investigando encotre que si en una comparacion logica todo da verdadero usando &&, retorna el elemento de hasta la derecha. Y como las llaves renderizan el codigo js que es retornado entonces renderiza lo que hay dentro del parentesis
no sabia esa propiedad del &&, pero no borrare el comentario por si alguien tiene la misma duda
El operador logico AND (&&) da verdadero si todo es verdadero, si por ejemplo tienes "if (a > 5 && b > 5 )" , si la primera condicion no se cumple no checa la 2da porque a fin de cuentas el resultado ya seria falso. En este caso, se usa esa condicion de "winner !== null' porque si da True significa que hay un ganador y pasara a la siguiente parte de la condicion que en ese caso seria la renderizacion de un una serie de etiquetas (incluso pueden ser componentes hechos por ti), esa sintaxis se usa mucho para renderizar componentes condicionalmente.
Gracias por tanto, Midu! 💙
cual es la extencion que usa para autocompletar su codigo?
Hola cómo están, que extensión usas para el auto completado por favor ? Ese auto completado que predice más o menos lo que debes hacer
Instalé la extensión de ESLint en VS Code y me han salido errores del tipo: 'winner' is missing in props validation eslint (react/prop-types), sucedió con winner, resetGame, children, isSelected, updateBoard, index que son los parámetros que reciben los componentes de WinnerModal y el de Square. Y ni si quiera marcó los errores de usar comillas dobles en vez de simples.
¿Alguien me puede explicar a qué se debe?
Una consulta como te aparece las sugerencias, tienes alguna extensión o alguna configuración?
github copilot
Midu: Es un hechizo sencillo pero inquebrantable. XD 26:37
Una pregunta. Aquí midu normalmente utiliza function expressions para las funciones que añaden dinamismo al proyecto o para componentes secundarios como es , y sólo utiliza functions declarations para el componente principal.
¿Esto algo estándar en React, buenas prácticas o simplemente una preferencia de midu?
Gracias de antemano por sus respuestas y gracias a midudev por todo su contenido que tanto ayuda a los que estamos aprendiendo :)
Es como si midudev hubiese escrito la documentación de React 😎🤓
Excelente curso, midu crees que crear un datatable es mejor hacerlo desde cero con React o recomiendas una librería externa para ello?
Explicas excesivamente rápido, dar pausas a cada rato influye en el flujo de aprendizaje de las personas, te recomiendo un leve más lento, pues, gana lo que dices a lo que haces, y aunque no es confuso y está bien explicado, no permite seguirte si no es con pausa tras pausa tras pausa.
Increíble que vi un curso de React pago y nunca mencionaron que podía o debería limpiar el efecto una vez se actualice una dependencia/se desmonte un componente.
Buenas midu, como pusiste los iconos 'X' y 'O'?
Chicos, en el TIC TAC TOE hay un bug, donde si termina la partida y reseteas la página, puedes hacer movimientos extras y seguir llenando los círculos de uno en uno. Para eso, deben crear otro estado pero esta vez del winner.
así es yo lo hice asi const [winner, setWinner] = useState(() => {
const winnerStorage = window.localStorage.getItem('winner')
return JSON.parse(winnerStorage) ?? null
})
Hola una pregunta que plugin usas para que te agregue código,, te muestra una solución,, como se llama ese plugin bro
Alguien sabe como hace para que le aparezcan previsualizaciones del console.log al lado de las sentencias? es por el copilot o es otra extension? esta muy buena!
Console Ninja es la extensión
@@midulive Gracias!!
Excelente curso midu, pero tnego una consulta, no se si es por eslinter o que, pero me sale un error en el proyecto anterior, en el componente de twitterFollowCard, me dice "userName, children y initialIsFollowing is missing in props validation" eso es que debo agregarle tipado? (pregunto es porque no me afecta al correr el código)
Hola, gracias por el curso, me genero una duda con las clases cell y cell__content, estas clases css vienen por defecto con react?
Por si alguien quiere que desaparezca el círculo (mouse follower) mientras el botón esté inactivo, pueden agregar la ternaria en el style del div:
display: enabled ? 'block' : 'none'
Hola, no me quedé precisamente atorado pero sí tengo una situación y es que no puedo visualizar las "x" y las "o" en el tableto, como aparece en el min 23:13. Lo demás me funciona, para cuando detecta un ganador etc, solo ese problemilla tengo, no sé qué hice mal jajaja, alguien podría ayudarme?
Hola! Cual es la diferencia en como llamo a la funcion:
handleClose()}>cancelar
cancelar
Gracias de antemano.
se puede complementar este curso con tu anterior curso de react? o ese ya queda desactualizado ?
Buenos dias @midulive, como se llama el plugin de VS que utilizas para que se vaya autocompletando o sugiriendo el code ?
GitHub Copilot
@@midulive Thanks!
Me sumo a la pregunta, tiene que ser el copilot y es de pago
@@MacacoBellaco Gracias broth
Eres el mejor miduGod! 🎉
Como se llama la extencion que le ayuda a autocompletar codigo? gracias
Github copilot pero es de paga
Me encanto el intro en argentino.
Sencillamente, excelente
Necesito saber cuales son las extensiones que este hombre tiene instalado en el visual PORFAVOR
Midu vengo de vue, y en vue existe un concepto llamado EMIT en el cual puedes emitir eventos desde un componente hijo hacia el padre, quisiera saber si en react existe algo parecido a esto y asi no pasar funciones como props.
Minuto 29, yo lo resolvería así rápido y corriendo sin pensar demasiado de este manera (pero seguramente exista alguna mejor):
horizontales
if (n == 0 || n % 6 == 0) {
if BOARD[n] = BOARD[n+1] AND BOARD[n+2] = BOARD[n+1] EXIT;
}
diagonales
if (n == 0 || n == 2) {
// IF n = 0
if BOARD[n] == BOARD[n+4] AND BOARD[n+4] == BOARD[n+8]
EXIT
// If n = 2
else if BOARD[n] == BOARD[4] AND BOARD[6] = BOARD[4]
EXIT
19:16 le pasa la pistola para que el componente la dispare
Que videaso Midu 😍😍
Gracias, Luis! 🤗
por que el json a veces se ve asi
var nombreVariable ={ campo1: 'text',campo2: 5}
y a veces se pone comillas en los nombres de los campos
var nombreVariable ={ "campo1": 'text',"campo2": 5}
Sólo lo segundo es json, lo primero en realidad es un objeto
👏🏻👏🏻Genial video Midu, como siempre! ❓❓ PREGUNTA: 1:34:00 se puede lograr el mismo efecto para limpiar el *window.addEventListener* del puntero usando un *else* o un *else if(!enabled)* en vez de usar un *return () => window.removeEventListener* en el useEffect?
Excelente Midu!!, Solo... como defines el orden las funciones dentro del cuerpo de la App ?, tu las dejaste en este orden:
1. const resetGame = () => {}
2. const updateBoard = (index) => {} .
En que te basas para ordenar las funciones??
el orden no tiene nada que ver bro ya que se llaman con un evento.
y no tienen nada que ver la una con la otra
@@josestudyingenglish-vk6ie muchas gracias por la respuesta hermano, eso del orden me daba un poco de ruido, por lo que veo se pueden ordenar de la forma que se quiera
El problema del console log estaría pasando con el confeti?, se muestra un poco antes de que aparezca el último símbolo del ganador
Gracias por el video!!! Saludos
Como haces para que salga el texto de los errores al lado en rojito, que extensión usas?
Code Runner se llama la extensión de VS
Mi consola de visual estudio code no me ejecuta archivos JS
HELP
01:00
españa: tic-tac-toe
latam: ta-te-ti
Muchísimas gracias miduu :).
A ti por comentar, Diego!
Esperaré aver q tal😊
¡Gracias!
A ti por el super thanks!!!
Hola amigo muy buen video, solo que me surgió la siguiente pregunta, cuales son las diferencias entre export function y export const?, siguiendo mi lógica en base a este escenario, yo creo que se define export function a lo que cambia de manera recurrente dentro del componente y del lado del const es por que no habrá cambios significativos, en tu experiencia es correcto esto
Bro podrías compartir las extensiones que usas en visual studio? muchos te lo agradeceríamos a como te agradecemos mil por estos cursos.
midu, faltó un memorize con sonidos, cuándo ! gracias por compartir conocimiento !
que nivel de expertiz se debe tener para hacer esto solo?
por que a mi no me salen emojis?
A mi tampoco me salen
grande midu, muchas gracias
pregunta, seria una buena opcion usar Redux para el store no?
A ver si alguien me puede responder esta pregunta, para el 03-mouse-follower
¿Por qué creamos la función handlemove dentro del useEffect en lugar de fuera?
Lo que estamos haciendo no seria volver a construir la función cada vez que se cambia el valor de enable y por lo tanto¿ no seria mejor crearla fuera?
esa es una muy buena pregunta, la verdad nose, pero tiene sentido que cada vez que se ejecuta el useEffect se ejecuta nuevamente el handleMove, toncs puede ser que sea mejor que este afuera ... psdt: lo acabo de probar y funciona igual xd, debe ser mejor en rendimiento