Reactのプロジェクト


## 関連記事

* [Reactのスタート](http://qiita.com/park-jh/items/63bf0f013c998c5572aa)
* Reactのプロジェクト
* [Reactで挨拶](http://qiita.com/park-jh/items/bffaec5d05a96850e91b)
* [ReactでTrelloみたいなToDoリスト＜1＞ props](http://qiita.com/park-jh/items/f3f6162cee982eb9e6f3)
* [ReactでTrelloみたいなToDoリスト＜2＞ state](http://qiita.com/park-jh/items/0b71fd9c7e6cc8cbe844)
* [ReactでTrelloみたいなToDoリスト＜3＞ prop-types](http://qiita.com/park-jh/items/6a8eac233e3f3ae61f32)
* [ReactでTrelloみたいなToDoリスト＜4＞ immutability-helper](http://qiita.com/park-jh/items/6166434f80bc186f8c77)

## Reactアプリの生成

create-react-appでreact-studyというプロジェクトを生成してみよう。

```sh
% create-react-app react-study
```

babelやbrowserifyと組んだコマンドを実行したり、webpackの設定ファイルを書く必要もない。
create-react-appが全部やってくれる。
もちろん隠されているがwebpackを使っているので、カスタマイズするためにはwebpackの知識が必要になる。

## Reactアプリの起動

生成されたプロジェクトをブラウザーで確認してみよう。

```sh
% cd react-study
% yarn start
```

自動でデフォルトブラウザーが開き、「Welcome to React」と言う挨拶が見える。

## Reactアプリの構造

```sh
.
├── README.md
├── node_modules   # Installed by Create React App
├── package.json   # The only app config file
├── public
│   ├── favicon.ico
│   ├── index.html # Default page template
│   └── manifest.json
├── src            # App source lives here
│   ├── App.css    # Component specific CSS
│   ├── App.js     # Custom component definition
│   ├── App.test.js
│   ├── index.css
│   ├── index.js   # Root component definition
│   ├── logo.svg   # Import image
│   └── registerServiceWorker.js
└── yarn.lock
```

## Airbnb JavaScript Style Guide

* スタイルガイドとは
コーディングのルールで大体こんな感じでコーディングしたら、読みやすい綺麗なコードになるという規約の集まりだ。
Airbnbはreactで開発している大手会社で自分たちが使っているスタイルガイドを公開している。

* 英語
https://github.com/airbnb/javascript

* 日本語
http://qiita.com/koukun/items/e64762e407b8dd5e0247

和駅されたものもqiitaにあったので、紹介する。
必ず読んでみよう。

## eslint-config-airbnb

Airbnbは、スタイルガイドの通りにしたのかチェックするライブラリも提供している。
eslint-config-airbnbと言う。これを使うためには下記のようなものが必要だ。

* ECMAScript 6+(ES6以上)
* React
* eslint
* eslint-plugin-import
* eslint-plugin-react
* eslint-plugin-jsx-a11y

使い方や設置方法はeslint-config-airbnbのreadmeに詳細に書いている。
eslint-config-airbnbを使うためには依存関係にあるパッケージも一緒に設置しなければならない。
次は、[eslint-config-airbnbのreadme](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb)からそのまま持ってきた。

```sh
% npm info "eslint-config-airbnb@latest" peerDependencies

{ eslint: '^3.19.0',
  'eslint-plugin-jsx-a11y': '^5.0.1',
  'eslint-plugin-import': '^2.2.0',
  'eslint-plugin-react': '^7.0.1' }
```

eslintの実行速度を上げるためのeslint_dというパッケージもある。
eslintとeslint_dはvimなどのEDITORでも使えるので、グローバルで設置しよう。
eslintはv3.19.0で設置することを忘れずに！

```sh
% yarn global add eslint@3.19.0
% yarn global add eslint_d
```

Linux又はmacOSでは下記のコマンドを使えばいいだろう。
依存関係にあるパッケージすべてが設置される。
~~開発に関わるパッケージなので、npmなら--save-dev、yarnなら--devオプションを付ける。~~
プロジェクト直下にローカルで設置する場合、vimなどのEDITORでは問題ないが、eslintコマンドで実行する場合エラーが出る。
__eslintがグローバルで設置された場合は、依存性パッケージもグローバルで設置しなければならない。__

* npmで設置する場合

```sh
% cd react-study
% export PKG=eslint-config-airbnb;
% npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm -g install "$PKG@latest"
```

* yarnで設置する場合

```sh
% cd react-study
% export PKG=eslint-config-airbnb;
% npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs yarn global add "$PKG@latest"
```

ウィンドウの場合、eslint-config-airbnbのreadmeを参考。

* eslintコマンドで確認する場合はbabel-eslintも必要だ。

```sh
% yarn global add babel-eslint
% cd react-study
% eslint "src/**"

/Users/devsoul/Apps/study/react-study/src/App.css
  1:1  error  Parsing error: Unexpected token

> 1 | .App {
    | ^
  2 |   text-align: center;
  3 | }
  4 |

/Users/devsoul/Apps/study/react-study/src/App.js.bak
  8:7  warning  JSX not allowed in files with extension '.bak'  react/jsx-filename-extension

/Users/devsoul/Apps/study/react-study/src/App.test.js
  5:1  error  'it' is not defined  no-undef

/Users/devsoul/Apps/study/react-study/src/components/CheckList.js
  24:11  error  JSX props should not use .bind()  react/jsx-no-bind
  25:13  error  JSX props should not use .bind()  react/jsx-no-bind
  32:11  error  JSX props should not use .bind()  react/jsx-no-bind
  33:13  error  JSX props should not use .bind()  react/jsx-no-bind

/Users/devsoul/Apps/study/react-study/src/index.css
  1:1  error  Parsing error: Unexpected token

> 1 | *{
    | ^
  2 |   box-sizing: border-box;
  3 | }
  4 |

/Users/devsoul/Apps/study/react-study/src/logo.svg
  1:1     error    Expected an assignment or function call and instead saw an expression  no-unused-expressions
  1:1     warning  JSX not allowed in files with extension '.svg'                         react/jsx-filename-extension
  1:1     error    'React' must be in scope when using JSX                                react/react-in-jsx-scope
  2:5     error    'React' must be in scope when using JSX                                react/react-in-jsx-scope
  2:5     error    Expected indentation of 2 space characters but found 4                 react/jsx-indent
  3:9     error    'React' must be in scope when using JSX                                react/react-in-jsx-scope
  3:9     error    Expected indentation of 6 space characters but found 8                 react/jsx-indent
  3:2481  error    A space is required before closing bracket                             react/jsx-tag-spacing
  4:9     error    'React' must be in scope when using JSX                                react/react-in-jsx-scope
  4:9     error    Expected indentation of 6 space characters but found 8                 react/jsx-indent
  4:47    error    A space is required before closing bracket                             react/jsx-tag-spacing
  5:9     error    'React' must be in scope when using JSX                                react/react-in-jsx-scope
  5:9     error    Expected indentation of 6 space characters but found 8                 react/jsx-indent
  5:31    error    A space is required before closing bracket                             react/jsx-tag-spacing
  7:7     error    Missing semicolon                                                      semi

/Users/devsoul/Apps/study/react-study/src/registerServiceWorker.js
  17:15  error  Expected parentheses around arrow function argument having a body with curly braces  arrow-parens
  18:11  error  Assignment to property of function parameter 'registration'                          no-param-reassign
  27:19  error  Unexpected console statement                                                         no-console
  32:19  error  Unexpected console statement                                                         no-console
  38:16  error  Expected parentheses around arrow function argument having a body with curly braces  arrow-parens
  47:40  error  Expected parentheses around arrow function argument having a body with curly braces  arrow-parens

✖ 29 problems (27 errors, 2 warnings)
```

~/.eslintrcファイルを用意して次を追加する。

```javascript
  "extends": "airbnb"
```

## VIMの設定

vimには文法チェックのためsyntasticという優れたpluginが存在する。（ここでは割愛する。）
Airbnbのスタイルガイドを適用するためには下記のように設定する。

```vim
  Plug 'scrooloose/syntastic'

... snip ...

  let g:syntastic_javascript_checkers = ['eslint']
  let g:syntastic_javascript_eslint_exec = 'eslint_d'
```

vimでApp.jsを開くと、２ヶ所で❌が表示されている。
![스크린샷 2017-06-16 22.58.01.png](https://qiita-image-store.s3.amazonaws.com/0/93752/206b97ab-ca61-6bb8-2f61-40e05415de60.png "스크린샷 2017-06-16 22.58.01.png")

エラーメッセージはこうなる。

```vim
src/App.js|5 col 1 error| Component should be written as a pure function (react/prefer-stateless-function)
src/App.js|8 col 7 error| JSX not allowed in files with extension '.js' (react/jsx-filename-extension)
```

これらはeslint-plugin-reactから表示されるものだ。
各ruleとその内容を確認したい場合は下記のリンクを参考にしよう。

* https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rules