2016-08-22

CreateReactApp によるReactチュートリアルの写経

今回のゴール

Reactのチュートリアルを、CreateReactApp による開発環境で写経する。

ソース

こちらの記事の内容を実際に書いたソースはこちらになります。

基本的に、チュートリアルに登場するソースごとに、 commit を入れてあります。

はじめに

Reactのチュートリアルを、最近公開された「Create React App」というReactプロジェクトのスターターコマンドを利用した開発環境（+ ES2015の書き方）で写経しました。

この場合、写経というより書き換えなんでしょうか。

ということで、基本的に写経なので、チュートリアルのサイトと前項のコミットログを突き合わせて読めば比較的後からでも追いやすいかなと思うのですが、一部補足的にちょっと書き留めておきます。

プロジェクトの作成

CreateReactApp インストールして、プロジェクトのひな形を作って、サンプル用のファイルを削除する。

create-react-app コマンドのインストール

1	$ npm install -g create-react-app

create-react-app コマンドでプロジェクトを作成

コミット「create project」

1 2	$ create-react-app react_tutorial $ cd react_tutorial

サンプルのファイルを削除

コミット「remove default source file」

1	$ rm src/*

index.html

コミット「modify index.html」

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>React Tutorial by create-react-app</title>
</head>
<body>
    <div id="content"></div>
</body>
</html>

index.html を、チュートリアルで出てくるものを元にした上記内容に書き換え。

チュートリアルでは jsパッケージの取得を CDN から、依存関係の解消を html上のタグの記述順で行っていますが、CreateReactAppでは webpack が入っているので、今回はパッケージの取得を npm で、依存関係の解消を webpack で行うことにします。

というわけで、jsの読み込み部分はチュートリアル記載のものからばっさりカット！

あと、チュートリアルではjsをhtml内に記述していますが、さすがに面倒くさいので別ファイル ( src/index.js ) に切り出しています。

この環境では、index.html 内に scriptタグを記述しなくても、ビルド時に自動的に src/index.js を読み込むタグが挿入されます。

jsファイルについて

コミット「tutorial1.js」

webpack による依存性解決と ES2015 の class 記法を使用するので、js ファイルをコンポーネントごとに切り分けて作成、import/export にて組み合わせています。

エントリーポイントとなる src/index.js で ReactDOM でのレンダリングを行い、そこでルートコンポーネント（今回は CommentBox ）を import しています。

ライブラリの使用

コミット「add library ‘remarkable’」

1	$ npm install -S remarkable

コミット「tutorial6.js」

npm でライブラリをダウンロードしてきて、使用する jsファイル内で import で読み込んでいます。

APIサーバ

ソースの README にも記載しましたが、チュートリアルで用意されているAPIサーバプログラムを、そのまま同一ドメインのAPIとして利用するのはこの環境だとちょっと面倒くさいので、別ドメインのAPIとして動かしてアクセスすることにしました。

$ git clone https://github.com/reactjs/react-tutorial.git react-tutorial-server
$ cd react-tutorial-server
$ npm install
$ PORT=3001 node server.js

コミット「modify comments api url」

幸いこのチュートリアル用APIサーバプログラムは CORS 対応されているので、丸っとサンプルソース持ってきて、別ポートでサーバを起動。APIへのアクセスアドレスをそちらに向けてあげるだけで大丈夫です。

アロー関数の利用

コミット「tutorial13.js」

チュートリアルだと、 $.ajax 内のコールバック関数を bind() していますが、

1
2
3

function (arg) {
    // code
}

でなく、

1
2
3

(arg) => {
    // code
}

と、ES2015 のアロー関数を使うと、自動的に this がバインドされるのでそっちで書いてます。

あとついでに、コールバックの設定を Deferred の done fail で外に出す書き方に変えてます。

class内メソッドの非同期呼び出し

コミット「tutorial16.js」

class 記法を利用する際、onClickイベントなんかでクラス内メソッドを設定する場合、そのまま

1	onChange={this.handleAuthorChange}

とかやると、対象メソッド内で js名物の this 迷子になるので、

1	onChange={this.handleAuthorChange.bind(this)}

と、 this を bind() しています。

おわりに

CreateReactApp は、ほんと素早く React 開発始められるし、開発・ビルドまわりで必要なものは最低限そろってるし、React 入門にはもってこいだと思います。

wusagi24 blog