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

入門 †

既存のウェブサイトに React を追加する

React初学者が必ず押さえておきたい考え方とは？【コンポーネント指向のフロントエンド】

Windows での NodeJS のインストール

↑

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コンポーネントへの理解を深める

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 Native †

React Nativeでメモアプリを作ろう～作成画面の構築と実データの利用

↑

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

↑

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ツリーを更新する

↑

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する