reactの環境構築に関連する仲間達。

# Reactに関連する得体の知れないものたち

フロントエンジニア初心者な僕が、Reactを触ってみて、フロントラビリンスに迷い込んだので、わかったことから書いていこうかと思います。
書き出したばかりのため、恐ろしく簡単な文章です。
こんな要素があるんだなーくらいで流しちゃってください。(2016/09/27)

* [React.js](#reactjs)
* [React-Router](#react-router)
* [Redux](#Redux)
* [babel](#babel)
* [webpack](#webpack)
* [eslint](#eslint)
* npm(package.json)
* ES6(ES2015)
* [browserify](#browserify)
* dotenv
* [番外編](#番外編)
* [今抱えてる問題](#今抱えてる問題)

## React.js

僕の解釈。

* Jsのフレームワークで、jqueryみたいなdom操作ができるよ。
* ちょっと前から流行ってるコンポーネント化できるよ(コンポーネント化しろよ的な)
* シングルページで作ろうね。
* HTMLもjs内に持っちゃうよ。

こんな感じ。
詳しくは[ここ](http://qiita.com/tomzoh/items/7fabe7cb57dd96425867)なんかみてもらったらわかりやすいかも。


## React-Router

* ページ遷移用のモジュール
* [URL直叩きするとNOT FOUNDになるのを回避する方法](http://qiita.com/murabo/items/28638a8620490b51e6dd)

サンプル

```js:sample.js

// 下記の感じでaタグのリンクが生成される感じ。
<Link to={{ pathname: '/add' }} className="mdl-navigation__link">追加</Link>
```


```js:index.js

// ルートとなるjsに下記みたいな感じで、表示するコンポーネントを、pathで対応付けて宣言
import { Router, Route } from 'react-router';
render((
  <Router history={browserHistory}>
    <Route path="/" component={IndexPage} />
    <Route path="/add" component={AddPage} />
    <Route path="/:id" component={DetailPage} />
  </Router>
  ),
  document.getElementById('root')
);
```

```js:sample2.js
// onclickで遷移させたい時とか。(eはいらないかも)
import { Link, browserHistory } from 'react-router';

class Jump extends Component {
  showDetail(e, id) {
    browserHistory.push(`/ ${id}`);
  }

  render() {
    return (
      <div id={ this.props.key } onClick={(e) => {this.showDetail(e, this.props.key);}} >
        jump
      </div>
    );
  }
}
```

## Redux

Reduxは、Fluxの派生したもの。
Fluxとは、アーキテクチャ(Observer パターン)を実現させるもの。
構造化して、viewとactionとstoreを明確に分離させる。
reactとreduxを繋げるために、
* react
* redux
* react−redux
が必要。
react-routerで、遷移を制御している場合で、ページの状態もreduxに管理したい場合は、上記に加えて
* react-router
* react-router-redux(他にも類似のものがある)
が必要。
(現在調査中で、別途まとめます)

## babel

* ES6形式のコードを、従来の規格のコードに変換してくれるツール。


## Webpack

僕の解釈

* コンポーネントごとに作ったjsとかをビルドしてくれる。
* ミニファイして、いっこにまとめてくれる。
* mapファイルができて、静的ファイルだけでアクセスしようとすると怒られる<br/>(mapファイル消したら怒られなくなる)
* [ここ](http://qiita.com/ossan-engineer/items/8352bdeab9ce8c8c00ef)にまとまってますが、gruntやgulpを使わないでビルドする存在らしい。
<br/>(↑機能フラグの内容ありがたい！)
* `npm install -g webpack` で、グローバルインストールしておかないと、webpackコマンド使えない(?)<br/> devだけでもokって記載がちょこちょこ見受けられたので、書いてみる。

#### watchしたら怒られた。

` webpack --watch` 実行すると下記のエラーで怒られた。


```
ERROR in ./src/App.css
Module parse failed: xxxx/src/App.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
```

対策

```js:webpack.config.js
  module: {
    /* loaderの設定 */
    loaders: [
      {
        test: /\.js$/, // 対象となるファイルの拡張子（正規表現可）
        exclude: /node_modules/, // 除外するファイル/ディレクトリ（正規表現可）
        loader: 'babel-loader', // 使用するloader
        query: {
            presets: ['es2015', 'react']
        }
      },
      // 下記を追記
      { test: /\.css$/, loader: "style!css" },
      { test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url?limit=8192' },
      { test: /\.(otf|eot|ttf)$/, loader: "file?prefix=font/" },
      { test: /\.svg$/, loader: "file" }
      // ここまで
    ]
  },
```

#### index.htmlを生成させたくない。

webpack使って、index.htmlは自分で用意したい場合

```js:webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');

  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',  //出力ファイル名
      template: './index.html' //templateの場所
    })
  ]
```


## eslint

僕の解釈

* ご存知の方も多いと思うが、チェックツール

[ここ](http://umi-uyura.hatenablog.com/entry/2015/11/02/191558)らへんを参考に、設定しました。
何も考えずにインストールして使おうとすると、nodeをチェックするような状態になりエラーが大量にでます。


## browserify

僕の解釈

* webpackと同業者でビルドする人？
* webpack使うため出番なし？

## 番外編

### 間違ってインストールしちゃったやつを消す

インストールと同じように、uninstallに、`--save-dev`オプションでパッケージから削除

```command
npm uninstall --save-dev browserify
```

### 環境ごとに定数を変えたい

開発環境や、ステージング、本番で、APIのエンドポイントを変えたい場合に、

```js:index.js

let url = "http://127.0.0.1:8000/api/";

if (__PRO__) {
  url = "http://ステージングのURL/pr/api/";
}

process.env.url = url;

render((
  <Router history={browserHistory}>
    <Route path="/" component={IndexPage}/>
    <Route path="/add" component={AddPage}/>
    <Route path="/:id" component={DetailPage}/>
  </Router>
  ),
  document.getElementById('root')
);

```

っと、processに追加。

他のコンポーネントから、`process.env.url`でアクセスできるようになる。

`__PRO__`は、

```build.jsとかwebpack.jsとか
var definePlugin = new webpack.DefinePlugin({
  __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
  __PRO__: JSON.stringify(JSON.parse(process.env.BUILD_PRO || 'true'))
});
```

に追加。


## 今抱えてる問題

### ReduxやらFluxやらが色々ありすぎ
サンプルもわかりにくくて、迷走中




#### 関連記事
- [react.jsで、ポップアップと、親の再描画(更新)について](http://qiita.com/murabo/items/55b2afc373140c288352)

- [react material-ui のサンプル](http://qiita.com/murabo/items/c9b3dfee3ff9d4afbda7)