(Based on the cool framework react-redux-starter-kit by @davezuko)
(Actualmente en búsqueda de alguna ayuda con el diseño)
Este proyecto es open-source, actualment desarrollado/mantenido por @fforres.
La idea es mantener información centralizada sobre coworks en el mundo (Además del test de React y su ecosistema en aplicaciones un poco más grandes). (El estado actual de la app está en Coworks.cl )
Si tienes alguna sugerencia, comentario, felicitaciones o reclamos, acá una pequeña lista de como ayudar.
- Quiero ayudar! - (Quieres ayudar con el desarrollo?)
- Con Contenido - (Siempre necesitamos información actualizada!)
- Con Desarrollo - (Porque somos geeks :-))
- Requerimientos - (Que necesitas para ayudar)
- Tecnologías - (Con que tecnologías trabajamos)
¿Tienes algun comentario sobre como hacer hacer este proyecto mucho más mejor? Puedes:
- Enviarnos una sugerencia
- Reportar un Bug O en su defecto
- Hablar en Twitter
- Si quieres donarnos algo para mantener vivo el proyecto o los servidores
- Production
- Make Responsive Better
-
Remove debug bar -
Remove Red-Screen-Of-Death
- Sidebar
- Cambiar SideBar
- Agregar Categorías (Y categorías de Pins)
- Mejorar estilo (Prettify)
- Agregar Búsqueda/Filtrado
- Agregar barra de búsqueda
- MAPA
- Cambiar estilos de pins.
- Agregar "agrupado" de pins.
- Agregar información on hover.
- API
- Agregar roles de usuario (ACL)
- GLOBAL
- Agregar edición de data para Items
- Fix "Loading Screens"
- Make Responsive Better
-
Revisar inmutabilidad de los estados
-
Recargar Condensadores de flujo -
Rearticular Destornilladores Sónicos -
Descombobular Apertura de Holocrones -
Beber café
(Aquí una pequeña guía sobre como contribuir a un proyecto open-source)
- Forkea el repo:
- Clona tu repo:
$ git clone {la direccion de tu repo, en mi caso es: https://github.com/fforres/coworks_client_side.git}
$ cd {nombre del repo}
$ npm install # Instala los modulos necesarios, listados en /package.json (Son varios, así que puede ser lento)
$ npm start # Iniciar el proyecto (AKA: Le t the magic happen :) )
- (Momento de decidir)
- Desarrollando? Usa
npm start
para inciar un server de desarrollo y entra ahttp://localhost:3000
. - Compilando al disco? Usa
npm run compile
.
- Realiza tus cambios, y envía un pull request! :)
Node ^5.0.0
Descárgalo acá
- React (
^0.14.0
)- Includes react-addons-test-utils (
^0.14.0
)
- Includes react-addons-test-utils (
- Redux (
^3.0.0
)- react-redux (
^4.0.0
) - redux-devtools (
npm run dev:nw
para correrlo en otra ventana) - redux-thunk middleware
- react-redux (
- react-router (
^1.0.0
) - redux-simple-router (
^0.0.10
) - Webpack
- CSS modules! <3
- sass-loader
- postcss-loader con cssnano para prefix de estilos y minificación
- Loaders para fonts e imagenes
- Express (Solo para el desarrollo, el entorno de producción es full client-side)
- Karma (Tests!)
- Mocha w/ Chai, Sinon-Chai, and Chai-as-Promised
- PhantomJS
- Babel (
^6.3.0
)react-transform-hmr
para el hot-reloadingreact-transform-catch-errors
conredbox-react
para sentirse mal con el rojo de los errores :)
- ESLint
- Con eslint-config-defaults (airbnb linter :))
- Un
.eslintrc
espcecífico para trabajar con Mocha and Chai.
NOTA: Este proyecto usa debug para mejorar la experiencia de debugging. Para ver todos los mensajes que pueda enviar el proeycto, setea la variable DEBUG
a kit:*
(p.e. DEBUG=kit:* npm start
)
Detalles de los comandos de NPM
npm start
- Inicia el server de desarrollo enlocalhost:3000
. HMR activado para eld esarrollonpm run compile
- Compila la app al disco (por defecto en~/dist
).npm run dev:nw
- Igual quenpm start
, pero abreredux devtools
en una nueva ventana.npm run dev:no-debug
- Igual quenpm start
, pero sinredux devtools
.npm run test
- Corre los test unitarios.npm run test:dev
- Corre Karma, y se queda obserando para re-lanzar los tests cuando existan cambios en el proyecto (No genera reportes) .npm run lint
- Corre ESLint contra el proyecto.npm run lint:tests
- *npm run lint
- Corre ESLint contra los test.npm run deploy
- Corre Linter, Tests, y luego, si no falla, compila la aplicación al disco.
NOTE: Deployando a un entorno concreto? Recuerda especificaro NODE_ENV
para que webpack use la configuracion correcta.
Por ejemplo: NODE_ENV=production npm run compile
compilará tu aplicación con ~/build/webpack/production.js
.
Una configuracion basica del proyecto se puede encontrar en ~/config/index.js
. Ahí se puede setear los directorios src
y dist
, agregar y remover aliases, ajustar la preferencias de vendor, y ETC.
(Si necesitas overrides específicos para un NODE_ENV
, crea un archivo de nombre NODE_ENV
con un prefijo _
en ~/config
(Por ejemplo, para un entorno PREPROD
, el archivo se llamaría ~/config/_preprod.js
).
Configuraciones:
dir_src
- El source code de la aplicacióndir_dist
- Path a la aplicación compiladaserver_host
- Host para el server de expressserver_port
- Puerto para el server de expresscompiler_css_modules
- Si se usarán CSS modulescompiler_source_maps
- Si se generarán source mapscompiler_vendor
- Packages que separaremos en un "Vendor" bundle
The folder structure provided is only meant to serve as a guide, it is by no means prescriptive. It is something that has worked very well for me and my team, but use only what makes sense to you.
.
├── bin # Scripts de Compilacion/Construcción/Desarrollo
├── build # Configuraciones de Build
│ └── webpack # Archivos específicos de configuración para webpack
├── config # Configuraciones del proyecto
├── server # Aplicación de express (con webpack middleware)
│ └── app.js # Archivo de inicio del server de express
├── src # Source code de la aplicación
│ ├── components # Componentes genéricos de React (Dumb components)
│ ├── data # Archivos que emulan apis (DataSource)
│ ├── containers # Componentes que entregan Contexto (e.g. Redux Provider)
│ ├── layouts # Componentes que dictar la estructura de una página
│ ├── redux # Todo-lo-relacionado-con-redux
│ │ └── modules # Reducers/Constantes/Acciones
│ ├── routes # Rutas de la aplicación
│ ├── styles # Estilos globales de la app
│ ├── utils # Utilidades genéricas
│ ├── views # Componentes que viven en una ruta
│ └── app.js # Bootstraping y rendering de la aplicación
└── tests # Tests
TL;DR: Todos son componentes. Layout Un componente que define la estructura de una página, cosas como: Barra de navegación, viewport, barra lateral, footer, espacio/contenedor del contenido. La mayoría de las aplicaciones suelen tener solo un layout, pero sin problemas pueden ser más y por eso es que existe la separación de estos. Views Componeentes que viven en las rutas, generalmente renderizados dentro de un Layout. Esto termina implicando que con esta estructura, cualquier cosa dentro de Components termina siendo un Dumb Component
Webpack está configurado para usar: resolve.root, que te deja importar packages locales como si estuvieras en la raiz de tu directorio ~/src
Por ejemplo:
// Si estamo por ejemplo en: ~/src/views/some/nested/View.js
// lo que era:
import SomeComponent from '../../../components/SomeComponent';
// ahora es:
import SomeComponent from 'components/SomeComponent'; // YEIII :D!
Existen algunas varibales globales en este proyecto, las que pueden ser encontradas dentro de globals
en ~/config/index.js
.
process.env.NODE_ENV
- ElNODE_ENV
cuando se inició el proyecto__DEV__
- true, cuandoprocess.env.NODE_ENV
esdevelopment
__PROD__
- true, cuandoprocess.env.NODE_ENV
esproduction
Este proyecto acepta tanto .scss
como .css
, configuradas mediante CSS Modules.
Luego de ser importadas los estilos on procesados con PostCSS para ser minificados y autoprefijados, luego serán extraidos a un un archivo .css
durante la compilación a producción.
Para agregar un test unitario, solo agrega un archivo con un sufijo .spec.js
dentro de ~/tests
(counter_reducer.spec.js
, por ejemplo). Karma lee todos los archivos automáticamente en la carpeta ~/tests
.
Mocha y Chai están configurados para estar disponibles en esos archivos sin la necesidad de importarlos.
Los reportes de cobertura serán compilados en ~/coverage
por defecto.
Si deseas cambiar que reportes están usados y donde se compilan los reportes, puedes modificar coverage_reporters
en ~/config/index.js
.
Hay una pequeña utilidad (Gracias a StevenLangbroek) para acelerar el proceso de desarrollo con Redux.
En ~/src/utils
hay un export de createReducer
diseñado para ayudar en la creacion de reducers, definidos por Mapeo de Objetos en ves de un Switch.
Lo que alguna ves se vió como esto:
import { TODO_CREATE } from 'constants/todo';
const initialState = [];
const handlers = {
[TODO_CREATE] : (state, payload) => { ... }
};
export default function todo (state = initialState, action) {
const handler = handlers[action.type];
return handler ? handler(state, action.payload) : state;
}
Ahora puede verse así:
import { TODO_CREATE } from 'constants/todo';
import { createReducer } from 'utils';
const initialState = [];
export default createReducer(initialState, {
[TODO_CREATE] : (state, payload) => { ... }
});
Es probable que la nueva ventana para las dev-tools esté bloqueada por un popup blocker, o un blocker de publicidad, así que asegúrate de deshabilitarlo o agregar tu localhost a la whitelist.
Referencia: issue 110
(Based on the cool framework react-redux-starter-kit by @davezuko)