¡Resuelvo Prueba Técnica de React para Juniors y Trainee!
HTML-код
- Опубликовано: 30 июл 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/midudev/aprendiend...
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 ❤
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!!
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
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.
Entrevistador: y porque harías el testing.
Yo: porque lo dijo Midu.
XD
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!
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
wao no pense estar preparado para una prueba de estas en un año, como se nota que ahora aprender es mucho mas facil
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
Midu, increible curso. La vocacion de profesor se te nota a leguas. GRACIAS!
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
Voy por la mitad del video y es como lo que siempre quise ver. Excelente contenido Miguel
¡QUE MARAVILLA DE CONTENIDO! Me quedé con las ganas de el test "entuen" xd pero supongo que puede estar en twitch
Entré por el título, me quedé por los gatitos.
😻
Este contenido vale oro, sos un genio miduuu
Buenas, aún tengo pendiente de verlo, pero me encantaría que hicieras la prueba completa con el infinity scroll y eso
Sos un grande Midu, mil gracias! donde esta la parte 2? jaja
Que niveeel midu!! muchas gracias por compartir tus conocimientos!!
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
es el primer video que veo "sobre react" y como he aprendido
Ver a midu explicar el codigo asi os juro que me motiva mas y mas
Crack miduuu. Que bueno ser contemporáneo de vos. Gracias por todo lo que haces por los devs en nacimiento (L
¿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
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
Muchas gracias Midu por todo lo que enseñas
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.
Hola chicos! Os funciona la segunda API? a mí no me renderiza la foto
Justo lo que ocupaba 🎉
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
Excelente explicación Midu!!! Sos grande!!
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?
gran clase, gran curso, gran profe ;)
¡Buen vídeo y buena explicación!
Gracias por todo Midu, tqmmmm!
Esto es muchisimo. Gracias Midu!
Excelente vídeo y explicación.
Visto en 25/09/2023
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
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
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.
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.
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?
Gracias midu, en los detalles está la diferencia
Buaa midu, vaya que me has ayudado!
Despacio franchute, esto es oro!
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.
Como quisiera mas contenido de Algoritmos como Linked List y Grafos
midu es como un padre haha
muchas gracias midu!
Midu para los que trabajamos con Django (Python) cuando puedes mostrar de como integrar con React?
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!
te admiro midu
Cómo tienes configurado en vscode que te formatee el código utilizando el linter? A mi no me funciona muy bien
si te dejan buscar documentacion y/o informacion para iniciar el proyecto, ¿seria valido usar ChatGPT para preguntarle las configuraciones?
Midu eres el mejor, puedo ser tu pupilo y aprender sin cobrar nada? eres mi sensei
Gracias Midu como siempre buen video y ojalá más de estos videos...Lo necesitamos
NA MIDU SOS TREMENDO CAPOOOOOOOOOOO
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
Escuchen a este hombre muy sabio
gracias !
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
🚀 Este contenido es Oro! hay alguna manera de ver el directo completo? parece que no está resubido en twitch
Hola te quería agradecer por toda tu ayuda, de verdad eres uno de los mejores creadores que conozco 😁
Gracias majo!
Cual es el curso del que hablas en el video?
nice work, thanks
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 🎉
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
Midu algun repositorio o sitio donde hayan ejemplos de pruebas tecnicas para junior?
Prueba leetcode, es una pagina muy buena
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.
esto es parte del curso de react pero no se ha subido ni el primer video, ahora como vas a ordenar las cosas? owo
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 😅
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
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?!!
Esto vale oro! Muchas gracias!!
Puedo preguntar que extensión usas para que te vaya autocompletando todo?
Github copilot
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 :(
¿Que editores de texto estas utilizando? Solo reconoci la terminal :U
Sos un crack
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 ?
cual es el link del directo completo?, esta muy bueno
Andamos en las mismas buscando jaj
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
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 🥺
Estaba completa? Parece que falto crear los custom hooks.. igual buen video de repaso..
como le hace para que su eslint se vea al lado de el rojo
alguien sabe como hacer para que se muestren los mensajes de error en el editor?
Gracias Midu por todo lo que haces
Gracias por comentar!
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
el vite.config.js lo exportas pero no veo que se llame desde ningun sitio, eso me tiene confundido
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
La API creo que me bloqueó a la mitad del curso, no sé porqué pero ya no me deja acceder.
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"
};
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])
Que es un hecho ???? osea se que es la palabra pero a que ase referencia la palabra hecho ??
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
re copado
7:40 test en que? alguien que me diga que dijo
¿Dónde lo termina?
Como me podría unir al canal de discord ?
Se corta el video al explicar como utilizar mas de 1 useEffect... La continuación no está ?
crack!
que pena muy interesante me gustaria hacer el curso con tigo de react desde cero