Video není dostupné.
Omlouváme se.
PRUEBA TÉCNICA de React para Junior y Trainee
Vložit
- čas přidán 16. 08. 2024
- ¡Acompáñanos en este emocionante viaje paso a paso mientras resolvemos una Prueba Técnica de React diseñada para Juniors y Trainees! En este tutorial en vivo con Midudev, aprenderás a crear un proyecto desde cero, aplicar buenas prácticas de desarrollo, y superar desafíos comunes que suelen aparecer en las pruebas técnicas de React. Desde la creación del proyecto hasta la refactorización y la implementación de Custom Hooks, cubrimos todo lo que necesitas saber. ¡No te pierdas esta oportunidad de mejorar tus habilidades en React y prepararte para futuras entrevistas!
¡Suscríbete y dale like para más contenido de desarrollo web!
▶ No te pierdas más directos en: / midudev
▶ Repositorio de pruebas técnicas: github.com/mid...
00:00:00 - Intro
00:03:49 - Creando Proyecto
00:07:08 - Enunciado
00:08:07 - Reutilizando código CSS
00:08:58 - Limpiar
00:10:05 - Semántica HTML
00:13:27 - Agregando Estilos
00:18:06 - Construyendo los Ítems
00:20:16 - Error de Jr. y Trainee
00:24:01 - Creando Interfaz
00:25:19 - Agregando Elementos a la Lista
00:30:22 - Estrategia 1
00:31:22 - Estrategia 2
00:33:56 - Probando...
00:34:29 - Preguntas de la Comunidad
00:37:00 - Eliminar Elemento
00:44:51 - Test
00:53:37 - Preguntas de la Comunidad 2
00:54:44 - Pregunta Típica de Entrevistas (End to End)
01:02:07 - Preguntas de la Comunidad 3
01:05:46 - Siguiendo con el Test (Formulario)
01:14:03 - Refactorización (Componentes y Más)
01:20:15 - Custom Hooks
01:22:58 - SEO
01:26:31 - Test de Hooks
01:32:55 - Actividades
01:33:54 - Deploy de la Prueba Técnica
Qué locura es lo que es capaz de hacer este hombre, cada que explica algo flipo en colores
Jajaja me pasa lo mismo, cada vídeo que hace de este tipo es una clase magistral. Un crack
Haz flipao tio joder!
Creo que es primera vez que veo un video en el que explican el uso del aria... no se si generalmente nadie lo utiliza o no se le da la importancia que merece, gracias Midu
eres un dios, estoy seguro que gracias a ti, mucha gente podrá conseguir trabajo como programador, y estoy seguro de que si me esfuerzo, yo también. muchas gracias por toda tu ayuda, eres un grande.
Fuaaa yo no le hago tanto al front pero cada vez q veo este tipo de videos entiendo todo re bien y me dan mas ganas de meterme en el mundo del front. Sigue así!!!
Midu, un saludo desde Cuba 😊 muchas gracias x darnos este contenido tan rico educacionalmente, estoy empezando en este mundo del desarrollo web y me viene de maravilla, y estoy seguro que a mucha otra gente también, seria muy interesante un proyecto parecido a este, tipo TO DO LIST pero guardando en una base de datos, pues no veo material de ese tipo en youtube, eres un grande❤
Saludos desde Cuba también desde Holguín, cómo vas? Yo llevo muy poco y me veo bien
@@saule.1595 llevo ya unos 6 meses y ahora en enero tengo una entrevista de trabajo, dale duro que es uno de los pocos trabajos que se paga bien aquí
Bro eres un tanke,1K de bendiciones!!!
Sos realmente una locura explicando
Midu, muchas gracias por tu contenido
increíble midu, me encantó todo la parte de los test, no pensaba que fuese tan fácil hacerlos.
Estaría genial pruebas técnicas de backend también.
Que fácil que explicas ❤
Excelente respuesta al porque si se deben hacer los TEST
Crack de Cracks el midu ✊, Excelente forma de enseñar parte de tus conocimientos. Mas videos Asi bro
Grande Midu!
¡Excelente. Muchas gracias Midu!
Gracias a ti!
Gracias Midu por el contenido! Todo de 10 🙌 ahora a mover las manitas
Gracias por tantos aportes.
el tema del test. Si yo lo hago manual, es decir, npm run dev... y agregar y borrar.. , tengo el mismo resultado. Veo si funciono o no. Lo vamos probando mientras vamos escribiendo el código. No tengo aun bien en claro, la funcionalidad del text, por lo menos en este caso.
1:16 jajajaja epa midu que pasó? mucha mala influencia por parte de Goncy me parece 😂
Muy buen contenido!
no era mas sencillo como otra estrategia del input, hacer el onChange, un useState y listo? probablemente me perdi la explicación, porque este genio explica todo.
Eres el mejor bro,
"Qué opinas de una variable?" 🤣🤣🤣 excelente contenido Midu! 🤓
Que bueno eres, gracias.
Sería genial que subieran pruebas semanales porque necesito practicas :)
"Lo mejor seria empezar con un contexto y un reducer" jajajaj epico min 20:32
Tengo una duda, por qué la función onSubmit no tiene un callback como sí lo tiene el onClick del botón eliminar?
Eres mi heroe❤ quiero ser como tu
¿Qué es eso que haces en la consola al inicio? eso de npm, cd live-coding y todo eso, ¿es necesario hacerlo siempre que vaya a iniciar un proyecto?
hola señor midu, una pregunta ,¿ se puede usar codigo de ejemplo de proyectos que haya echo en un una entrevista?
midu deberias hacer una prueba tecnica para angular, asi es un poco mas real el poner junior :)
Genial!
ese midu jaja, me encanta cuando se expresa de algo que no le gusta
la terminal del principio como se puede descargar y configurar para que sea tan comodo?
god midu!!!
jajajaja 45:20 "A ver el codigo lo esta haciendo el de QA o tu, bueno pues aprende", algo que yo diria
Otro error de junior no usar los hooks apropiados de react y omitir el uso de estos como useCallback
Me encanto el video, super bien explicado (como siempre), solo una duda me queda en el test, sin animo de ofender ni ser un pesado y dejando de lado el hecho de que es un ejemplo rapido, y es que al momento de eliminar el unico elemento de la lista y esperar encontrar el texto "No hay elementos en la lista.", esto es una buena practica? Me refiero a testear algo tan especifico en la interfaz, si se cambiase a "No hay elementos en la lista!" o cualquier minimo cambio haria fallar el test, con testear que la lista quede vacia no seria suficiente al estar la funcionalidad cumplida? Gracias desde ya, sos el 1 Miguel Duran Developer ❤
Hay diferentes estrategias a la hora de trabajar con textos y sus tests. Todos tienen cosas positivas y negativas. Desde un punto de vista purista, es normal que el test se rompa si la traducción cambia y no es suficiente con ver que no hay elementos, ya que la idea es simular cómo percibe el usuario la app.
Pero como digo hay diferentes estrategias con pros y contras, que puedes estudiar aquí: testing-library.com/docs/example-react-intl/#translated-components-testing-stategy
@@midulive te kiero mucho midudev
Que extensión usas para que te autocomplete en vscode ? Me sirve mucho
Github copilot (es de paga)
Git hub copilot, es de pago
es github copilot, si estas en la universidad github te lo regala por un año en el github students pack
No es una extensión, tenés que ir al json de configuración de vscode y activar el auto completado de javascript
T refieres a GitHub Copilot?
1:09:38 qué raro, hice debug y se agrega un solo hijo a la lista, pero me da error el test porque dice que regresó 3 hijos en lugar de 1... pero en el debug solo se ve 1 li... añadí otro input para añadir una etiqueta al item, vaya un tag simple de texto, y lo agregué en el test como input 2 y todo bien, solo esa parte que menciono me causó error.
y añadí otro item y dice que son 4 en lugar de 2...
A mi me pasa lo mismo, asumo que devuelve todos los nodos hijos de la lista(ul), así que lo modifiqué por: list.querySelectorAll('li').length.
que extensión usas para los iconos?
Hola. Si no me equivoco es Material Icons
Una prueba técnica no define un programador
Espera, lo de la funcion que llama a otra funcion no es lo mismo que crear la tipica funcion fuera donde el handleDelete recibe una (id) y dentro lo de siempre.. seteas el updated array y en el onclick solo haces esto {() => handleDelete(id)} y ya? lo que entiendo es que el solo esta sacando la llamada de la funcion "()=>" fuera, pero sin ningun beneficio, en mi opinion menos legible que el metodo clasico.
Prueba del orto....😂😂😂
Como que estudio del orto? jajajjaj
Morí de risa 🤣
ASJASJJASJASJASJASJAS un estudio del orto AJSASJAJAJj
A cómo hablas de a rato, te estás juntando con argentinis jaja el orto jajaja
una prueba de estudio del orto jajajajajjaa