¿Cómo lo hicieron? ¿Cómo pasaron de aquellos que no pueden abrir relaciones públicas sin ayuda externa a aquellos a quienes otros recurren en busca de ayuda? ¿Qué ha hecho que las personas que piden consejos estén dispuestas a dar consejos a otros? ¿Cómo se convirtieron los estudiantes en maestros? Les hice estas preguntas. Esto es lo que respondieron.
1. Use ESLint y TypeScript
JavaScript es un lenguaje de programación poco escrito. Usando este lenguaje, podemos resolver el mismo problema de innumerables maneras. JavaScript no tiene mecanismos incorporados para protegernos de escribir código defectuoso o código que tenga un bajo rendimiento. Pero, afortunadamente para nosotros, podemos mejorar la situación recurriendo a dos herramientas para el análisis de código estático. Estos son TypeScript y ESLint.
Al usar ESLint para el análisis de código estático, podemos identificar problemas antes de que lleguen a producción. Podemos verificar el código con nuestros estándares. Esto mejora la capacidad de mantenimiento de la base de código.
Por ejemplo, puede instalar el complemento ESLint
eslint-plugin-react-hooks... Este complemento notará el problema en el siguiente código, que se ve completamente normal, y nos informará que estamos violando una de las reglas para usar ganchos.
// ,
if (userName !== '') {
useEffect(function persistForm() {
localStorage.setItem('formData', userName);
});
}
TypeScript le permite utilizar un sistema de tipos estático para detectar errores relacionados. Al usar TypeScript, puede usar la potente información sobre herramientas de IntelliSense que hace que trabajar con varios componentes y bibliotecas sea más rápido y fácil. La información sobre herramientas que aparece cuando escribe su código proporciona información sobre los mecanismos internos de los componentes y las bibliotecas. Esto acelera la refactorización y fomenta las convenciones de codificación como los genéricos.
Alguien que es bueno en TypeScript no solo se convierte en un mejor programador de JavaScript, sino que finalmente comienza a escribir mejor código React.
2. Familiarícese con los ganchos React
React Hooks se ha apoderado literalmente del mundo del desarrollo de React desde su introducción en febrero de 2019. Aunque el equipo de React dice que no debe refactorizar el código antiguo traduciéndolo en ganchos, estos están literalmente en todas partes en estos días.
Si desea avanzar en el ámbito del desarrollo de React, el mejor momento para tomarse el tiempo es aprender los ganchos en profundidad para poder comprenderlos completamente.
¿Necesitas algún tipo de efecto secundario? Si es así, entonces el gancho
useEffectes tu mejor amigo. ¿Necesita monitorear el estado de un componente y volver a representarlo cuando el estado cambia? Echa un vistazo auseState... ¿Necesita almacenar y actualizar algunos valores entre renderizados, pero cuando estos valores cambian, no renderiza? ¿O tal vez necesita saber sobre la altura o el ancho de los elementos DOM? Entonces tu amigo es este useRef.
Por ejemplo, veamos el caso de uso más simple
useEffect. Supongamos que queremos organizar la actualización del título de la página (en forma de un efecto secundario) cuando se hace clic en un botón. Puedes intentar resolver este problema así:
useEffect(() => {
document.title = `You clicked ${count} times`;
}); //
Este enlace es fácil de optimizar al hacer que no se ejecute en todos los renderizados, sino solo cuando la variable cambia
count. Esto se hace incluyendo las countdependencias en la matriz:
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); // count
Debe sentirse cómodo usando los ganchos más comunes y creando sus propios ganchos. También debe estar bien versado en el uso racional de ganchos. Por ejemplo, saber cuándo usar ganchos parece
useEffectresultar en una nueva representación y cuándo no.
3. No optimices tu código demasiado pronto
La conversación sobre ganchos nos lleva al tema de la optimización prematura. Con demasiada frecuencia he visto a los aspirantes a desarrolladores de React ir al hueso para hacer su código lo más rápido posible. El código de reacción se optimiza con mayor frecuencia utilizando ganchos
useMemoy useCallback. Pero su uso no siempre está justificado.
Echemos un vistazo a un componente simple que toma una serie de información de confitería como
props. El componente filtra la matriz y muestra una lista de nombres de chocolates (su propiedad typees igual a un valor de cadena chocolate).
Algunos desarrolladores pueden tener una necesidad irresistible de escribir código similar al que se muestra a continuación. Podrían pensar: "Solo actualizaré la lista de chocolates cuando cambie la lista general de dulces". La implementación de esta idea dará como resultado un código sobrecargado con construcciones auxiliares que es difícil de leer.
const Chocolate = (props) => {
const chocolates = useMemo(
() => props.candies.filter((candy) => candy.type === "chocolate"),
[props.candies]
);
return (
<>
{chocolates.map((item) => (
<p>{item.name}</p>
))}
</>
);
};
En lugar de crear un componente como este, sugeriría escribir un código simple y limpio. En casos como este, no hay razón para usar
useMemo. Engancha useMemoo useCallbackdebe usarse solo para memorizar los resultados de operaciones complejas que crean una gran carga en el sistema.
Recomiendo posponer el inicio del trabajo de optimización hasta que obtenga una medición del rendimiento de la aplicación que indique claramente un problema.
No debe usarlo en todas partes
useCallbacky useMemosolo porque recientemente leyó sobre ellos en alguna parte. No optimices todo. Es mejor esperar a que aparezca el problema y luego resolverlo. No resuelvas problemas inexistentes.
4. Sepa cuándo crear nuevos componentes
He visto a muchos aspirantes a programadores de React implementar la lógica de negocios de un proyecto en componentes destinados a desempeñar un papel puramente de presentación. Para que su código sea lo más reutilizable posible, es importante crear componentes que sean lo más fáciles y convenientes para ser reutilizados.
Para lograr esto, debe esforzarse por mantener la separación entre los componentes de presentación y los componentes que implementan algún tipo de lógica. Anteriormente, una técnica común era dividir componentes en "contenedores" y, de hecho, "componentes". Pero este enfoque gradualmente perdió relevancia.
Echemos un vistazo a un componente que carga una lista de elementos desde algún lugar y los muestra en la página. Tenga en cuenta que ambas tareas se implementan en el mismo componente.
const ListItems = () => {
const items = React.useState([]);
React.useEffect(() => {
async function fetchItems() {
await fetched = fetchItems();
setItems(fetched);
}
});
return (
<>
{items.map((item) => (
<div className="item-container">
<img src={item.img} />
<div className="name">{item.name}</div>
<div className="author">{item.author}</div>
</div>
))}
</>
);
};
Puede ser tentador tomar la ruta del "contenedor". Siguiendo esta aspiración, llegaremos a crear dos componentes:
const ListContainer = () => {
const items = React.useState([]);
React.useEffect(() => {
async function fetchItems() {
await fetched = fetchItems();
setItems(fetched);
}
});
return <List items={items} />;
};
const List = (props) => {
return (
<>
{props.items.map((item) => (
<div className="item-container">
<img src={item.img} />
<div className="name">{item.name}</div>
<div className="author">{item.author}</div>
</div>
))}
</>
);
};
Pero en tal situación, debe actuar de manera diferente. Es decir, debe abstraer aquellas partes del componente que juegan un rol puramente de presentación. El resultado serán dos componentes: un componente
List(lista) y un componente Item(elemento):
const List = () => {
const items = React.useState([]);
React.useEffect(() => {
async function fetchItems() {
await fetched = fetchItems();
setItems(fetched);
}
});
return (
<>
{items.map((item) => (
<Item item={item} />
))}
</>
);
};
const Item = ({ item }) => {
return (
<div className="item-container">
<img src={item.img} />
<div className="name">{item.name}</div>
<div className="author">{item.author}</div>
</div>
);
};
5. Presta especial atención a las pruebas
El nivel de competencia en las tecnologías de prueba es lo que separa a los juniors de los seniors. Si no está familiarizado con las aplicaciones de prueba de React, puede encontrar y estudiar una tonelada de materiales al respecto.
¿Quizás haya escrito algunas pruebas unitarias en algún momento, pero su experiencia no es suficiente para crear pruebas de integración que abarquen toda la aplicación? Esto no debería molestarlo, ya que, nuevamente, hay innumerables recursos para ayudarlo a llenar los vacíos de conocimiento y la experiencia.
Por ejemplo, aquí está mi artículo sobre el ciclo completo de prueba de una aplicación de pila completa basada en React.
6. Distinga entre situaciones en las que debe usar el estado local y global
Aquí tocaremos el tema de administrar el estado de la aplicación en React. Hay toneladas de tecnologías para resolver este problema. Por ejemplo, esto es redux, mobx, retroceso, API
contexty mucho más. Ni siquiera es fácil enumerarlos.
Pero independientemente de la tecnología de administración del estado que elija, a menudo veo que React juniors se confunde al decidir si usará un estado global o local. Desafortunadamente, no hay reglas claras para tomar tales decisiones sin ambigüedades. Pero todavía se pueden formular algunas reglas sobre este tema. Es decir, para decidir si usar el estado global o local para almacenar algunos datos, responda las siguientes preguntas:
- ¿Necesitamos algún componente que no esté directamente relacionado con nuestro componente para poder trabajar con sus datos? Por ejemplo, el nombre del usuario puede aparecer en la barra de navegación y en la pantalla de bienvenida.
- ¿Deben persistir los datos al navegar entre las páginas de la aplicación?
- ¿Muchos componentes usan los mismos datos?
Si estas preguntas pueden responderse positivamente, entonces valdría la pena aprovechar el estado global. Pero, le diré de inmediato, no debe almacenar información sobre lo que está sucediendo con el menú en el estado global. Al decidir dónde almacenar algunos datos, intente especular sobre qué datos se utilizan en diferentes lugares de la aplicación y qué datos pueden almacenarse solo dentro de los componentes.
Salir
Ahora ya sabe qué caminos deben tomarse para crecer profesionalmente en el campo del desarrollo de React.
Cuando pienso en el código que escribí cuando era un React Junior, una cosa me viene a la mente. Estaba escribiendo un código demasiado complicado que era difícil de entender. A medida que gané más experiencia, comencé a notar cómo mi código se simplificaba. Cuanto más simple sea el código, mejor. Mi código ahora es fácil de entender, y puedes entenderlo incluso seis meses después de que fue escrito, cuando resulta que se ha introducido un error que debe ser resuelto.
¿Qué caminos hacia el crecimiento profesional para los programadores de React conoces?
