React のバックアップ(No.12)

Tutorial: Intro To React
- Reactチュートリアル: Intro To React【日本語翻訳】

React †

Reactは、Facebookが公開しているユーザーインタフェースを効率的に構築することを目的としたWebフロントエンドフレームワーク（JavaScriptライブラリ）
Reactの特徴
- シンプル ... Reactを使ってUIを実装すると、「アプリケーションがどのように見えるか」を単純に表現できる
- 叙述的 ... コンポーネントの状態がReactによって管理され、データに変更があるときには更新の必要があるコンポーネントだけ更新されるようになる
- コンポーネントベース
  - 「状態」の管理がカプセル化されたコンポーネントを使って、複雑なUIを構築することができる
  - コンポーネントの組み合わせでアプリケーションを構築することにより、コードの再利用やテストなどを実施しやすくなる

エレメントを生成するコードは「JSX」を使うと、よりシンプルに記述できる
JSXはECMAScript（JavaScript）にXMLライクのシンタックスを追加する言語拡張
JSXを使うと、JavaScriptコード中にHTMLタグを埋め込んでいるかのように記述できる

Webページ内でJSXを使用するには、「Babel」を導入する方法が最も簡単
Babelは、ECMAScript（JavaScript）の次期バージョンを現行のブラウザ上で実行可能な形式に変換する機能を持つ、JavaScriptコンパイラ
BabelはJSXシンタックスを変換する機能を持っているため、Babelを導入することでJSXシンタックスを使用できる

↑

構成要素 †

↑

コンポーネント †

Reactでは「コンポーネント」を生成し組み合わせていくことでUIを構築していく
コンポーネントはデフォルトで用意されているものもあれば、自分で定義することもできる
コンポーネントは直接使用するのではなく、インスタンス化して使う
コンポーネントのインスタンスのことを「エレメント」と呼ぶ
Reactではコンポーネントやエレメントといった仮想的なDOMを通してUIを構築する。この仮想的なDOMのことを「Virtual DOM」と呼ぶ。
コンポーネントは、自分自身の「状態」を保持することができる
状態は「state」に保持され「setState」によって変更できる

↑

propsとstate †

React は View を構築するためのデータとして、props とstate の2つを利用する
props ... 親から受け取るデータで、自身のコンポーネントでは更新しない
state ... 自身の状態を表すもので、setStateメソッドで更新する
setStateでsteteが更新されると、Reactはこのツリーを含めてViewを全て更新する
stateは一番上位のルートコンポーネントが管理し、子のコンポーネントはstateを持たず、必要なデータは全て親からpropsとして受け取るステートレスなコンポーネントとして実装するのが一般的
stateを監理するルートコンポーネントを「コンテナコンポーネント」と呼ぶ

↑

開発環境の準備 †

Installation - React

Node.js のインストール
Create React App のインストール
```
$ npm install -g create-react-app
```

プロジェクトの作成、

$ create-react-app [プロジェクト名]
$ cd [プロジェクト名]
$ npm start

雛形の削除
```
$ rm -rf src/*
```

↑

React Router †

Reactのためのルーティングライブラリ
History APIとの連携や、ルーティングに応じたコンポーネントの描画を任せることができる

React Router ではルーティングをコンポーネントによって定義する
コンポーネントをネストすることで、ネストしたルーティングの定義も行える
子のルーティングは props.children に渡される。これにより、階層を持ったURLに対するルーティングが実現できる。

ページ遷移には、React Router が提供する Link や、browserHistory オブジェクトが持つ push メソッドを使用する

React Router は、ルーティングの状態に応じた処理が定義できるライフサイクルメソッドを持っている
- getComponent ... ルーティングに応じて必要なコンポーネントを非同期で読み込みたいときに使用
- onEnter ... 認可処理などの前処理をしてからコンポーネントを表示したい場合などに使用
- onChange
- onLeave

React Router はミドルウェアとしての仕組みも持っている
- react-router-scroll を使うことで、ページ遷移時のスクロールの位置の復元やカスタマイズが可能

↑

React Router ver.4 †

Ver.4 で仕様が結構変わっている！！

以前はreact-routerからimportする仕様だったが、v4はwebとnativeが分かれるようになった
- webの場合は react-router-dom
- nativeの場合は react-router-native
URL起因のパラメータ周りの呼び方変更 this.props.params -> this.props.match.params
Route定義がしれっと無名関数になってる

browserHistoryの取り扱い

ver.3

import { Router, Route, IndexRoute, IndexLink, browserHistory } from 'react-router';
        :
<Router history={browserHistory}>
   <Route path='/' component={App}>
     <IndexRoute component={Top} />
     <Route path='hoge' component={Hoge} />
   </Route>
 </Router>

ver.4

import { Route, BrowserRouter } from 'react-router-dom';
        :
<BrowserRouter>
   <div>
     <Route exact={true} path='/' component={Top}/>
     <Route path='hoge' component={Hoge}/>
   </div>
</BrowserRouter>

IndexRedirect?がなくなり、相対パスでなく絶対パス？

ver.3

<Route path="/one">
  <IndexRedirect to="1" />
  <Route path="1" component={First} />
  <Route path="2" component={Second} />
</Route>

ver.4

<Route path="/one">
  <Switch>
    <Route exact path="/one/1" component={First} />
    <Route exact path="/one/2" component={Second} />
    <Redirect to="/one/1" />  <== パスがマッチしなかった場合は最後に書くこと！
  </Switch>
</Route>

破壊的な変更もあるので、v3で作ったものを無理やり乗せかえるのはやめとけ！

