|
1 | | -## _React v15.3.0 / Redux v3.5.2 / TypeScript v2.0_ - starter-kit |
2 | | -> ### (powered by JSPM / SystemJS / Rollup / React-Router / Seamless-Immutable / Fetch) |
| 1 | +## _React v15.3.1 / Redux v3.5.2 / TypeScript v2.0_ - starter-kit |
| 2 | +> ### (Hot-Reload / React-Router / Seamless-Immutable / Fetch / JSPM / SystemJS / Rollup) |
3 | 3 |
|
4 | 4 | > ##### Futuristic, production-ready development environment for building _Component-Driven, Flux Single Page Applications with React, Redux and TypeScript_ - utilizing power of Static Type Checking, ES2016, Async/Await, ES Modules, Linting, Reliable Hot-Reload, Git-Hooks, in browser (on-the-fly) transpilation, bundling with Rollup - powered by JSPM / SystemJS / Rollup. |
5 | 5 |
|
6 | 6 | ### Demo: http://piotrwitek.github.io/react-redux-typescript-starter-kit/ |
7 | 7 |
|
8 | 8 | ### Features |
9 | 9 | - CLEAN - minimal dependencies, no clutter! |
10 | | -- NO-SETUP - read Usage section below |
11 | | -- REACT-BEST-PRACTICES - no mixins / no ref strings / no method binding - instead ES Class Fields / no function creation in render methods / render lists in dedicated components / don't use array index as key / ES6 style PureRenderMixin with PureComponent |
| 10 | +- NO-SETUP - working out-of-the-box (more in Usage section below...) |
| 11 | +- RELIABLE HOT-RELOAD - dev server with `systemjs-hot-reloader` - highly reliable and scalable with increasing modules count (more in Notes section below...) |
12 | 12 | - GREAT-TYPESCRIPT-EXPERIENCE - in browser (on-the-fly) loading / no transpilation step / no bundling step |
13 | 13 | - TYPESAFE-API-CALLS - type checking (request and response object) in calls to REST API, no more problems with service contracts |
14 | | -- FAST-FEEDBACK-LOOP - dev server with system.js hot-reload [jspm-hmr](https://www.npmjs.com/package/jspm-hmr) |
15 | | -- RELIABLE HOT-RELOAD - highly scalable with increasing modules count and more reliable in contrary to Webpack/React-Hot-Reloader (read Notes section below) |
| 14 | +- REACT-BEST-PRACTICES - no mixins / no ref strings / no method binding - instead ES Class Fields / no function creation in render methods / render lists in dedicated components / don't use array index as key / ES6 style PureRenderMixin with PureComponent |
| 15 | +- REACT-ROUTER - included `react-router-redux` to store your routing in state for Time-Travel capabilities |
| 16 | +- IMMUTABLE-STORE - using `seamless-immutable` for simplicity and backwards-compatibility with vanilla JS (no hassle with `toJS()`, `get()`, `getIn()` in your containers and components) |
16 | 17 | - COMPLETE-WORKFLOW - npm scripts for bundling & deploy, github-hooks, linter, test runner etc. |
17 | 18 | - EASY-TESTING - complete testing solution with Tape (blue-tape), Enzyme, JSDOM - functional approach makes it easy to test, you can even write and run test entirely in TypeScript - no transpilation step! |
18 | 19 | - CSS MODULES - simplest and reliable approach for local CSS styles using csjs - https://github.com/rtsao/csjs#faq |
19 | 20 | - BEM and ITCSS - using BEM with Inverted Triangle conventions to give meaning and context to CSS classes |
20 | 21 |
|
21 | | -### Code Examples |
22 | | -- React with TypeScript - production ready |
| 22 | +--- |
| 23 | + |
| 24 | +### Code Examples |
| 25 | +- React and Redux with TypeScript - production ready code samples |
| 26 | +- Flux Standard Actions for Redux - https://github.com/acdlite/redux-actions |
| 27 | +- Redux Reducer Modules - https://github.com/erikras/ducks-modular-redux |
| 28 | + |
| 29 | +### Testing Examples |
| 30 | +- Testing Redux Action Creators |
| 31 | +- Testing Redux Async Actions |
23 | 32 |
|
24 | 33 | --- |
25 | 34 |
|
26 | 35 | ## Roadmap |
27 | | -> __work in progress at https://github.com/piotrwitek/react-currency-converter/tree/redux__ |
28 | | -
|
| 36 | +- Redux async flow with redux-saga - https://github.com/yelouafi/redux-saga/ |
| 37 | +- Time Travel Debugging |
29 | 38 | - CSS Modules using csjs - https://github.com/rtsao/csjs#faq |
30 | | -- Redux with TypeScript - production ready |
31 | | - - innovative approach using TS 2.0 - recently added Tagged Union Types - for solid Redux integration |
| 39 | + |
| 40 | +- REDUX-INNOVATIVE-APPROACH - using TS 2.0 "Tagged Union Types" - for solid Redux integration |
32 | 41 | (https://blogs.msdn.microsoft.com/typescript/2016/08/30/announcing-typescript-2-0-rc) |
33 | | -- Flux Standard Actions for Redux - https://github.com/acdlite/redux-actions |
34 | | -- Redux Reducer Modules - https://github.com/erikras/ducks-modular-redux |
35 | | -- Redux async flow with redux-saga - https://github.com/yelouafi/redux-saga/ |
36 | | -- Immutable State using `seamless-immutable` - simple and backwards-compatible with vanilla JS (no hassle with `toJS()`, `get()`, `getIn()`) |
| 42 | + |
37 | 43 | - Testing with Enzyme (JSDOM) |
38 | 44 | - Testing Component markup (shallowRender) |
39 | 45 | - Testing Component behaviour/interactions (renderIntoDocument, Simulate) |
40 | | -- Testing Redux (selectors, reducers, action creators) |
41 | | -- Integration Testing Redux Store |
42 | | -- ReactRouter |
| 46 | +- Integration Testing in Redux Store |
43 | 47 |
|
44 | 48 | --- |
45 | 49 |
|
|
0 commit comments