1. Distribuya de forma racional los datos entre el estado de la aplicación local y global
React es una biblioteca que se encarga de administrar la interfaz de usuario en función del estado actual de la aplicación. La tarea del programador es organizar racionalmente el trabajo con el estado. Algunos desarrolladores prefieren almacenar todos los datos a su disposición en el repositorio de Redux. Esto les permite organizar el procesamiento centralizado de todos los datos de la aplicación.
Pero al pensar en qué datos deben incluirse en el estado de la aplicación, vale la pena considerar si necesita pasar una acción al sistema de administración del estado solo para, por ejemplo, abrir un menú desplegable simple. Lo mismo ocurre, por ejemplo, con los datos ingresados por el usuario en el formulario de comentarios. ¿Todas las partes de la solicitud deben saber lo que se ingresa en dicho formulario? Cuando se trata de lo que se ingresa en el formulario, dichos datos generalmente son procesados por la aplicación en un período de tiempo bastante corto. Además, solo los utiliza el componente responsable de mostrar el formulario en la pantalla.
En lugar de usar la tienda Redux para almacenar todo con lo que está trabajando la aplicación, es mejor almacenar algunos datos en el estado local de los componentes. Esto evitará complicar demasiado la arquitectura de la aplicación.
Cuando piense en dónde exactamente necesita almacenar algunos datos, vale la pena hacerse las siguientes preguntas :
- ¿Necesita acceder a estos datos en diferentes partes de la aplicación?
- ¿Necesita la capacidad de formar algo nuevo basado en estos datos?
- ¿Diferentes componentes utilizan los mismos datos?
- ¿Es valioso para usted poder restaurar el estado de la aplicación, que incluye estos datos, llevándola a la forma en que estaba en un momento determinado (es decir, está interesado en depurar con la capacidad de moverse a lo largo de la ruta de ejecución del código en la dirección opuesta)?
- ¿Planea almacenar en caché estos datos (es decir, usar el estado existente si la aplicación ya lo tiene, en lugar de volver a cargarlo)?
- ¿Debo conservar estos datos cuando recargo en caliente componentes (durante este proceso, el estado interno de los componentes se puede perder)?
Las respuestas positivas a las preguntas anteriores indican que los datos se utilizan de alguna manera fuera del componente. Esto significa que tiene sentido almacenarlos en el estado global de la aplicación. Sin embargo, cabe señalar que los componentes que utilizan el estado local son más independientes y predecibles.
2. Aprenda a probar aplicaciones y equipar sus proyectos con pruebas desde el principio.
La creación de pruebas automatizadas es muy importante. El hecho es que, en cierto punto del trabajo en un proyecto de React, la prueba manual llevará mucho tiempo y recursos.
Al comienzo de un proyecto, cuando su código base aún es relativamente pequeño, es muy fácil decidir no escribir pruebas para él. Si una aplicación tiene de cinco a diez componentes, la creación de pruebas automatizadas parece una tarea de rutina casi inútil. Pero si un proyecto tiene más de 50 componentes y contiene muchos componentes de orden superior, las pruebas manuales pueden llevar todo un día de trabajo. E incluso con este enfoque, pueden quedar errores que nadie se dará cuenta.
Además, escribir pruebas ayuda a mejorar la estructura de su código dividiéndolo en módulos. Esto lo ayudará a encontrar errores más rápidamente y protegerá el proyecto de fallas de producción. El objetivo de las pruebas automatizadas es que ayuda a que un proyecto en crecimiento se desarrolle en una etapa en la que las pruebas manuales ya no pueden confirmar que el código funciona correctamente.
Es cierto que si no tiene el hábito de crear pruebas, usted, al tener un proyecto bastante grande, no podrá escribirlas de inmediato. Es por eso que debe comenzar a escribir pruebas desde el principio. Si no está seguro de dónde comenzar a probar su proyecto, comience con las pruebas de integración . El punto es que lo más importante en las pruebas es confirmar que sus componentes interactúan correctamente entre sí.
3. Aplicar herramientas adicionales que ayuden a escalar la aplicación.
Por lo general, al comienzo del proceso de desarrollo de los proyectos de React, no es necesario utilizar una gran cantidad de herramientas auxiliares. Pero, dado que estamos hablando de proyectos que pueden llegar a ser bastante grandes, vale la pena señalar que las herramientas especializadas facilitarán enormemente el trabajo en ellos. Aquí hay una descripción de algunos de ellos:
- El uso de Prettier y ESLint ayuda a los programadores de un equipo a escribir código coherente. Estas herramientas pueden ayudar a reducir la sintaxis y otros errores en su código. Los proyectos se benefician del uso de bibliotecas auxiliares como React Router , date-fns , react-hook-form .
- TypeScript Redux , , . , .
- - , React , .
- El uso de Bit le permite organizar el trabajo con componentes presentados como bloques de construcción independientes de una aplicación. Esto significa que puede probar y renderizar componentes de forma aislada. Este enfoque para trabajar con componentes facilita su mantenimiento y reutilización.
- En lugar de create-react-app, puede usar las herramientas Next.js correspondientes para crear nuevas aplicaciones React .
Estas herramientas te ayudarán a mantener una gran base de código de la aplicación React. Pero a la hora de elegir herramientas, tenga en cuenta que cada una de ellas aumenta el nivel de complejidad del proyecto. Antes de incluir algo en su proyecto, estudie todo bien y tome una decisión informada.
4. Preste atención a la estructura de archivos del proyecto
Uno de los mejores consejos que he encontrado para desarrollar aplicaciones React escalables es que organizar los archivos de su proyecto y nombrarlos sabiamente puede ayudar a acelerar las cosas. Algunos desarrolladores suelen
componentsutilizar el archivo principal en las carpetas que se almacenan en el directorio index.js.
Los archivos de varios componentes reciben el mismo nombre.
Este enfoque para organizar un proyecto parece bastante razonable, ya que al importar un componente en algún archivo, la instrucción correspondiente es bastante simple:
import Button from '../components/Button';
Pero, ¿qué pasa si abre los archivos de dichos componentes en un editor?
En todas partes, solo index.js.
Será un inconveniente navegar por ellos. No es fácil determinar a qué componente pertenece cada uno
index.js. Sin embargo, si cambia el nombre de estos archivos para que coincidan con los nombres de los componentes, las instrucciones de importación se verán menos atractivas:
import Button from '../components/Button/Button';
¿Cómo estar en esta situación? Por ejemplo, mi equipo llegó a la siguiente solución: en la carpeta del componente hay un archivo con un código cuyo nombre corresponde al nombre del componente, y al lado está el
index.jsque exporta el componente.
Archivo de código de componente e index.js exportando el componente
También colocamos CSS y archivos de prueba unitaria en el directorio de componentes. Con este enfoque, cada directorio de componentes contiene todo lo que es relevante para el componente correspondiente.
Componente autónomo
5. Cree una biblioteca de componentes
Es mejor comenzar a construir una biblioteca de componentes al principio de su proyecto, en lugar de esperar a que crezca. Los componentes, en el proceso de trabajar en ellos, pueden diseñarse como unidades independientes adecuadas para uso repetido. Se puede crear una biblioteca de componentes usando Bit, ya sea usando el recurso bit.dev o implementando el sistema en casa.
6. Separe la lógica de los componentes de sí mismos mediante ganchos.
A medida que el proyecto crece, puede notar que la lógica de algunos componentes se usa una y otra vez en diferentes lugares. Puede utilizar ganchos propietarios para organizar el intercambio de lógica de componentes.
Por ejemplo, tenemos una aplicación para calcular puntos en un partido de baloncesto.
Aplicación para anotar en un juego de baloncesto
Si observa el código de esta aplicación, parecería que en los archivos
HomeTeam.jsyAwayTeam.jsusa la misma lógica para trabajar con el medidor. En tal situación, cuando se usa el mismo código para administrar la interfaz, puede separar ese código del componente y ponerlo en un archivo separado.
Aquí he separado el código para almacenar el estado del contador y la lógica para aumentar el contador en un archivo separado
util.js. Este archivo se importa a componentes.
Los ganchos son, en esencia, funciones ordinarias que devuelven algún valor. Con su ayuda, puede diseñar el código que está destinado a ser reutilizado en varios componentes.
Salir
Siempre tenga en cuenta que desarrollar aplicaciones React a gran escala es una tarea compleja que requiere tomar decisiones que tengan en cuenta los intereses de los usuarios y desarrolladores de dichas aplicaciones. La elección de recomendaciones que tiene sentido seguir cuando se trabaja en cada proyecto específico depende de qué tan buenas sean estas recomendaciones para quienes usan el proyecto y para quienes lo están desarrollando.
Al elegir las herramientas y técnicas que se utilizarán en el desarrollo de proyectos, vale la pena experimentar. Esto le permitirá elegir exactamente lo que beneficiará a su aplicación React. Espero que los consejos que te compartí hoy te sean de utilidad.
¿Qué herramientas y técnicas de desarrollo utiliza al crear proyectos de React que necesitan escalar bien?