マニュアル ... これをしっかり読んで対応すべし！
- React Router DOM
- React Router Native

ver.4 へのアップデート

$ npm un -S react-router && npm i -S react-router-dom

↑

アーキテクチャパターン †

↑

Flux †

Flux は Facebook が提唱したアーキテクチャパターン

データのフローが一方通行なのが特徴

[Action => Dispatcher => Store => View] => [Action ...

Action
- ユーザイベントが発生した場合や、APIリクエストが完了した場合などに、状態をどのように変更すべきかという情報をまとめたもの
Dispatcher
- ActionをStoreへ届けるためのもの
Store
- アプリケーションの状態を管理するもの
- Dispatcherのイベントを購読し、Actionに応じて状態を変更し、Viewに変更を伝える
View
- Storeのイベントを購読し、Storeが更新されたら自身を更新する
- Storeが管理しているデータをViewのstateとして使い、Storeが更新されたらsetStateを呼び出して子要素にpropsとして渡すことでDOMツリーを更新する

↑

Redux †

React+Redux入門

Reduxのファイル構成は『Ducks』がオススメ

Reduxは、ReactJSが扱うUIのstate(状態)を管理をするためのフレームワーク
Reactではstateの管理するデータフローにFluxを提案しているが、ReduxはFluxの概念を拡張してより扱いやすく設計されている
Reduxはstateを管理するためのライブラリなので、React以外にもAngularJSやjQueryなどと併せて使用することもできる

↑

Reduxの3原則 †

Single source of truth
- アプリケーション内でStoreは1つのみとし、Stateは単独のオブジェクトとしてStoreに保持される
State is read-only
- Stateを直接変更することはできず、actionをStoreへdispatchすることでしかStateは変更できない
Mutations are written as pure functions
- Stateを変更する関数（Reducer）はpureな関数にする

↑

webpack †

webpack - MODULE BUNDLER

webpack のチュートリアルをやってみる

webpackは、browserifyと同様、複数のファイルの依存関係を顧慮してビルドを行うツール

↑

webpack-dev-server †

起動
```
$ webpack-dev-server
```
起動（プログレスバー表示、色付けあり）
```
$ webpack-dev-server --progress --colors
```

↑

loader †

↑

PostCSS †

PostCSSはNode.js製の「CSSツールを作るためのフレームワーク」
プラグインを組み合わせることで様々な変換を可能にする
Facebook, GitHub, Google等、日本では Qiitaで使われている

インストール

$ npm install --save-dev css-loader postcss-loader postcss-easy-import extract-text-webpack-plugin

webpack.config.js

const webpack = require('webpack');
  :
module: {
    loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract(
          'css-loader!postcss-loader'
        ),
      },
  :
plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [
          require('autoprefixer')({
            browsers: ['last 2 versions']
          })
        ]
      }
    }),
],

↑

React with JSX †

Babelモジュールのインストール

$ npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

webpack.config.js

babelrc
```
{
  "presets": ["es2015", "react"]
}
```

↑

React with TypeScript †

Hello React and TypeScript

TypeScriptでReactを書く(1)：JSX

create-react-app で TypeScript の環境を作る

↑

開発手順 †

プロジェクト作成（create-react-app使用）【推奨】
```
$ create-react-app --scripts-version=react-scripts-ts [プロジェクト名]
$ cd [プロジェクト名]
$ npm start
$ rm -rf src/*
```
- create-react-app で --scripts-version=react-scripts-ts オプションを付けて実行

プロジェクト作成（昔のやり方？）

$ mkdir [プロジェクト名]
$ cd [プロジェクト名]
$ npm init
$ npm install --save react react-dom @types/react @types/react-dom
$ npm install --save-dev webpack webpack-dev-server

実際のアプリケーションで使うモジュールは --save
開発時のみ必要なモジュールは --save-dev

[プロジェクトフォルダ]/package.json

    :
"scripts": {
    "build": "webpack --progress --colors",
    "start": "webpack-dev-server"
},
    :

TypeScript関連パッケージのインストール

$ npm install --save-dev typescript awesome-typescript-loader source-map-loader

[プロジェクトフォルダ]/tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react"
    },
    "include": [
        "./src/**/*"
    ]
}

[プロジェクトフォルダ]/webpack.config.js

module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },
    // webpackの出力をデバッグするためのsourcemapsを有効化
    devtool: "source-map",
    resolve: {
        // 解決可能な拡張子に'.ts'と'.tsx'を追加
        extensions: ["*", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },
    module: {
        loaders: [
            // '.ts'または'.tsx'の全てのファイルを、'awesome-typescript-loader'で扱う
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" }
        ],
        rules: [
          {
            test: /\.tsx$/,
            exclude: /node_modules/,
            loader: 'awesome-typescript-loader',
          }
        ],
    },
    // インポートしたモジュールのパスが下記のいずれかにマッチする場合、
    // それに相当するグローバル変数が存在するものとしてそれを使用します。
    // 依存性の全てを扱うことを避けることができるようになり、
    // ビルド間でそれらのライブラリがキャッシュ可能になるため重要です。
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    },
};

src/index.js（アプリ本体が App.js の場合）... index.js は必須

import React from 'react';
import { render } from 'react-dom';

import App from './App';

render(
  (<App />),
  document.getElementById('root')
);

コンパイル・実行
```
$ npm run build
$ npm start
```

↑

Tips †

↑

bind †

React.jsのrenderの戻り値の中で.bindで新しい関数を定義してはいけないわけ

↑

export default †

【Q&A】ReactJSのComponentをimport,exportする