React 入門 #1

Hello world

Reactを使ったフロントエンド開発の第一歩を学びます。まずはNPMやBowerを使わずにReactをダウンロードし、プロジェクトをセットアップしてみましょう。

プロジェクトのセットアップ

Reactをダウンロードし、プロジェクトに配置します。ここでは"Starter Kit"をダウンロードして利用します。

% mkdir react-playground
% cd react-playground
% mv ~/Downloads/react-0.13.3 path/to/react-playground/react
% ls react
README.md build     examples  

最低限必要なファイルはreact/build/react.jsだけです。次にサンプル用のHTMLを作ります。

HTML/JS

% cd react-playground
% touch hello.html

hello.html

<!DOCTYPE html>  
<html>  
<head>  
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Hello React</title>
</head>  
<body>  
  <div id="app"></div>

  <script src="react/build/react.js"></script>
  <script></script>
</body>  
</html>  

#app要素はReactアプリケーションをレンダリングするためのコンテナです。react.jsをロードした後に、<script>タグ内にアプリケーションのコードを書いていきます。

React.render(  
  React.DOM.h1(null, 'Hello world!'),
  document.getElementById('app')
);
% php -S localhost:8000

localhost:8000/hello.html にアクセスしh1要素の"Hello world!"が出力されていればOKです。

Hello worldを解読する

React.render(  
  React.DOM.h1(null, 'Hello world!'),
  document.getElementById('app')
);

まずReactオブジェクトのrender()メソッドを使っています。Reactが提供するAPIへは、このReactオブジェクトへアクセスして利用することになります。

次に、Reactを利用する上で重要なコンセプトである「Component」です。ReactはUIを構築することを主としたライブラリです。Reactでは「Component」を使ってUIを構築していきます。HTMLのDOM要素をラップしたのが、React.DOMということになっています。

Hello worldのサンプルではReact.DOM.h1というコンポーネントを利用しています。なんとなくH1要素のコンポーネントを生成するものというのがわかりますね。React.render()は第一引数に要素、第二引数にコンテナとなる要素を受け取り、コンポーネントをレンダリングします。

React.DOM

React.DOM API を通して、HTML要素をReact要素として扱うことができます。React.DOMの中身を見ると130種類の要素が定義されています。

console.log(Object.keys(React.DOM));  

Hello worldでは、この内のh1を使いました。

React.DOM.h1(null, 'Hello world!'),  

nullとしている第一引数にはプロパティを渡します。HTMLの属性を設定するものと考えてください。第二引数はコンポーネントの子要素を指定します。この場合はテキストを渡しているので、DOM上ではテキストノードということになります。

もう少し、複雑なコンポーネントを作るには以下のようにできます。

React.render(  
  React.DOM.h1(
    {
      className: 'greeting'
    },
    React.DOM.strong(null, 'Hello'),
    React.DOM.small(null, ' world')
  ),
  document.getElementById('app')
);

これは、以下の様なHTMLとしてレンダリングしてくれます。

<h1 class="greeting" data-reactid=".0">  
  <strong data-reactid=".0.0">Hello</strong>
  <small data-reactid=".0.1"> world</small>
</h1>  

子要素をネストすることもできますが、すぐにコードが見辛くなることがわかると思います。ReactにはJSXというXMLのような記法でDOMを生成できる仕組みがあるので、Reactの基本を会得したらJSXを使います。

上記の例ではclassを指定するためにclassNameを使っています。これはJavaScriptの予約後のためです。for属性を指定する場合にはhtmlForで指定することに注意しましょう。

React.DOM.label({ htmlFor: 'email' }, 'Email')  

まとめ

Reactの基本となるDOM要素をラップした組み込みコンポーネントの構築と、レンダリングを学びました。Reactの真髄は独自に定義できるコンポーネントです。次回以降、コンポーネントについてさらに学びます。