3 tareas prácticas para su próxima entrevista de React

Durante los últimos meses, participé en muchas entrevistas técnicas. Cada entrevista es como un pequeño desafío no solo para el candidato sino también para el entrevistador y no es tan fácil como parece. Paso varias horas en cada entrevista. Porque necesita prepararse para ello: prepare preguntas basadas en la experiencia de los candidatos, prepare temas generales para discutir y tareas prácticas.

Cada vez que necesito pensar en qué tareas prácticas dar. Esta fase es muy importante para nosotros. Necesitamos verificar nuestras habilidades de codificación, forma de pensar y capacidad para crear un buen código comprensible. Y todo esto durante unas sesiones en vivo. En la mayoría de los casos, divido las tareas prácticas en 2 partes: tareas de JS Core y tareas de React. En este artículo, quiero compartir las tareas de React.

Anteriormente traté de crear tareas en mi mente durante la entrevista, pero esta no es una forma muy efectiva, porque necesito concentrarme en la discusión y no tengo la capacidad de pensar también en el código.

Es por eso que he creado 3 tareas y las uso para la mayoría de mis entrevistas. A veces puedo hacer actualizaciones para cada caso en particular, o pedir algo más. Pero en general, utilicé un enfoque básico.

Primera tarea: componente que obtendrá datos y los procesará

Es bastante fácil. Quiero ver cómo los candidatos pueden crear componentes, usar ganchos (si hablamos de componentes funcionales) y crear una lógica simple. La descripción es la siguiente: necesitamos crear un componente que debería llamar a alguna API falsa en el montaje del componente, obtener los datos y renderizarlos.

Los candidatos pueden usar cualquier enfoque, puede ser componente de clase o funcional. Los candidatos pueden usar 'buscar' o 'Axios'. Los desarrolladores más experimentados pueden intentar cambiar la lógica de búsqueda a un enlace personalizado. Creo que es un buen punto de partida para ver si el candidato puede usar React

Segunda tarea - componente con algunas interacciones

En esta tarea doy el siguiente componente:

 const Component = () => { return ( <> <input type="number" placeholder="Please type any number from 0 to 9" /> <select /> <span>You select number: </span> <button disabled>Show selected option</button> </> ); };

Y la descripción de esta tarea es la siguiente:

1. Podemos input cualquier número del 0 al 9.
2. Según el número que escribamos en input , veremos en select el número correspondiente de opciones. Los usuarios pueden elegir cualquier opción en seleccionar.
3. Después de seleccionar cualquier opción, el button se habilita. Podemos pulsar sobre él y ver en span qué opción hemos seleccionado. Después de tal clic, todos los componentes deberían moverse al estado inicial.

Tercera tarea - contador

La descripción es la siguiente: Tenemos 3 pequeños componentes: input y 2 buttons , y el componente principal Countdown . Necesitamos implementar un contador que contará cada segundo desde el número escrito hasta 0:

 const Countdown = () => { return ( <> <div> Countdown: <span>{" place for countdown"}</span> </div> <div> <InputCount /> </div> <div> <PauseResumeButton /> </div> <div> <CancelButton /> </div> </> ); }; const InputCount = () => { return <input placeholder="Please set time" />; }; const PauseResumeButton = () => { return <button>Start</button>; }; const CancelButton = () => { return <button>Cancel</button>; };

Hay 2 subtareas:

• Podemos escribir el tiempo de entrada en segundos de 1 a 60, por ejemplo, 10.

  Luego hacemos clic en el botón 'Iniciar' y el contador comienza a contar cada segundo de 10 a 0, la sección de visualización lo muestra.

  
  

  El texto del botón 'Inicio' durante el conteo debe cambiarse a 'Pausa'. Cuando hacemos clic en 'Pausa' -

  la cuenta regresiva se detuvo y el botón 'Pausa' cambió a 'Continuar'.

  
  

  Haga clic en 'Continuar' para continuar la cuenta regresiva, y el botón nuevamente cambió a 'Pausa'

  Cuando la cuenta regresiva es 0, el conteo debe detenerse y los botones vuelven al estado predeterminado

• Hacer clic en 'Cancelar' debe reiniciar inmediatamente el conteo en cualquier etapa y configurar los botones a los valores predeterminados

La última tarea es un poco complicada. Parece fácil, pero hay algunos lugares difíciles. En los próximos artículos si será interesante podemos intentar implementar la última tarea

¿Qué opinas de los ejemplos? ¿Qué tareas usas para las entrevistas de React?