Video není dostupné.
Omlouváme se.
¡Resuelvo Prueba Técnica de React para Juniors y Trainee!
Vložit
- čas přidán 16. 08. 2024
- Si vas a aplicar a un trabajo de programador que use React, tienes que hacer y practicar esta prueba técnica.
Es muy común que te pidan hacer código asíncrono y ver cómo manejas estados que dependen unos de otros.
Esta prueba técnica es sencilla y está pensada para Juniors y Trainees.
🔗 Repositorio con todo el código:
github.com/mid...
Segmentos
00:00 - Introducción
04:15 - Enunciado de la prueba técnica
08:30 - Iniciamos el proyecto
11:25 - Instalando dependencias básicas
13:30 - Punto de entrada de nuestra aplicación
15:00 - JSX
16:20 - ¡Instala el linter! Es un momento
18:50 - Crear el componente React
20:30 - Crear nuestro primer estado
24:20 - Estrategia al afrontar la prueba y las APIs
30:35 - Preguntas del chat
37:25 - Seguimos con el segundo enunciado
43:45 - Sobre usar console.log en entrevistas
49:30 - Cuando te piden más cosas en la entrevista...
▶ No te pierdas más directos en: / midudev
Esto tiene mas valor que myxhas horas de cursos de pago. Es un alivio, un milagro y una bendicion que saques contenido como este
Como me motiva ver este tipo de videos y saber y entender la mayoría de las cosas, cuando hace solo un par de meses me sonaba todo a chino, muchas gracias a ti y a toda la comunidad ❤
Si hay alguien haciendo esto en 2024, que sepan que la api de cataas cambió, y ahora en el json especificado no incluye una url, para usar la imagen usen la url sin el json=true
A mi me sigue sin funcionar ¿? ¿?
@@IsaacGFlores lo siento compi, como dice midu, la documentación tiene respuestas
Midu, increible curso. La vocacion de profesor se te nota a leguas. GRACIAS!
Cuando sea grande quiero ser como tú.
Gracias por tu contenido, yo me acostumbré a usar Axios ahora usaré fetch para que no caiga en la trampa.
Eres un crack midu al finalizar el video parece que continuarás haciendo cosillas a la prueba en donde puedo ver el video completo, eres el mejor
Ya he exprimido bastante los dos primeros videos, exprimido lo que se pueda en 3 dias, que no es mucho, pero es una pasada ir aprendiendo contigo Midudev, una lastima que ni si quiera sepas ni vayas a saber quien o como soy, y tu para mi eres una persona muy muy muy importante, mil millones de gracias tio es increible lo que estoy aprendiendo no tiene sentido y la ilusion que tengo y las ganas con todas la horas que lelvo ya encima... todo el curso de node entero, todo el de css, html, ahora esto, mongo sql... te debo muchiisimo incalculable en dinero y valor, mil millones de gracias midu!!! veo tu cara unas 5h al dia LOL, y asi llevo meses y lo que me queda hehe
¿Cómo le explico a este tipo, lo invaluable de cada segundo de video que genera?, muchísimas gracias por el contenido gratuito, excelente y de calidad
apoyando su canal, una suscripción, donación, etc
tal cual, Midu explicó que dejó su trabajo estable para dedicarse a esto, así que necesita ser reconocido por su labor y ganar $$$ con lo que está haciendo ahora, que nos ayuda mucho a aprender
Me siento bendecido por haber encontrado tu canal, estoy dentro de un bootcamp y a 15 días de empezar react, la verdad no pude entender mucho porque no se nada de react pero si se mucho JavaScript, pero dare todo de mi para ser un crack en esto
Qué tipo de prueba te pusieron para entrar? Yo he hecho 3 veces una prueba de lógica por medio de Codility pero no la he pasado, hace dos días hice la oportunidad 4, aún no me dan resultados.
Que gran video midu!!!, Yo pensando que siempre tendría que saber cosas mucho más complejas y al ver este tipo de pruebas me siento más preparado!!
Buenas, aún tengo pendiente de verlo, pero me encantaría que hicieras la prueba completa con el infinity scroll y eso
Soy Angular developer, pero me gusta ver todos los videos de Midu de React, aunque no se usarlo, lo entiendo perfectamente de como lo enseñas! Gran trabajo!
Tan diferente es angular? Mi conocimiento es mínimo de angular comparado con react
increible ver todos los comentarios positivos de la gente a la que ayudas, me uno a ellos a pesar de haberte comentado hace meses que uno de tus videos no me sirvió. Buen contenido
Bueno, a prácticar para que podamos demostrar que sabemos crear el punto de entrada de nuestra aplicación. Gracias por todo, esta información vale millones!
wao no pense estar preparado para una prueba de estas en un año, como se nota que ahora aprender es mucho mas facil
Excelente vídeo y explicación.
Visto en 25/09/2023
¡QUE MARAVILLA DE CONTENIDO! Me quedé con las ganas de el test "entuen" xd pero supongo que puede estar en twitch
Justo lo que ocupaba 🎉
Entré por el título, me quedé por los gatitos.
😻
es el primer video que veo "sobre react" y como he aprendido
qué importante es este video. gracias Midu; si supieras que me lo he visto unas tres veces por si acaso antes de mi primera entrevista
Que se puede hacer si la response a dia de hoy no contiene la url?
Qué hiciste amigo? Me pasa lo mismo
@@ellias_mb Al final generé la url yo mismo sin hacer fetch a la api .. al menos para que se viera la foto
yo quité el *&json=true* del final de la url, el *.then((res) => res.json())* tras el segundo fetch y quite todo lo del prefijo pues la url directamente del primer response si trae el hostname. Y con eso ya lo tienes
@@gerasTheMessiah Eres un grande, justo estaba haciendo este proyecto para aprender y estaba atascado sin saber muy bien cómo hacerlo ya que estoy muy verde en esto. Mil gracias!
La habia visto en twitch y me encanto. Gracias por subirlo aqui.
Aclare varias dudas, esto vale oro!
me parece que duraba mas el video o solo es mi imaginacion? tambien estuve en twitch
Este contenido vale oro, sos un genio miduuu
Hola chicos! Os funciona la segunda API? a mí no me renderiza la foto
Entrevistador: y porque harías el testing.
Yo: porque lo dijo Midu.
XD
Que niveeel midu!! muchas gracias por compartir tus conocimientos!!
Voy por la mitad del video y es como lo que siempre quise ver. Excelente contenido Miguel
Sos un grande Midu, mil gracias! donde esta la parte 2? jaja
La segunda API ya no trae la url en el json
Me pasa lo mismo, deben haberlo cambiado hace poco.
Si. Yo te recomiendo que obtengas el blob[ res.blob() ] y de ahí uses el método URL.createObjectURL(data). Suerte 😊✌
@@plasenca Muy útil. Gracias por la idea.
Hola excelente video ….🎉 gracias totales desde arg. Puede ser que el JSON de la api no devuelva la url de la imagen ya.¿
Pense lo mismo, por ende no extraje la URL, se puede usar directamente la url de la API y usar ${} para agregarle el fact no?
Ver a midu explicar el codigo asi os juro que me motiva mas y mas
Hola te quería agradecer por toda tu ayuda, de verdad eres uno de los mejores creadores que conozco 😁
Gracias majo!
Gracias por todo Midu, tqmmmm!
Midu eres el mejor, puedo ser tu pupilo y aprender sin cobrar nada? eres mi sensei
Crack miduuu. Que bueno ser contemporáneo de vos. Gracias por todo lo que haces por los devs en nacimiento (L
Muchas gracias Midu por todo lo que enseñas
Excelente explicación Midu!!! Sos grande!!
te admiro midu
🚀 Este contenido es Oro! hay alguna manera de ver el directo completo? parece que no está resubido en twitch
Solo como tema informativo, describir una imagen no es que sea imposible literalmente, con IA esto es posible, y un claro ejemplo es Facebook y su capacidad para describir imagenes, asi mismo renderizar sus componentes < img /> con su respectivo [alt] descriptivo.
Edit: {
seg: "46:13"
};
Quizás es mucha libreria para lo que se necesita, pero es lo que sé usar, si puedo usar dependencias yo habría usado scrollTriger de gsap
NA MIDU SOS TREMENDO CAPOOOOOOOOOOO
Siempre que veo estos videos, me siento como un cavernícola 😥
Hola, recien voy comenzando con react me han servido muchos tus videos y justamente me paso lo que dices que me pidieron inicializar la aplicacion de cero, pero con migo fueron mucho mas estrictos. Para empezar no fue video llamada, fue en oficina y en una lap que me proporcionaron sin conexion a internet y que al final ellos la conectaban a internet le hacian install y tenia que funcionar y tenia al entrevistador sentado atras de mi haciandome toda clase de preguntas. Hasta me pregunto que si por que main.jsx y no master.jsx o init.jsx. Yo iba por un puesto de junior y si bien el ejercicio como tal no era complicado (era poner un input que recibiera terminos de busqueda, que buscara en un api y que el resultado lo mostrara en una tabla) si lo eran el nivel de las preguntas y estoy casi seguro que usaron tu guia de las 100 preguntas de react. Hasta parecia que el entrevistador queria que fallara aproposito, cada 10 minutos me interrumpia para hacerme 7 u 8 preguntas y para cuestionarme por cualquier cosita del codigo, hasta que si por que usaba comillas simples y no dobles. En si no senti haber hecho mal el ejercicio, lo termine relativamente rapido pero de las preguntas solo supe como la mitad y el entrevistador me dijo que hasta un junior deberia saber todo lo que me pregunto y deberia poder hacer todo de memoria, cuando le dije que no estaba de acuerdo y que sentia que me queria hacer fallar me se enojo y me dijo que era un mediocre y que no me iban a contratar y la verdad que bueno por que si asi es la entrevista no me imagino como sera el dia a dia
Algunas empresas ponen el mismo examen a diferentes niveles ej, junior, mid, senior. Y esperan claramente diferente madurez en las diferentes soluciones de cada candidato. Y algo muy importante es la habilidad para buscar e implementar recursos que el developer no conoce o no domina.
Gracias Midu por todo lo que haces
Gracias por comentar!
Escuchen a este hombre muy sabio
muchas gracias midu!
Hola! Mucha sgracias por este vídeo, se aprende muchísimo contigo. He seguido el vídeo pero en la segunda api, en el package json, no llega la url de la imagen en la respuesta. A alguien más le pasa lo mismo?
si no me equivoco la API cambió, y no funciona cómo en el video, me pasó lo mismo
Estaba completa? Parece que falto crear los custom hooks.. igual buen video de repaso..
Despacio franchute, esto es oro!
Gracias midu, en los detalles está la diferencia
Esto es muchisimo. Gracias Midu!
Midu muchas gracias por el video, es muy didactico.aunque me he encontrado con un que no encuentro la url de la imagen, en el json no me sale el campo de url y otros campos mas. Puede ser que haya cambiado la API ?? o gracias por anticipado por tu contetación.
jajaj estamos en la misma
JAJAJA otro acá .. se complicó la prueba técnica.. y sin ayuda de Midu
Listo! no hay que pasarlo a json.. ahora será sólo un string , y lo pasan al setImageUrl ( es la dire como la que podrían en la barra del navegador)
Perooo... no se podría crear sacar el prefijo de la dire.
x3
gracias !
Intente hacer el ejercicio pero ya no manda la URL, alguno que venga en Diciembre y lo pudo resolver?
poné los comentarios ordenados por los mas recientes y el quinto o algo así te lo dice.
Midu para los que trabajamos con Django (Python) cuando puedes mostrar de como integrar con React?
¡Buen vídeo y buena explicación!
Como quisiera mas contenido de Algoritmos como Linked List y Grafos
Midu, a cual prueba te refieres en el minuto 6. 48 aprox
Estas clases son distintas o se complementan con tus primeras clases de react ...?
Gracias 🎉
gran clase, gran curso, gran profe ;)
Midu algun repositorio o sitio donde hayan ejemplos de pruebas tecnicas para junior?
Prueba leetcode, es una pagina muy buena
Gran demostración de los apartados ESENCIALES para una prueba técnica, el video es espectacular. En mi humilde opinión faltaría añadir un par de cosas más que parecen una tontearía pero a la hora de hacer la entrevista muchas empresas lo tienen en cuenta. La primera es que nunca apliquéis estilos a las etiquetas HTML directamente, utilizad un className si estáis haciendo la importación de estilos desde un fichero .css, scss etc. Obviamente si lo hacéis lineal pues este caso no se aplica. La segunda es "ojito" a la hora de utilizar el operador && cuando quieres renderizar un componente porque te puede saltar un error y te diga "oye, que no se ha devuelto nada del render". Para curarnos en salud y quitarnos este posible problema puedes añadir un ternario que devuelva el componente o null. Un abrazo!
Gracias, Pablo! El vídeo está cortado y en la segunda parte se hace justamente todo lo que comentas. 😊
@@midulive Ah genial entonces! Esto me pasa por perderme el directo 😅
midu es como un padre haha
Gracias Midu como siempre buen video y ojalá más de estos videos...Lo necesitamos
Por las dudas, hoy dia el cataas(API para obtener la imaen) estuve viendo y en el json no aparece la URL, osea hacer la segunda llamada de la api almenos yo no la hice, setee la imageURL directamente con el link.
Yo igual.
x2 :(
una pregunta a los que han pasado alguna entrevista, en realidad existen este tipo de pruebas tan básicas hoy en dia?. La verdad siento que piden muchas mas tecnológias
cual es el link del directo completo?, esta muy bueno
Andamos en las mismas buscando jaj
esto es parte del curso de react pero no se ha subido ni el primer video, ahora como vas a ordenar las cosas? owo
excelente video, pero tengo una duda en la segunda api ya no devuelve la url , en ese caso como haria para mostrar la imagen
a mi tampoco me la esta devolviendo la segunda :!
tampoco a mí
no ya no la devuelve igualmente busquen alternativa lo malo es que ya no podes editar el texto de la imagen directamente desde la url, una alternativa que me dio chat gpt a mi es "TheCatAPI" no lo se ahorita la probare
una posible solucion asi
let firstWord
useEffect(() => {
fetch(FACT_URL)
.then((response) => response.json())
.then((data) => {
const { fact } = data
setFact(fact)
})
}, [])
useEffect(() => {
if (!fact) return
firstWord = fact.split(' ', 3).join(' ')
setImageUrl(`${CATS_URL}/${firstWord}`)
}, [fact]) o si lo deseas colocas todo el codigo ddel segundo useeffect en el primero despues del segundo .then espero te solucione 😁😁😁😁😁😁
inclusive se puede omitir el let firstword que esta antes y colocarlo dentro del segundo useeffect asi
useEffect(() => {
if (!fact) return
const firstWord = fact.split(' ', 3).join(' ')
setImageUrl(`${CATS_URL}/${firstWord}`)
}, [fact])
Esto vale oro! Muchas gracias!!
Puedo preguntar que extensión usas para que te vaya autocompletando todo?
Github copilot
Video buenísimo como siempre, muchas gracias por esta calidad de contenido. Por cierto que temas de VSC usas o alguien sabe cual es (?)
Es el One Darker Pro si no recuerdo mal. Y la fuente es Cascadia Code
@@ivopascalrios7213 gracias bro y respecto a los iconos también sabrás ?
jajaja wow, soy mobile dev, se flutter, swift y kotlin, apenas empece a ver tus cursos y se me esta haciendo demasiado facil react, en serio asi de fáciles son las pruebas?!!
Usalmente uso prettier, pero quise probar standart y aunque si me marcaba las correcciones no me formateaba. @midu podrias decirnos si hace falta alguna config para que funcione como a ti ? gracias!
Buaa midu, vaya que me has ayudado!
Que es un hecho ???? osea se que es la palabra pero a que ase referencia la palabra hecho ??
Una duda @midulive como le pones en tu archivo README, que extensión utilizas para la parte de "MD041/first-line-heading/first-line-h1" esa es mi duda, amigo
¿Que estoy viendo un video de algo que no entiendo? Sí.
¿Que lo seguiré viendo? Efectivamente.
A mí como junior me mandaron hacer una página en Wordpress con los datos que ellos pedían y un landing page con html y css que fuera funcional para enviarse por Gmail y en 48 hrs lo malo que me pedían una plantilla que era de paga y no me daban la plantilla 🥺
Se corta el video al explicar como utilizar mas de 1 useEffect... La continuación no está ?
Eslint con standard parece tener conflicto con Prettier, al menos en "Missing space before function parentheses.". Eslint añade el espacio pero prettier lo quita, por tanto sale subrayado en rojo.
¿Recomendáis borrar prettier? ¿Cómo pueden coexistir los dos si tienen diferentes reglas como ese espacio?
Seguramente llego tarde con mi respuesta, pero sí, prettier y eslint pueden trabajar juntos. Se debe instalar la dependencia "eslint-config-prettier" y configurarse en la parte de extends del archivo de configuración de eslint. El espacio en paréntesis se configura en el archivo de configuración de prettier
Midu consulta ! Que extension usas o programa o plugin o no se como se le diga que casi que escribe por ti el código ?
Github copilot, una IA para visual studio code
Cual es el curso del que hablas en el video?
El intersection observer se lo pidieron porque podía googlear lo que quisiera, entonces intentaron ver como resolvía algo que seguramente no sabía hacer.
Buenas! Excelente video, solo me quedo una duda, yo aprendí a crear la app de react con npx install, es lo mismo que hacerlo con vite manual?
si te dejan buscar documentacion y/o informacion para iniciar el proyecto, ¿seria valido usar ChatGPT para preguntarle las configuraciones?
❤
alguien sabe como hacer para que se muestren los mensajes de error en el editor?
que pena muy interesante me gustaria hacer el curso con tigo de react desde cero
nice work, thanks
Midu como va? te hago una pregunta, tengo un tema con el texto de la imágen. Porque se renderiza con un fact, pero al segundo se le colocan las tres primeras palabras del fact actual y se actualiza la imágen nuevamente.
Sos un crack
Cómo tienes configurado en vscode que te formatee el código utilizando el linter? A mi no me funciona muy bien
La api ya no devuelve la URL, por lo menos en mi caso
Hola ! como lograste realizarlo sin la url ?
Midu, no es una buena prueba para el candidato desde el momento en que se puede leer "bastante difícil y duradera", para lo que ya se podía imaginar que tipo de challenge recibiría tu suscriptor...
De hecho, me parece por mi experiencia, que no es un challenge adecuado hacia un junior, y me da la sensación según todo lo visto hasta el momento, que tienen la intención de contratar a algún programador con un seniority más elevado y pagarle como junior... no sé, por ahí estoy equivocado y si es así me disculpo, pero es la impresión que me dejan éste tipo de challenges...
el vite.config.js lo exportas pero no veo que se llame desde ningun sitio, eso me tiene confundido
La API creo que me bloqueó a la mitad del curso, no sé porqué pero ya no me deja acceder.
el archivo vite.config.js tu lo confiiguras, pero donde lo llamas? si se hace un export default pero noo veo que se importe en nigun sitio, me ha dejado descentrado eso, es como que se queda inerte ahi
Hola, gran vídeo!
¿Como se llama la extensión qué permite ver en cada linea la consola? Cada vez estas en la linea te muestra lo que se imprime
es una extensión de vs que se llama console ninja