1.5 Pensando en React
En la documentación de React, encontrarás una sección llamada “Pensar en React” (https://react.dev/learn/thinking-in-react). En ella se describe cómo debes proceder al crear una aplicación. En este punto, el enfoque orientado a componentes de React desempeña un papel destacado, lo que da como resultado una aplicación que consta de un árbol de componentes. Puedes aprovechar este hecho durante la fase de creación y seguir un proceso general de cinco pasos.
El proceso de desarrollo siempre comienza con una idea concreta: en este caso, bastará con una simple maqueta. Como ejemplo concreto, examine el formulario de la Figura 1.5.
1.5.1 Descomponiendo la UI en una jerarquía de componentes
Un componente es un elemento básico de una aplicación. En el caso más simple, puedes representar los límites de los componentes en tu maqueta mediante rectángulos. Para ello, debes proceder desde los componentes más grandes hacia los más pequeños.
Un componente debe realizar una única tarea. Por ejemplo, puedes dividir el formulario en secciones individuales y estas a su vez en la descripción y el campo del formulario.
1.5.2 Implementando una versión estática en React
A continuación, puede implementar estáticamente los componentes identificados en el paso anterior. Esto crea una colección de componentes que puede utilizar en el desarrollo posterior de su aplicación.
Los componentes individuales se pueden anidar y la información se puede transmitir a través de accesorios dentro de la jerarquía de componentes.
1.5.3 Definición del estado mínimo de la IU
El estado de la jerarquía de componentes contiene tanto los datos que se van a mostrar como el estado de las partes visibles individuales del componente. Al modelar el estado, asegúrese de no producir duplicados. Estos deben sincronizarse durante el tiempo de ejecución de la aplicación y conllevan el riesgo de errores e inconsistencias.
1.5.4 Definición de la ubicación del Estado
Ahora que sabe qué datos necesita, todavía debe determinar la ubicación adecuada para ellos. Como regla general, debe colocar el estado donde se necesita directamente. Una excepción a esto es cuando coloca el estado en una ubicación principal para pasar la información a varios componentes secundarios.
1.5.5 Modelado del flujo de datos inverso
La información del estado se transmite a los componentes secundarios mediante propiedades. Si es posible que los componentes secundarios modifiquen partes del estado, debe implementarlo mediante funciones. En este caso, se transmiten funciones del componente principal al componente secundario en las que se modifica el estado del componente principal.
Incluso puedes crear toda tu aplicación siguiendo este esquema. Con el tiempo, puedes crear tu propia biblioteca de componentes que puedes reutilizar, lo que acelera tu trabajo de desarrollo en su conjunto.