3 desafíos de entrevistas de codificación para desarrolladores de React de nivel medio

Reaccionar entrevista

React es uno de los marcos web front-end más populares. Se utiliza para construir componentes web interactivos y dinámicos. React viene con muchos beneficios. Utiliza DOM virtual, JSX y es comparativamente más fácil de aprender y usar.

Las entrevistas de reacción pueden ser desafiantes. Hay varios conceptos en React. La mayoría de las entrevistas de React tienen desafíos de codificación. Estos desafíos de codificación dependen de la experiencia del desarrollador. Para un principiante, los desafíos de codificación se centran en la forma en que el desarrollador usa el estado o escribe el JSX.

Para un desarrollador React experimentado de nivel medio, los desafíos de codificación tienen como objetivo verificar la experiencia laboral del individuo. Se espera que el desarrollador comprenda el desafío en el mínimo tiempo posible y lo resuelva de manera organizada. En este artículo, enumeraremos los 3 principales desafíos de codificación de React para un desarrollador experimentado de nivel medio.

Crea un Contador pero con un giro

Crear un contador básico con un botón que incremente el valor mostrado en 1 es una tarea sencilla. Pero con algunas condiciones adicionales, la misma tarea puede volverse difícil.

Supongamos que tenemos un componente que contiene una variable de estado (declarada usando el enlace useState React) que rastrea el valor del contador. El valor también se muestra en este componente, pero el botón que incrementa el valor está presente en el componente secundario de este componente.

Primero, el entrevistador espera que usted encuentre las posibles formas de resolver este problema. Se puede resolver usando una de las siguientes maneras.

La forma redux es demasiado compleja para tal desafío. Pero mencionar el estado global frente al entrevistador muestra su conciencia.

El uso de accesorios de renderizado es la forma más fácil, pero solo un desarrollador experimentado conocerá la técnica de "apoyos de renderizado".

La función para actualizar el "conteo" se pasa como accesorios al componente secundario y luego se usa allí. Pero, la tercera forma es la mejor y la que más impresionará al entrevistador porque usa Contexto.

El contexto es una de las mejores características de React y se espera que todos los desarrolladores experimentados de React conozcan React Context.

Primero, se crea el contexto.

 import React from "react" ; const CountContext = React.createContext(); export default CountContext;

Luego, se utiliza un proveedor en el componente principal.

 import React, { useState } from "react" ; import Child from "./Child" ; import CountContext from "./context" ; const App = () => { const [count, setCount] = useState( 0 ); const countHandler = () => { setCount(count + 1 ); }; return ( < CountContext.Provider value = {{ count , countHandler }}> <Child />
      <h2>{count}</h2> </ CountContext.Provider > ); }; export default App;

Finalmente, el enlace useContext se usa para acceder a la función en el componente secundario.

 import React, { useContext } from "react" ; import CountContext from "./context" ; const Child = () => { const context = useContext(CountContext); const { countHandler } = context; return ( < div > <button onClick={countHandler}>Increment</button> </ div > ); }; export default Child;

El consumidor de contexto también se puede usar en el componente secundario, pero en su lugar, use el gancho useContext. Esto se debe a que se prefieren los ganchos a las formas más antiguas.

Agregar y eliminar elementos de la lista

Este desafío es quizás el desafío de codificación de React más solicitado para los desarrolladores de React de nivel medio.

En este desafío, el desarrollador debe crear un campo de entrada con un botón.

Cuando se hace clic en el botón, el texto en el campo de entrada debe agregarse a continuación en una lista. Además, cada vez que se hace clic en cualquier elemento de la lista, debe eliminarse de la lista.

El motivo de este desafío es comprobar qué tan bueno es el desarrollador con formularios, estados y listas.

Primero, cree la funcionalidad para agregar el texto escrito en el campo de entrada a la lista.

 import "./App.css" ; import React, { useState } from "react" ; const App = () => { const [list, setList] = useState([]); const [value, setValue] = useState( "" ); const changeHandler = ( e ) => { setValue(e.target.value); }; const submitHandler = () => { setList([...list, value]); setValue( "" ); }; return ( < div className = "App" > <input type="text" value={value} onChange={changeHandler} />{" "} <button onClick={submitHandler}>Add</button> <hr /> <ul> {list.length > 0 && list.map((item) => { return <li>{item}</li>; })} </ul> </div> ); }; export default App;

Intente usar el estado correctamente y haga uso de la sintaxis ES6 como funciones de flecha y operador de propagación.

A continuación, cree la funcionalidad para eliminar el elemento de la lista cuando se haga clic en él. Esto puede ser complicado, pero no si tienes la experiencia.

 import "./App.css" ; import React, { useState } from "react" ; const App = () => { const [list, setList] = useState([]); const [value, setValue] = useState( "" ); const changeHandler = ( e ) => { setValue(e.target.value); }; const submitHandler = () => { setList([...list, value]); setValue( "" ); }; const deleteHandler = ( item ) => { setList(list.filter( ( ele ) => ele != item)); }; return ( < div className = "App" > <input type="text" value={value} onChange={changeHandler} />{" "} <button onClick={submitHandler}>Add</button> <hr /> <ul> {list.length > 0 && list.map((item) => { return <li onClick={() => deleteHandler(item)}>{item}</li>; })} </ul> </div> ); }; export default App;

Así que aquí se agrega una función, que se invoca cuando se hace clic en un elemento de la lista.

 const deleteHandler = ( item ) => { setList(list.filter( ( ele ) => ele != item)); };

Nuevamente, el uso de la función de filtro indica que tiene experiencia trabajando en React.

Visualización de datos provenientes de una API

Si es un desarrollador de React con experiencia de nivel medio, debe tener suficiente experiencia laboral para manejar las API. En este desafío de codificación, se le proporcionará una API que devolverá algunos datos, tal vez, una matriz de objetos. Tienes que mostrar los datos en la interfaz de usuario.

El motivo principal aquí es verificar cómo y dónde el desarrollador llama a la API. En React, hay dos formas de llamar a las API.

• Axios
• obtener API

Si bien la API de búsqueda está incorporada, Axios se instala a través de NPM y se considera una mejor opción. Primero, instale Axios usando npm y luego use la siguiente API para obtener los datos.

 https: //jsonplaceholder.typicode.com/posts/1/comments import React, { useState, useEffect } from "react" ; import axios from "axios" ; const App = () => { const [data, setData] = useState([]); const fetchData = async () => { const { data } = await axios.get( "https://jsonplaceholder.typicode.com/posts/1/comments" ); setData(data); }; useEffect( () => { fetchData(); }, []); return ( < div > <ui> {data.map((item) => { return ( <> <li>Id: {item.id}</li> <li>Name: {item.name}</li> <li>Email: {item.email}</li> <hr /> </> ); })} </ui> </ div > ); }; export default App;

Como se mencionó anteriormente, los entrevistadores quieren ver cómo llama a la API.

Aquí, se utiliza Axios. Además, para manejar la solicitud asíncrona, se utiliza la sintaxis ES6 async/await. También puedes usar promesas.

Otra parte importante es dónde llamas a la API. Aquí, la llamada a la API se realiza en el enlace useEffect con una matriz de dependencia vacía, lo que significa que los datos estarán disponibles cuando se monte el componente.

Envolviendolo

Hay una gran diferencia entre un desarrollador de React principiante y uno de nivel medio. Se espera que un principiante conozca React y sus conceptos, mientras que un desarrollador de React experimentado debe saber cómo usar estos conceptos de manera eficiente. Los tres desafíos de codificación tienen como objetivo medir el nivel de experiencia de un desarrollador de React.