Kit de Inicio para react-redux

Uno de los problemas principales que surgen a la hora de comenzar hacer proyectos en react.js es la configuración del webpack y la configuración del mismo react, para ello los boilerplate de react son una alternativa para los que estamos empezando en el mundo de las tecnologías de front-end.

En mi experiencia he encontrado un boilerplate “react-redux-starter-kit” este kit de inicio de react como su nombre lo indica es una excelente herramienta para proporcionar una base estable para la construcción de aplicaciones web modernas. Su propósito no es dictar la estructura de su proyecto para demostrar una aplicación completa del mundo real, sino también para proporcionar un conjunto de herramientas destinadas para hacer que el desarrollo front-end sea mas robusto, fácil, y, sobre todo, divertido.

Estructura Fractal

La estructura que presenta este proyecto es el modelo fractal , donde la funcionalidad se agrupa principalmente por la función en lugar de tipo de archivo Pequeñas aplicaciones se pueden construir usando una estructura de directorios plana. Sin embargo, esta estructura no escala y pueden afectar seriamente a la velocidad del desarrollo cuando el proyecto crezca. A partir de una estructura fractal se permite que su aplicación para conducir orgánicamente su propia arquitectura desde el primer día.

Esta estructura ofrece muchos beneficios que pueden no ser inmediatamente obvio:

  • Las rutas pueden ser agrupados en “trozos” de webpack utilizando código de división y combinación de algoritmo. Esto significa que todo el árbol de dependencias para cada ruta se puede omitir desde el inicio hasta el final.
  • Puesto que la lógica es autónomo, rutas fácilmente se pueden dividir en repositorios separados y se hace referencia con el plug-in DLL para el desarrollo de alto rendimiento flexible y escalable.

Estructura de proyecto

├── build                    # All build-related code
├── public # Static public assets
├── server # Express application
│ └── main.js # Server application entry point
├── src # Application source code
│ ├── index.html # Main HTML page container for app
│ ├── main.js # Application bootstrap and rendering
│ ├── normalize.js # Browser normalization and polyfills
│ ├── components # Global Reusable Components
│ ├── containers # Global Reusable Container Components
│ ├── layouts # Components that dictate major
│ │ └── PageLayout # Global application layout in routes
│ ├── routes # Main route definitions and async
│ │ ├── index.js # Bootstrap main application routes
│ │ ├── Home # Fractal route
│ │ │ ├── index.js # Route definitions and async split
│ │ │ ├── assets # Assets required to render components
│ │ │ ├── components # Presentational React Components
│ │ │ └── routes ** # Fractal sub-routes (** optional)
│ │ └── Counter # Fractal route
│ │ ├── index.js # Counter route definition
│ │ ├── container # Connect components to actions
│ │ ├── modules # Collections
│ │ └── routes ** # Fractal sub-routes (** optional)
│ ├── store # Redux-specific pieces
│ │ ├── createStore.js # Create and instrument redux store
│ │ └── reducers.js # Reducer registry and injection
│ └── styles # Application-wide styles
└── tests # Unit tests

Aquí visita el repositorio de git y empieza con la aventura del desarrollo con React.