Update eslint 1.10.3 -> 2.2.0

`package.json` ``` "devDependencies": { "babel-eslint": "5.0.0-beta6", "eslint": "1.10.3", "eslint-plugin-react": "3.16.1" } // ↓ "devDependencies": { "babel-eslint": "5.0.0", "eslint": "2.2.0", "eslint-plugin-react": "4.1.0" } ``` `.eslintrc` ``` : "ecmaFeatures": { "modules": true, "jsx": true, "experimentalObjectRestSpread": true }, : "rules": { "key-spacing": [2, {"mode": "minimum"}], "space-after-keywords": 2, "space-before-keywords": 2, "space-return-throw-case": 2, : "react/jsx-uses-react": 1 }, : // ↓ : "parserOptions": { "ecmaFeatures": { "modules": true, "jsx": true, "experimentalObjectRestSpread": true } }, : "rules": { "key-spacing": [2, {"mode": "minimum"}], : "react/jsx-uses-vars": 1, "react/jsx-uses-react": 1 }, : ```

Jest example

Jestは要求されるpackageが少ないので個人的にはいいかなと思うが結構いろんなところで躓くので例を置いとく * mockで嵌りまくるのですべてoffに `jest.autoMockOff();` * デフォルトのままだとdecoratorsを含むtestでこけるので独自のpreprocessorを作って回避 `.jestrc` ``` : "scriptPreprocessor": "<rootDir>/preprocessor.js", : ``` * test frameworkを設定してJUnit test report を吐くように `test-reports/*.xml` `.jestrc` ``` : "setupTestFrameworkScriptFile": "<rootDir>/test-framework.js", : ``` * test coverageも吐くように(これはオプションつけるだけ) `coverage/*` `.jestrc` ``` : "collectCoverage": true, : ``` * preprocessorをごちゃごちゃ変えてるとcacheが悪さをするので`disable`に `.jestrc` ``` : "preprocessCachingDisabled": true, : ``` source code https://github.com/fiahfy/react-examples/tree/master/jest

react-routerの最小構成

`react-router@1.0.3` を利用した場合の最小構成 react-routerに関してはバージョンによって結構仕様が変わるのですぐに陳腐化しそうな気がする source code https://github.com/fiahfy/react-examples/tree/master/react-router

Babel6 で decorators を使う

Babel6+webpack で decoratorsを含むコードをコンパイルすると以下のエラーが出る (Babel5なら問題無いらしいがそれはそれで面倒なので) ``` ERROR in ./src/entry.js Module build failed: SyntaxError: ./src/entry.js: Decorators are not supported yet in 6.x pending proposal update. 11 | 12 | @backgroundRed > 13 | class App extends Component { | ^ 14 | static propTypes = { 15 | message: PropTypes.string 16 | }; ``` `babel-plugin-transform-decorators-legacy` をinstall ``` $ npm i babel-plugin-transform-decorators-legacy -S ``` `webpack.config.js` の`babel-loader` にpluginsを追加 ``` : module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel', query: { plugins: ['transform-decorators-legacy'], // <-- presets: ['es2015', 'stage-0', 'react'] } } ] } : ``` source code https://github.com/fiahfy/react-examples/tree/master/decorators

React.js minimum app (ES2015+ES7 feature)

React.js (ES2015+ES7 feature)の最小構成 * babel6+webpack * webpack config file(webpack.config.bable.js)もES2015で記述 * サーバ側の実装は無し。`server.js` は `index.html` を返すだけなので `express` で適当に source code https://github.com/fiahfy/react-examples/tree/master/minimum