React Tutorial Example (Package)


React や Redux の パッケージ はバージョンが更新されることがあります。
パッケージの管理には [npm](https://www.npmjs.com/) や [yarn](https://yarnpkg.com/) などの管理ツールを利用します。
[前回](http://qiita.com/ogomr/items/1f8f18a18ac9c2e79179) のアプリケーションの パッケージ を変更してみましょう。

## Learning

* `npm-check-updates` で `package.json` を更新する。
* `yarn` で `webpack` を更新する。

## Environment

* node: v6.9.1
* npm: v4.0.3
* yarn: v0.17.9

## Comment Box Form

* 完成される [Source Code](https://github.com/ogom/react-comment-box-example/tree/package) のファイルリストです。

```bash
$ tree -a -I node_modules
.
├── .babelrc
├── app
│   ├── actions
│   │   └── index.js
│   ├── components
│   │   ├── Comment
│   │   │   └── index.js
│   │   ├── CommentBox
│   │   │   ├── index.js
│   │   │   └── style.css
│   │   ├── CommentForm
│   │   │   └── index.js
│   │   ├── CommentList
│   │   │   └── index.js
│   │   └── global.css
│   ├── containers
│   │   └── App
│   │       ├── index.js
│   │       └── style.css
│   ├── index.js
│   ├── reducers
│   │   └── index.js
│   └── store
│       └── index.js
├── index.html
├── package.json
├── webpack.config.js
└── yarn.lock
```

*Let's hands-on*

### Setup application

* `git clone` コマンドでアプリケーションをダウンロードします。
* `npm install` コマンドで依存するモジュールをインストールします。

```bash
$ git clone https://github.com/ogom/react-comment-box-example.git
$ cd react-comment-box-example
$ git checkout postcss
$ npm install
```

### Start HTTP Server

* `npm start` コマンドで *Webアプリケーション* を実行します。
* ブラウザで http://localhost:4000 をロードすると **Comment Box Example** が表示されます。

```bash
$ npm start
$ open http://localhost:4000
```

(API Server は [React Tutorial Example (Express)](http://qiita.com/ogomr/items/b90c68764c3c75cf501e) をご利用ください。)

## npm check updates

* パッケージの更新の確認は `npm-check-updates` を利用します。

```bash
$ npm install -g npm-check-updates
```

### ncu

* `ncu` コマンドで *package.json* から更新の対象が解ります。

```bash
$ ncu
 css-loader      ^0.23.1  →  ^0.26.0
 jquery           ^2.2.4  →   ^3.1.1
 postcss-loader   ^0.9.1  →   ^1.1.1
 redux-actions   ^0.10.0  →   ^1.1.0
```

### ncu upgrade

* `ncu -u` コマンドで *package.json* を更新します。

```bash
$ ncu -u
 css-loader      ^0.23.1  →  ^0.26.0
 jquery           ^2.2.4  →   ^3.1.1
 postcss-loader   ^0.9.1  →   ^1.1.1
 redux-actions   ^0.10.0  →   ^1.1.0
```

```diff:package.json
-    "css-loader": "^0.23.1",
+    "css-loader": "^0.26.0",
-    "jquery": "^2.2.4",
+    "jquery": "^3.1.1",
-    "postcss-loader": "^0.9.1",
+    "postcss-loader": "^1.1.1",
-    "redux-actions": "^0.10.0",
+    "redux-actions": "^1.1.0",
```

### ncu upgrade (all)

* `ncu -a` コマンドは更新の対象以外の パッケージ も更新します。

```bash
$ ncu -a
 css-loader      ^0.23.1  →  ^0.26.0
 jquery           ^2.2.4  →   ^3.1.1
 postcss-loader   ^0.9.1  →   ^1.1.1
 redux-actions   ^0.10.0  →   ^1.1.0
```

```diff:package.json
   "devDependencies": {
-    "autoprefixer": "^6.3.6",
+    "autoprefixer": "^6.5.3",
-    "babel-core": "^6.9.1",
+    "babel-core": "^6.18.2",
-    "babel-loader": "^6.2.4",
+    "babel-loader": "^6.2.8",
-    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-es2015": "^6.18.0",
-    "babel-preset-react": "^6.5.0",
+    "babel-preset-react": "^6.16.0",
-    "css-loader": "^0.23.1",
+    "css-loader": "^0.26.0",
-    "jquery": "^2.2.4",
+    "jquery": "^3.1.1",
-    "postcss-import": "^8.1.2",
+    "postcss-import": "^8.2.0",
-    "postcss-loader": "^0.9.1",
+    "postcss-loader": "^1.1.1",
     "precss": "^1.4.0",
-    "react": "^15.1.0",
+    "react": "^15.4.1",
-    "react-dom": "^15.1.0",
+    "react-dom": "^15.4.1",
-    "react-hot-loader": "^1.3.0",
+    "react-hot-loader": "^1.3.1",
-    "react-redux": "^4.4.5",
+    "react-redux": "^4.4.6",
-    "redux": "^3.5.2",
+    "redux": "^3.6.0",
-    "redux-actions": "^0.10.0",
+    "redux-actions": "^1.1.0",
-    "remarkable": "^1.6.2",
+    "remarkable": "^1.7.1",
     "style-loader": "^0.13.1",
-    "webpack": "^1.13.1",
+    "webpack": "^1.13.3",
-    "webpack-dev-server": "^1.14.1"
+    "webpack-dev-server": "^1.16.2"
   }
 }
```

### ncu newest

* `ncu -n` コマンドで *latest stable version* が解ります。

```bash
$ ncu -n
 react-redux          ^4.4.6  →     ^5.0.0-rc.1
 webpack             ^1.13.3  →  ^2.1.0-beta.27
 webpack-dev-server  ^1.16.2  →  ^2.1.0-beta.12
```

## yarn

* npm より爆速な yarn を利用します。
  * node yarn なので *nyarn(にゃーん♪)* と読むとかわいい！

```bash
$ npm install -g yarn
```

### yarn install

* `yarn` コマンドでパッケージがインストールされます。
  * `yarn.lock` ファイルが作成されます。

```bash
$ yarn
```

### yarn upgrade

* `yarn upgrade` コマンドでパッケージの更新をインストールします。
  * `yarn upgrade-interactive` コマンドはパッケージの更新を対話式でインストールできます。

#### react-redux (rc)

* バーションを指定するには `yarn upgrade [package]@[version]` コマンドを利用します。
  * `react-redux` 5系から速度が改善されたので使いたい！

```bash
$ yarn upgrade react-redux@5.0.0-rc.1
```

```diff:package.json
-    "react-redux": "^4.4.6",
+    "react-redux": "5.0.0-rc.1",
```

#### webpack (beta)

* タグを指定するには `yarn upgrade [package]@[tag]` コマンドを利用します。
  * `webpack` 2系から速度が改善されたので使いたい！
* PostCSS のライブラリが依存するようになったので削除します。
  * 依存が `yarn.lock` で確認できるので便利です。

```bash
$ yarn remove autoprefixer postcss-import precss
$ yarn upgrade webpack@beta webpack-dev-server@beta
```

```diff:package.json
-    "webpack": "^1.13.1",
+    "webpack": "beta",
-    "webpack-dev-server": "^1.14.1"
+    "webpack-dev-server": "beta"
```

* [Migrating from v1 to v2](https://webpack.js.org/guides/migrating/) を参照しながら必要な箇所を修正します。
  * `react-hot-loader` を3系にするには [Hot Module Replacement](https://webpack.js.org/guides/hmr-react/) を参照しましょう。

```diff:webpack.config.js
 var webpack = require('webpack')
-var postcssImport = require('postcss-import')
-var autoprefixer = require('autoprefixer')
-var precss = require('precss')

 module.exports = {
   entry: './app/index',
@@ -17,33 +14,21 @@ module.exports = {
         test: /\.js$/,
         exclude: /node_modules/,
         loaders: [
-          'react-hot',
-          'babel'
+          'react-hot-loader',
+          'babel-loader'
         ]
       },
       {
         test: /\.css$/,
         include: /app/,
         loaders: [
-          'style',
-          'css?modules',
-          'postcss'
+          'style-loader',
+          'css-loader?modules',
+          'postcss-loader'
         ]
       }
     ]
   },
-  postcss(webpack) {
-    return [
-      postcssImport({
-          addDependencyTo: webpack
-      }),
-      autoprefixer,
-      precss
-    ]
-  },
-  resolve: {
-    extensions: ['', '.js', '.css']
-  },
   devServer: {
     hot: true,
     port: 4000,
```

これで アプリケーション の動作が速くなるので開発が捗ります。

Congrats!

----

パッケージは機能追加や高速化、セキュリティなどの理由でバージョンが上がります。
頻繁にあるバージョンアップのたびにアプリケーションのテストをするのは大変ですね。
次回は [テスト](http://qiita.com/ogomr/items/e0001c2744781f004873) を自動化しましょう！