ReactCreateApp vol.1

Contents

1 導入
2 React
3 CodePen
- 3.1 設定
4 CDN
5 Create React App
- 5.1 インストール
- 5.2 Hello World
6 あとがき
7 追記

導入

近頃話題のJavaScriptライブラリであるReactをちょっと勉強したくなったので、とりあえずReactを動かせる環境を調べてみました。

React

ReactはFacebook製のJavaScriptライブラリです。
フレームワークでは無くUIのパーツを開発し、いわゆるMVCのViewだけを担当します。

現在最新のReactVer15.4なので大体そのあたりを扱っていきます。
https://facebook.github.io/react/

CodePen

フロントエンドのコード共有サイトであるCodePenがReactに対応しているので、設定からライブラリを追加すればブラウザから簡単にReactを試す事が出来ます。
Reactのサイトでもサンプルを表示するためにCodePenが使われているぐらいなので、対応しているバージョンも15.3.1と比較的新しいものが用意されています。

See the Pen React Test by koltatt (@koltatt) on CodePen.

設定

CodePenでReactを追加するにはコードの編集画面からメニューの右上にあるSettingを選択して Pen Settings > JavaScript > Add External JavaScriptのQuick-addからReactとReactDOMをそれぞれ追加します。

CDN

Web上では無く手元の環境でReactを試したい場合にはCDNを使えば細かい設定無しにReactを試す事が出来ます。
コードが多くなると動作が重くなる場合があるので本番環境でCDNを使うことは推奨されていないようですが、CodePenもライブラリの追加にはCDNを利用しているのでとりあえず開発用として使う分には問題無いと思います。

<script src="https://fb.me/react-15.3.0.js"></script>
<script src="https://fb.me/react-dom-15.3.0.js"></script>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Test</title>
    <script src="https://fb.me/react-15.3.0.js"></script>
    <script src="https://fb.me/react-dom-15.3.0.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script>
    <!-- ここにコードを書く -->
    </script>
  </body>
</html>

Create React App

Create React AppはReatのアプリケーション開発に必要なライブラリを一通り揃えて開発環境を構築してくれるスクリプトです。
スクリプトを実行すると開発用の組み込みーサーバーなどが準備されたプロジェクトを作成してくれます。
Create React App/Github

少ししか触ってないので詳しく解りませんがユーザーガイドを見る限りテストからアプリケーションのビルドまでやってくれるようですし、組み込みサーバーも用意されているでこれがあればとりあえず開発環境としては十分な気がします。

インストール

npmからCreate React Appをインストールし、名前を指定してプロジェクトをビルドします。

#グローバルにインストール
$ npm install -g create-react-app
#create-react-app [project-name]
$ create-react-app my_app

しばらく待つと必要なライブラリがインストールされプロジェクトが作成されます。

プロジェクトのrootディレクトリからnpm startを実行すると開発用サーバーが起動するので、ブラウザからlocalhost:3000でアクセス出来ます。

cd my_app
$ npm start

Hello World

Create React Appで作成したプロジェクトでHello Worldを実行してみます。

import React from 'react';
import ReactDOM from 'react-dom';

function Hello(props) {
  return <h1>Hello, {props.name}!</h1>
}
 
const element = <Hello name="React"/>;
 
ReactDOM.render(
  element,
  document.getElementById('root')
);

Create React Appはデフォルトのディレクトリ構成でReactとReactDOMを扱うファイルがsrc/Index.jsとsrc/App.jsに分かれています。
src/内のサンプルプログラムを見ればわかる通りIndex.jsからApp.jsを読み込んでいるだけなので上手く必要な箇所を書き換えてもいいですが、上の例のように余計なimport削除するとsrc/Index.jsに全てのコードを書いていく事も出来ます。

あとがき

前から名前は良く聞くので興味はありつつも、仕組みを理解していないライブラリの開発環境を整えるまでが大変そうなので敬遠していましたが、優秀なビルドツールが用意されていので以外と簡単に環境が用意出来ました。
ReactはUIだけを担当するので環境さえ出来れば開発を始めやすいんじゃないかと期待していますが、現在のところ日本語の情報が少なく、英語を頑張って読まないといけないようなのでそっちのほうが大変かもしれません。

追記

プロジェクトのビルドを実行してみました。
ReactCreateApp vol.2 – Koltatt