No hay una sola forma de diseñar una aplicación de reacción. Existen múltiples arquitecturas que utilizan varios desarrolladores que funcionan bien para su caso de uso particular. Además, ‘cómo’ diseña su aplicación basada en react.js realmente depende de su aplicación. Dicho esto, aquí hay algunas cosas que es posible que desee tener en cuenta al crear una arquitectura para su aplicación de reacción:
- Jerarquía de componentes: dé la importancia debida a cómo representará su diseño como componentes de reacción. ¿Cómo manejará los modales, varias transiciones de ruta, etc.
- Administración de estado: siempre es mejor externalizar el estado de los componentes para una aplicación grande. Mi contenedor de estado goto es redux.
- Elige un enrutador: ¡Duh! Mi elección de goto es React Router v4. ¿Cómo manejará rutas anidadas, redirecciones de ruta, etc.
- Autenticación: JWT es probablemente la mejor manera de manejar la autenticación para los SPA construidos usando react (o cualquier otro marco para el caso). Debe averiguar cómo vinculará la autenticación con las transiciones de ruta, cómo manejará las fallas de autenticación o el vencimiento de la sesión.
- Diseño: debe decidir cómo desea diseñar sus componentes. ¿Le gustaría utilizar el enfoque CSS / LESS / SASS o se sentiría cómodo con un enfoque CSS-in-JS? Si es lo último, ¿qué biblioteca elegirías? Afrodita, glamour, etc.
- Compat: ¿Qué versiones del navegador admitirán? Probablemente tendría que configurar su transpilador babel y postcss en consecuencia.
- Plataforma de datos: ¿cómo se comunicará su aplicación reaccionar con las API? ¿Lanzará su propia plataforma de datos o usará algo como GraphQL para colocar componentes y datos? Utilice retransmisión o cliente apollo.
- Representación del lado del servidor: creo que este es un requisito obligatorio para cualquier aplicación web nueva. Es bastante sencillo implementarlo.
- Animaciones: ¿Qué biblioteca de animación te gustaría elegir con reaccionar? ReactMotion es muy popular, pero Greensock es realmente poderoso.
- Formularios: los formularios son bastante tediosos para funcionar correctamente en React. Casi siempre es una buena idea usar una biblioteca para administrar las interacciones de los formularios. Redux-Form, RxJS o el Formik más reciente son bastante buenos en esto. También tendría que descubrir cómo desea integrar el envío de formularios con su plataforma de datos.
- División de código: las aplicaciones más grandes desearían esta capacidad para que solo los paquetes relevantes se descarguen perezosamente, lo que ayuda a aumentar el tiempo para la primera interacción.
- Herramientas de desarrollo: ¿Cómo va a configurar una tubería de desarrollo? La herramienta goto es un paquete web, pero se puede configurar de muchas maneras diferentes para diferentes entornos. Cómo lo configurará para su aplicación es lo que importa. Un buen punto de partida sería expulsar CRA y verificar su configuración de paquete web.
- Pruebas: ¿Cuál es el marco de prueba de unidad que elegirías? ¿Las pruebas de instantáneas serían algo de valor para su aplicación? ¿Cómo integraste todo esto en CI?
- Recuperación e informes de errores: cómo informará errores inesperados y cómo se recuperará de ellos. Esto depende mucho de las otras elecciones arquitectónicas que hubieras hecho. Sentry es una opción popular para informar errores.
Estas son algunas de las cosas que deben tenerse en cuenta al diseñar una aplicación de reacción de fuerza industrial. La lista puede parecer desalentadora, pero no es mi intención hacerla así.
Espero que esto te ayude a comenzar.
- ¿Cómo obtener dinero de mi familia para mi proyecto web? O debería encontrar otra manera
- Cómo pasar un formulario HTML de un valor de entrada a otro valor de entrada en la misma página
- ¿Es ético agregar una licencia a una biblioteca Javascript?
- ¿Hay algún servicio gratuito de alojamiento web https?
- ¿Por qué desarrollar con HTML5 cuando se admiten navegadores antiguos?
