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

React †

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

↑

構成要素 †

Reactでは「コンポーネント」を生成し組み合わせていくことでUIを構築していく
コンポーネントはデフォルトで用意されているものもあれば、自分で定義することもできる
コンポーネントは直接使用するのではなく、インスタンス化して使う
コンポーネントのインスタンスのことを「エレメント」と呼ぶ

Reactではコンポーネントやエレメントといった仮想的なDOMを通してUIを構築する。この仮想的なDOMのことを「Virtual DOM」と呼ぶ。

コンポーネントは、自分自身の「状態」を保持することができる
状態は「state」に保持され「setState」によって変更できる
「state」が変更されたときには「render」が呼び出され、自動的に再描画される
状態の変化に応じて効率的に処理できる点が、Reactの最大の特徴

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

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

↑

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

↑

Flux †

↑

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な関数にする

↑

JSX †

↑

webpack †

webpack - MODULE BUNDLER

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

↑

webpack-dev-server †

↑

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 †

↑

開発手順 †

プロジェクト初期化、パッケージのインストール

$ npm init
$ npm install --save react react-dom @types/react @types/react-dom
$ npm install --save-dev typescript awesome-typescript-loader source-map-loader
$ npm install --save-dev webpack webpack-dev-server

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

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

    :
"scripts": {
    "build": "webpack --progress --colors --config ./webpack.config.js",
    "start": "webpack-dev-server"
},
    :

[プロジェクトフォルダ]/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',
            /*
            query: {
              type: 'babel'
            }
            */
          }
        ],
    },
    // インポートしたモジュールのパスが下記のいずれかにマッチする場合、
    // それに相当するグローバル変数が存在するものとしてそれを使用します。
    // 依存性の全てを扱うことを避けることができるようになり、
    // ビルド間でそれらのライブラリがキャッシュ可能になるため重要です。
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    },
};

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

↑

React Native †

React Native

React Nativeで変わるアプリ開発高木健介先生 - Schoo（スクー）

React native meetup ... プレゼン資料が見れる

↑

Tips †

React x babel x browserifyでファイルに分割したコンポーネントのクラスがロードできない