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を監理するルートコンポーネントを「コンテナコンポーネント」と呼ぶ

開発環境の準備

  • 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で作ったものを無理やり乗せかえるのはやめとけ!
  • 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ツリーを更新する

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

開発手順

  • プロジェクト作成(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

export default


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2017-05-14 (日) 12:57:14 (1233d)