|
1 | 1 | # React / TypeScript / JSPM / Hot-Reload - starter-kit |
2 | 2 | > Modern & Minimalistic boilerplate for building modular apps with React - utilizing power of TypeScript, ES2016, Hot-Reload, async/await, ES Modules & in-browser transpiling powered by JSPM/SystemJS. |
3 | 3 |
|
4 | | -> Main goal of this boilerplate project is to keep up-to-date with the new releases of React / TypeScript / JSPM, and to follow changes in the best practices as they might change with a new updates. |
| 4 | +> Keeping up-to-date with new releases of React / TypeScript / JSPM, and to follow changes in the best practices as they might change with a new updates. |
5 | 5 |
|
6 | 6 | > TypeScript 2.0 on horizon - until the official release I will use beta branch for planned update. |
7 | 7 |
|
8 | 8 | ## Features |
9 | | - |
10 | | -##### Core |
11 | | -- clean with minimal dependencies to make React & TypeScript work |
12 | | -- dead-simple dev server with hot-module-reload and in-browser transpiling - [jspm-hmr](https://www.npmjs.com/package/jspm-hmr) |
13 | | -- easy start - npm install && npm start to start coding |
14 | | -- helpful npm scripts to automate development workflow tasks |
15 | | -- github hooks using husky |
16 | | -- nice css loader while waiting for React to "kick in" |
17 | | -- test harness setup with Tape (blue-tape) - included example code and @types |
18 | | - |
19 | | -##### TypeScript |
20 | | -- Typescript custom ambient definitions for external libraries - best-practices & example |
21 | | -- tsconfig setup for ES2016 support |
22 | | -- using npm @types instead of typings |
23 | | -- async/await - example code (WIP) |
24 | | -- using regenerator instead of Babel to transpile generators/async/await to ES5 (soon with TypeScript 2.1 release it will be not needed anymore) |
25 | | - |
26 | | -##### React |
27 | | -- React usage with TypeScript and ES6 - example code |
28 | | -- Redux Store with TypeScript - example code (TODO) |
29 | | -- Unit-testing behaviour and rendering of React Components (TODO) |
| 9 | +- CLEAN - keep at minimal dependencies |
| 10 | +- FAST-DEV-FEEDBACK-LOOP - dev server with hot-module-reload, bundle-free on-the-fly ES2016/TypeScript transpilation - using [jspm-hmr](https://www.npmjs.com/package/jspm-hmr) |
| 11 | +- BEST-TYPESCRIPT-DEV-WORKFLOW - in browser module loading / no pre-compilation / no bundling / blazing fast hot-module-reload |
| 12 | +- REACT-BEST-PRACTICES - no mixins, no ref string - ref callback, no bind - ES Class Fields, no new functions in render methods, render lists in dedicated components, don't use array index as key, ES6 style PureRenderMixin |
| 13 | +- NO-SETUP - npm install && npm start to start coding |
| 14 | +- COMPLETE-WORKFLOW - helpful npm scripts and tasks, github hooks, linter, test-harness etc. |
| 15 | +- TDD-READY - test-harness setup with Tape (blue-tape) - included example code and @types |
| 16 | +- EXTRAS - css only loader while waiting for React to "kick in" |
| 17 | + |
| 18 | +##### Learn TypeScript from sample code |
| 19 | +- Typescript definitions for third-party libraries |
| 20 | +- solid tsconfig setup for ES2016 support |
| 21 | +- get typings by `using npm i -D @types` |
| 22 | +- async/await |
| 23 | + |
| 24 | +##### Learn React from sample code |
| 25 | +- React with TypeScript using ES6 classes |
| 26 | +- Redux with TypeScript (TODO) |
| 27 | +- Unit-testing the behaviour and rendering results of Components (TODO) |
30 | 28 |
|
31 | 29 | ##### JSPM |
32 | | -- JSPM 0.17.X - most recent beta version up stay up-to-date with best-practices |
33 | | -- added static dev-bundle (external deps) setup for quick full-page reload (this will make JSPM lighting fast) |
34 | | -- bundling for production in `~/dist/` folder - open production build on dev server `http://localhost/dist/` |
35 | | -- importing and bundling CSS dependencies using JSPM `plugin-css` |
| 30 | +- JSPM 0.17.X - most recent version, staying up-to-date with best-practices |
| 31 | +- static dev-bundle setup for fast full-page reload (this will make JSPM/SystemJS workflow super fast in development, certainly as fast as webpack) |
| 32 | +- automatic bundle creation for production in `~/dist/` folder - accessible on dev server `http://localhost/dist/` |
| 33 | +- importing and bundling CSS files using `plugin-css` |
| 34 | + |
| 35 | +NB: - temporarily using regenerator (NO-BABEL) to transpile generators/async/await to ES5 for production bundle (soon with TypeScript 2.1 will be removed completely - only TS) |
36 | 36 |
|
37 | 37 | --- |
38 | 38 |
|
|
0 commit comments