Awesome
react-mobx-seed
Seed project for React + MobX
Getting started
Create your own project on Github or elsewhere. Then add a git-remote pointing to this repo. Let's name it mobx-seed
. Merge into your own branch.
> git remote add mobx-seed https://github.com/sapientglobalmarkets/react-mobx-seed.git
> git pull mobx-seed master
At this point you should have all the seed files. Now you can run:
> npm install
And you are off to the races!
Libraries used
Language
- ES2015 + stage-1
Application Frameworks
- React
- PostCSS (cssnext + precss + css-modules)
- Optional static type-checking with either Flow or tcomb type annotations
State Management
- MobX
Testing
- Mocha
- Karma
- Enzyme
- Coverage with Istanbul
Build
- Webpack
- Webpack Dev Server
- ESLint
- Plop (
generator
) - React-Hot-Reload
Type Checking
Type checking is optional and gradual. If you add types to your arguments or functions returns, they will be checked. If not, they won't.
Here is an example of not using type annotations.
function add(n1, n2) {
return n1 + n2;
}
console.log('add: ', add(3, 4)); // 7
console.log('add: ', add(3, '4')); // '34'
You can continue writing functions like this. You can also do this:
function add(n1: number, n2: number): number {
return n1 + n2;
}
console.log('add: ', add(3, 4)); // 7
console.log('add: ', add(3, '4')); // 'Uncaught TypeError: [tcomb] Invalid value "4" supplied to n2: Number'
console.log('add: ', add(3, null)); // 'Uncaught TypeError: [tcomb] Invalid value null supplied to n2: Number'
I've specified that the both arguments should expect a number and the return value should be a number. Common, built-in types are:
string
boolean
number
Array
Object
Function
number[]
(or alternative syntaxArray<number>
)
These are only basic types. There are many more and you can define your own types as a union of multiple types:
type U = number | string
You can even enumerate which strings are allowed:.
type Suit = "Diamonds" | "Clubs" | "Hearts" | "Spades";
Since this typechecking is done through tcomb and babel, there is no need to add the // @flow
pragma at the top of the file. Typechecking is done in development only.
If you want to remove this functionality completely, delete the tcomb plugin in .babelrc
TODO
- Documentation
- More variety in Tests (interaction, ajax, logic)