ReactJS: Resuelvo PRUEBA TÉCNICA para PROGRAMADOR JUNIOR
HTML-код
- Опубликовано: 10 июл 2024
- Participa en el JavaScript Codeathon de Rviewer 👉🏼 bit.ly/35py0BF
Recibe feedback sobre tu código de la mano de expertos y gana premios solo por participar.
Código del proyecto en GitHub ► github.com/carlosazaustre/ret...
⏱ Contenido del Vídeo
- 00:00 Intro y anuncio importante
- 02:33 Exploración del API y requisitos
- 04:04 Iniciamos la app
- 05:52 Primeros tests aplicando TDD
- 09:26 Petición al API
- 13:22 Tratamiento de errores
- 16:50 Vista Detallada de personaje
- 24:13 Función de búsqueda
- 29:34 Paginación de resultados
- 35:03 Tips y Conclusión
Normalmente si aplicas a un puesto de desarrollo frontend, lo más habitual es que te hagan una prueba técnica. Esta puede ser muy diversa pero suele ser frecuente que desarrolles una pequeña aplicación web que consuma un API y muestres la información.
En este vídeo vemos justamente eso y para ello utilizamos como base uno de los retos de programación mensuales de @mouredev , que consiste en crear una app a partir de la API pública de StarWars.
Los requisitos son:
- Mostrar un listado de los personajes que devuelve el API
- Mostrar la información detalle de cada personaje
- Paginación del listado
- Función de búsqueda de personajes.
📘 Se de las primeras personas en enterarae cuando publique el nuevo libro 👉 leanpub.com/reactpractico/
- - -
AQUÎ TIENES MÁS VIDEOS DE PRUEBAS TÉCNICAS
✅ Resuelvo una prueba de ENTREVISTA TECNICA para PUESTO PROGRAMADOR FRONTEND
► • Resuelvo PRUEBA TÉCNIC...
✅ Resuelvo OTRA PRUEBA de ENTREVISTA TECNICA para puesto de trabajo como PROGRAMADOR SENIOR
▶ • ✅ Resuelvo PRUEBA TECN...
- - -
📚 ¿QUIERES APRENDER REACT? Mira este vídeo
► • APRENDE REACT BÁSICO e...
📚 ¿AÚN NO DOMINAS JAVASCRIPT? Mira este CURSO GRATIS DE JAVASCRIPT DESDE CERO
► • 🟨 CURSO DE JAVASCRIPT ...
- - -
🔔 No olvides suscribirte y activar la campanita para no perderte ningún vídeo
► ruclips.net/user/carlosazaustre?su...
🏆 Si te gusta el contenido que comparto, puedes apoyarme de una manera más directa uniéndote al programa de MIEMBROS del canal
► / @carlosazaustre 
Наука
📘Mi nuevo libro "Aprendiendo React" ¡Ya a la venta!
amzn.to/3r83cjL
Más videos como estos para los que estamos con nuestras primeras entrevistas y nos vendría de perlas por favor. Estos videos se agradecen mucho. Eres un grande Carlos
¡No manches!, nunca se me había ocurrido crear primero las pruebas y después crear el código para hacer que pasen. Me encantó esta nueva alternativa para ponerla en practica de ahora en adelante!. Muchas gracias Carlos por el video
Maravilla de video, un 10 como siempre Carlos!! Me ha parecido genial el ejercicio completo, pero sobre todo la parte del Testing que es la que normalmente no se ve mucho y es la que más necesitamos potenciar! Gracias
Me alegro mucho que te haya gustado y servido Maikel!! A ver si puedo hacer más videos con cositas de testing :)
Me parece perfecto el video. Por comentar algo que podría haber sido interesante, haber realizado alguna parte de la app en componets para ver como lo introduces, simplemente es una objeción ya que sabemos que algunas empresas son mas "quisquillosas" a la hora de tener mas atomizado el proyecto para demostrar que tienes aún mas conocimientos(que en tu caso queda más que claro que los tienes).El testing me viene genial ya que es algo que no hemos entrado en el bootcamp en el que esoty y me parece interesante. Gracias por tu aporte, me viene genial estos videos para repasar todo lo que estoy estudiando y verlos desde otro punto de vista. Es claro y directo. Chapó por tu trabajo
Luego del like, debes tomar en cuneta que la presión por la que pasa una persona al realizar una prueba no es la misma por lo tanto realizar esta prueba con la magia de la edición no se asemeja a un entorno real, ...en mi opinión solo he pasado una prueba sin caer en errores hasta de los mas simples, tales como olvidar una funcionalidad de js y tal es cuando estoy empleado y solo intento ver como me va en una mejor empresa sabiendo de que del resultado no depende mi futuro inmediato, en cambio, es mil veces ver que el programador muestre su perfil de codewars u otro y ver como va su ranking y de como ha abordado los problemas, el caso es que continúan insistiendo en algo que al final no demuestra la realidad
Hola Carlos, cada día me gusta más REACT y eso que estoy iniciando pero con tus videos es más fácil 💪 saludos desde Argentina!
Me alegro mucho Gabriel! Si tienes dudas suéltalas y vemos si hacemos vídeos sobre ello :)
Genial iniciar con TDD. Muchas gracias!!! voy a tratar de apuntarme al codethon e implementar TDD también... sería mi siguiente pasito
Wiiii!!!
Muchas gracias Carlos. Voy a practicar varias veces esta prueba para mejorar mis habilidades.
Muchas gracias por este excelente video Carlos! Súoer clara la explicación. Sigue asi!
Gracias!!! Seguiremos a fuego pues 😀
Muchas gracias por tu contenido. Cada día aprendo más. Gracias.
Muchas gracias a ti Diana! Me alegro que te sirva :)
Gracias Carlos, Estos videos haciendo testing son geniales!
Me alegro que te gusten Kevin! Intentaré hacer más :)
excelente, por favor seguí haciendo videos de este tipo.
Muchas gracias Mati! espero que te gusten el resto de videos :)
Guay, tío. Mola ver cómo trabajas
muy util, gracias!
Muy buen video! me fue muy util :)
Excelente video, gracias
Participa en el JavaScript Codeathon de Rviewer 👉🏼 bit.ly/35py0BF
El video no está bien editado
@@eliasbest Gracias
Hola, disculpa porq llegar a usar el Href si se podria hacer con el onChange y guardaria el valor con e.target.value en vez de InputRef.current.value es más efectivo?
Excelente video muchas gracias 👌. Muchos de los que ven el vídeo usan el móvil y la verdad el código se ve pequeño hazle más zoom
Estoy creando el habito de revisar videos de código antes de ir a dormir para aprender y lo que explicaste acá esta magistral !
Muchas gracias Nicolas!
te recomiendo levantarte antes y estudiar antes de tus actividades diarias. Coding requiere tener la cabeza activa. Revisar videos antes de dormir (al menos para mi) no me ayuda a retener la info.
Carlos tenes pensado hacer un video sobre validacion de formulario con react? Es algo que se pide seguido, gracias por subir y compartir este contenido, abrazo!!
Pues es algo que tengo pendiente, sobre todo usando alguna de las librerias mas conocidas como react-hooks-form o formik :)
@@CarlosAzaustre Ojalá que sea con FORMIK Y QUE TENGA MULTIPASOS estaría genial.
@@CarlosAzaustre gracias por contestar! estaria buenisimo, es algo que se pide mucho en desafios y muy pocos lo hacen completo o lo explican en detalle, por cierto , que Font y theme usas en este video?
@@nico6346 el theme es Lucy y la fuente Lilex :)
📘 Entérate cuando publique mi nuevo libro 👉 leanpub.com/reactpractico/
porque no comparte este codigo para poder analizarlo a profundidad ?
@@jorgefernandez559 Hola Jorge, tienes el enlace a Github con el código del vídeo en la descripción :)
como junior, joder... otra cosa por aprender, testing, jamás había visto algo sobre ello y me parece un poco raro pero cohesivo, si quieres que el código sea escalable supongo... xd
Gracias!!
Carlos sobre el minuto 9 hay "repeticiones" de edición, por si no lo viste. muy buen contenido y estoy mirando para apuntarme en el codethon
Gracias Paco. Lo suelo revisar pero a veces se me cuela algo… sobre todo cuando el vídeo es muy largo. Estuve varias horas para editarlo y se me coló… lo malo es que RUclips no deja editar el vídeo ya subido, habrá que borrarlo y subir otro y eso es inviable :S
@@CarlosAzaustre No pasa nada, se entiende todo perfectamente 👍
le quedo clavado porque justo hablaba de un bucle jaja, pensé que lo hizo a posta
Saludos como siempre un excelente video, voy a participar por primera vez
Bienvenido Luis!! Siéntete como en casa (o localhost 😉)
Gracias por dedicar tiempo al TDD en React
Un poquito que si no el vídeo se alarga 😅
Muchas gracias por el video! Una pregunta, ¿qué tema y fuente usas para tu editor?
Gracias :)
Hola Luis! Pues el theme es Lucy, y la fuente es Lilex :)
Buenas, me podrían ayudar con la parte de: ".then(setPeople)"
useEffect(()=> {
getPeople(page)
.then(setPeople)
.catch(handleError);
}, [page]);
En ese momento con cuales datos setea las personas? me perdí ahí...
Hola Carlos, primero muchas gracias por los tutoriales.
Segundo, me tira este error:
TestingLibraryElementError: Unable to find an element with the text: Luke Skywalker. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Me darías una ayuda? Gracias !
Buen trabajo Carlos, aun recuerdo cuando aprendi AngularJs con tu libro "Desarrollo web ágil con AngularJS", mis mejores €2,40 EUR invertidos... ahora ReactJs
Wow! Hace tiempo de eso :) gracias por estar ahí :)
Buen dia, excelente video solo tengo una pequeña pregunta, mencionas mucho el mock de la funcion y no se bien el contexto de esta palabra sera que puedes explicarla por favor!
aun estoy aprendiendo react pero si te sirve esto para un próximo video es mejor utilizar vite ya que es mas rápido que create-react-app y por cierto lo de codeathon tiene que ver con lo de que te dan un problema y que tienes que resolverlo con algún tipo de algoritmo
Tienes razón, Vite es super rápido. De hecho hace unos meses hice este short: ruclips.net/user/shortsGQqT_qvW0Q4
Viendo el nivel de la prueba, si lo comparamos con el día a día del progamador junior en su trabajo, es mas o menos parecido o en la prueba técnica se exige más de lo que se encuentra el programador junior en su trabajo? (sin tener en cuenta, claro está, que del junior se espera que vaya aprendiendo cosas nuevas para evolucionar en la empresa y como profesional)
Depende, hay pruebas tecnicas que te piden solo llamar a una api y mostrar en pantalla.
Esta en particular la encuentro de exigencia alta.
Súper útil, y muy bien explicado.
¿Las pruebas técnicas suelen ser tan fáciles como este ejemplo, o piden cosas más complejas?,
Muchas gracias .
Angel podrias ayudarme? Estoy varado con un desafio de formulario
Depende del puesto, para un primer trabajo aquí ya se ven muchas cosas, pero para algo mas mid, senior se compicará. De todas formas me he dejado muchas cosas, no hay estilos, no he componetizado la aplicación para reutilizar partes,... yo me contrataría a mi mismo jajaja
@@CarlosAzaustre Genial, sería estupendo que hicieses más ejemplos de este tipo, muchas gracias.
Carlos, gracias por el contenido. Información de este tipo ayuda a que la curva de aprendizaje para entrar al mundo de desarrollo sea cada vez menor. Pregunto si esta prueba es para un desarrollador junior, semi-senior?
Entre junior y semi diría yo :)
@@CarlosAzaustre Gracias por la respuesta. Lo pregunto porque hace unos días me enviaron una prueba técnica igual a esa (los mismos requerimientos y la misma API inclusive), lo único diferente era que los detalles de cada personaje había que mostrarlos en una ventana modal. Y la resolví similar a como ud la hizo. Me alegra saber que no estoy tan perdido. Jajajaja. Saludos
Excelente video!!! Muy bueno para preparse para entrevistas, Una consulta, como haces para que tengas autorelleno de funciones? que extension utilizas? Saludos desde Colombia
Hola! Muchas gracias! Para el autocompletado en este vídeo uso Tabnine y github copilot
@@CarlosAzaustre Muchas gracias!!
Puedes dejar aca en un comentario todas las extensiones que usaste desde el tipeado hasta los colores y demas? que te muestran las => y el >=
estupendo video!, pero no entiendo por que al importar el json y hacer el map en el componente para listar los elementos, el test me falla:
TestingLibraryElementError: Unable to find an element with the text: Luke SkyWalker. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Saludos Carlos, como siempre excelentes tus videos, ¿Qué opinas de usar Copilot y Tabnine en una entrevista de trabajo?
Gracias Irwing! Pues aunque en el vídeo si es cierto que lo tenía activado, creo que en una prueba técnica se deberían de quitar… o al menos explicar lo que hace la línea o trozo de código que te sugiere …
@@CarlosAzaustre aunque también es verdad que sí eres capaz de analizar lo que te propone y saber si está bien o no y terminar la solución también da a conocer que sabes leer código y en mi opinión al menos yo creo que deberían permitirse. ¿No sé cuál es tu opinión?
Porque siguiendo la lógica de no usarlos tendríamos que decir también que deberíamos tener las soluciones grabadas de memoria.
@@geekhadev totalmente, tienes toda la razón. Sería el sustituto de “voy a consultar la documentación un momento que no me acuerdo si el método slice recibe 1 o 2 argumentos” por ejemplo.
Lo malo ea que en las pruebas solemos estar más nerviosos que en un ambiente relajado donde probamos cosas , pensamos , etc… y esto nos puede causar algún problema en la entrevista.
Por eso decía de no usarlo, pero tienes razón. Son tecnologías que van evolucionando, es como si te obligaran a día de hoy a hacer la prueba en un bloc de notas o en papel. No tiene sentido.
Muchas gracias por tu aporte Irwin!
Hola Carlos! Primero que nada felicidades por este video! Yo ya conocía el mundo de TDD y React pero la verdad que es un video muy top para la gente que no sabe tanto. Te quería hacer una pregunta sobre el mock del fetch. Porque claro, ahora mismo mockeas por completo la llamada sabiendo que solo se llama para una petición que es la de personajes. Pero imagina no sé.. que en esa vista tenemos que hacer 2 peticiones de red, ¿cómo creas el mock en ese caso?
Yo normalmente, me creo un objeto API donde exporto las funciones y lo que mockeo al final es ese objeto, pero me parece curioso saber como lo harías con el windows.fetch. Muchas gracias, un saludo!
¿Qué no saben tanto? Yo entendí todo y nunca he trabajado en nada. ¿Quiere decir qué ya estoy en un buen lv? Gracias.
Hola Carlos! Hay algún tiempo estipulado en el que se espera completar el desafío?
Eso te lo tienen que indicar ellos. Y tú acotar lo que realmente requieren. Si no puede ser frustrante hacer specs que no van siquiera a valorar
Me estás convenciendo de probar react
React Advocate 😅
alguien q haya hecho un buscador gral usando esta api?... necesito un ejemplo por q no me estaria saliendo pongo todos los endpoint en un array y hago un fetch con promise.all pero no me estaria salindo
Llevo varios meses con React y veo imposible poder hacer eso bien en 1 ó 2 horas :(
Si la prueba es muy larga, a veces te lo dejan hacer en unos días a tu ritmo. En 1hora es raro que la completes al 100% y perfecta. Si es en "directo" la persona que entrevista mira otras cosas (tu forma de pensar, de ejecutar, etc...)
Los test y el tratamiento de errores es un plus o es necesario entrando a un primer trabajo?
Si es para el primerísimo empleo sería un plus, sobre todo el testing de los errores, pero siempre hay que tenerlos en cuenta porque no siempre la aplicación va a funcionar como queremos :)
@@CarlosAzaustre muchas gracias! por el video y la respuesta🙌
CONSULTA: ALGUNAS EMPRESAS REQUIEREN QUE USTED SEPA HACER LA CONFIGURACIÓN, PODRÍA REALIZAR LA CONFIGURACIÓN PARA REACT EN UN VIDEO, PORFAVOR.
¡Excelente video!
¿De casualidad alguien sabe cómo se encuentra la herramienta Run js que Carlos usa en el minuto 19:17?
Gracias Luis!
Aquí lo cuento!
Ejecuta JAVASCRIPT más rápido con ésta herramienta
ruclips.net/user/shortsMr7M6KmAb_4?feature=share
@@CarlosAzaustre Wow, ¡Muchas gracias Carlos!
Es la misma prueba que me hicieron xD
Cómo haces para q la consola tenga autocompletado?
Buena pregunta! Es un plugin de terminal que se llama Fig. Haré un vídeo sobre ello :)
El navegador me bloquea la web de la API :/
Carlos tienes twitch?
Claro! twitch.tv/carlosazaustre
Algunos directos, los subo regrabados al canal secundario ruclips.net/user/CarlosAzaustreTV :)
No entendi la mitad del video pero al menos se que existen esas pruebas
Theme?
no entendi un carajo... q desgracia, me perdi por completo con la parte del testing
igual se le agradece!
Lo siento Lizano! Quizá si lo ves varias veces vayas entendiendo más cosas. A la primera es muy difícil pillar todo. Si lo que tienes es dudas con React, tengo más vídeos en el canal y también otro par de vídeos resolviendo otro tipo de pruebas. Tienes los links en la descripción de este :)
(Esperando a que otros copien el contenido original del video...)
Y si hay dos Lukes que? EH? ; )
Theme?
Theme?