React es una de las herramientas más populares para crear interfaces de usuario de aplicaciones. Una de las razones es que React brinda a los usuarios un alto nivel de libertad para organizar fragmentos de código, conocidos como componentes, para sus proyectos.
Sin embargo, puede que no siempre esté claro cuál es la mejor manera de organizar estos componentes.
Al seguir algunas mejores prácticas, podrá organizar mejor sus archivos de componentes en React, lo que facilitará la creación y escala de su próximo proyecto de React.
¿React tiene una forma estandarizada de estructurar proyectos?
React no ofrece orientación sobre la estructuración de proyectos dentro de su biblioteca de código abierto.
Esto se debe a que uno de los propósitos principales del ecosistema React es dar a los usuarios el control sobre todos los aspectos de sus proyectos sin obligarlos a hacer las cosas de una manera determinada que los limite.
La razón detrás de esto es que tener una estructura de proyecto que sea demasiado rígida puede conducir a un código frágil, mientras que tener una estructura de proyecto altamente flexible facilita trabajar en proyectos de manera eficiente y desarrollar aplicaciones de alta calidad.
Dicho esto, es útil idear su propia forma de estructurar los proyectos de React. Con el tiempo, es más fácil trabajar en proyectos en crecimiento y comenzar otros nuevos usando la misma estructura.
Consejos para estructurar proyectos React
Agrupar componentes por funcionalidad
Una de las mejores formas de organizar los componentes de React es agruparlos por funcionalidad.
Por ejemplo, puede tomar todos los componentes que se aplican a la página de inicio de su aplicación y agruparlos, luego tomar todos los componentes que se aplican a la página de perfil de su aplicación y agruparlos, y así sucesivamente.
El ejemplo anterior sería una forma más amplia de agrupar componentes por funcionalidad, pero depende de usted definir la funcionalidad y la granularidad que desee.
Digamos que está incrustando un Editor de texto enriquecido para React JS en su aplicación: también puede agrupar todos los componentes de este para ser más específico en su organización.
Agrupar componentes por tipo de archivo
Una alternativa a agrupar los componentes de React por funcionalidad es agruparlos por tipo de archivo.
En este caso, por ejemplo, podría agrupar todos los archivos API, archivos de avatar y archivos de botones de su aplicación.
Esto no es muy diferente a agrupar componentes por funcionalidad, e incluso podría usar un híbrido de los dos métodos.
En última instancia, agrupe sus componentes de la manera que tenga más sentido para usted para que pueda trabajar de manera más eficiente dentro de su proyecto React.
Separe los componentes en carpetas según el rol
Una vez que haya agrupado sus componentes usando el método elegido, también puede ser útil comenzar a anidar ciertos componentes en subcarpetas más específicas.
Por ejemplo, si ha agrupado todos los componentes de su página de inicio, puede anidar todos los componentes de las noticias de la página de inicio de su aplicación en una subcarpeta.
Como alternativa, puede crear una carpeta única dentro de cada grupo para los archivos de recursos de ese grupo para mantener los recursos separados de los componentes reales de la interfaz de usuario.
Nuevamente, haga lo que tenga más sentido para usted aquí.
Evite una estructura de carpetas demasiado profunda
Una vez que haya comenzado a anidar componentes en diferentes subcarpetas, es importante no dejarse llevar demasiado.
Si usa una estructura de carpetas demasiado profunda, se vuelve más complicado escribir importaciones entre componentes y actualizar las importaciones cuando mueve archivos.
Una buena regla general es tratar de limitarse a un máximo de cuatro subcarpetas dentro de cualquier grupo React dado.
No te preocupes demasiado por los detalles al principio.
Al iniciar un nuevo proyecto de React, trate de no concentrarse demasiado en cómo organizará los componentes dentro del proyecto.
Es fácil reorganizar componentes y agregar carpetas a medida que tiene una mejor idea de lo que necesita su proyecto.
Es probable que casi todos cambien la forma en que organizan sus proyectos React en el camino.
Entonces, si no está seguro de por dónde empezar, lo mejor que puede hacer es comenzar a trabajar en su proyecto y organizarse sobre la marcha.
En caso de duda, está bien mantener todos sus componentes en una carpeta al principio, luego comience a agruparlos y anidarlos a medida que trabaja.
Mientras experimenta con la estructuración, apunte a los siguientes objetivos:
- Productividad — debería ser más fácil encontrar los componentes
- Flexibilidad – diferentes desarrolladores deberían tener cierta libertad para modificar la estructura
- Sencillez – debe ser fácil para los nuevos miembros del equipo entender la estructura y ponerse a trabajar
- Movilidad – los componentes móviles deben ser continuos
La línea de fondo
No existe una forma 100% correcta de estructurar sus proyectos React, pero los usuarios de React han desarrollado algunas mejores prácticas para estructurar proyectos a lo largo del tiempo.
Pruebe algunos de los consejos anteriores para organizar sus componentes en React, y siga moviendo las cosas y experimentando hasta que encuentre algo que funcione para usted.