$ npm install
$ npm run open:src
- add new constants to
actionTypes.js
- use/add new action creator in
actions/copartiesActions.js
- in your component, call the action creator using
actions
prop like this:onClick={actions.fooThatBar.bind(this)}
- adjust
reducers/coparties.js
to have initial state for your change, and to generate new state based on new constants you added - in your component, read the state using
props.copartiesAppState.get('moo42')
- the state you get is immutable datatype, meaning you need to use getters
more details could be seen in this commit
These are dependencies bundled together even for production build (needed on runtime):
- es6-promise - polyfill for ES6's Promise implementation (needed for AJAX requests tracking) - npm
- immutable - library with data structures that are not allowed to change theirs content - npm
- isomorphic-fetch - wrapper for HTTP requests to backend, working with Promises - npm
- lodash - utility functions for manipulation with arrays, objects, strings and some extras - npm
- object-assign - polyfill for ES6's Object.assign (copies props from one object to another) - npm
- react - react core, providing lifecycle methods, definition and creation of elements - npm
- react-dom - bridge between react core and browser DOM, (eg.
render
andfindDOMNode
functions) - npm - react-redux - utilities functions, reducing boilerplate and providing glue between redux and react - npm
- react-router - URL routing and routes mapping to react components in declarative way - npm
- react-router-redux - maps URL into redux state and redux cycle - npm
- redux - single state and one way data flow framework, super simple and easy to use with any JS library - npm
- redux-immutable - utility allowing to create redux reducers with use of immutable state - npm
- redux-thunk - middleware for redux, allowing to return function from action creator (async actions with promises) - npm
And here are the ones for dev time only, not needed on runtime:
- babel - transpiler from ES6 to "plain old" javascript - npm
- babel-eslint - allow more of the advanced syntax provided by babel to pass eslint - npm
- babel-loader - loader for webpack, see webpack loaders for more details - npm
- babel-plugin-react-display-name - transformer for react components, setting component's name - npm
- babel-plugin-react-transform - wrapper for react components to manage them in different ways - npm
- browser-sync - keeping the developed page in sync across multiple browsers or devices - npm
- chai - assertion library for TDD (and BDD) - npm
- cheerio - core of the jQuery, useful in tests, to easily work with DOM - npm
- colors - just some colors for your console output - npm
- cross-env - working with env variables across platforms - npm
- css-loader - loader for webpack, enabling to link CSS into the bundle automatically. See webpack loaders for more details - npm
- eslint - syntax checking and suggestions, enforcing one code style across whole project - npm
- eslint-loader - loader for webpack, see webpack loaders for more details - npm
- eslint-plugin-react - rules for eslint to allow React specific rules - npm
- file-loader - link any file into bundle, loader for webpack, see webpack loaders for more details - npm
- mocha - test framework for frontend - npm
- node-sass - compilation of sass into css - npm
- parallelshell - run several commands parallelly, in one shell - npm
- react-transform-catch-errors - show errors inside react component, rendered in page - npm
- react-transform-hmr - hot reloading for react - npm
- redbox-react - red box of death, for errors in react components - npm
- redux-devtools - time travel, state and action tracking console for redux - npm
- redux-devtools-dock-monitor - redux console can be moved and resized - npm
- redux-devtools-log-monitor - tree view for redux console - npm
- rimraf - allows to deeply delete dist folder, without prompts and directory errors - npm
- sass-loader - loader for webpack, see webpack loaders for more details - npm
- style-loader - loader for webpack, see webpack loaders for more details - npm
- watch - allows to watch application directory tree for files changes - npm
- webpack - combine modules into packages, split code and decorate your module dependencies with loaders - npm
- webpack-dev-middleware - allows running a dev server, providing in-memory bundled packages - npm
- webpack-hot-middleware - hot reloading bindings for webpack and its dev server - npm
- yargs - passing of command line params into node as a hash - npm