今からはじめるReact.js〜初めてのコンポーネント〜

前回→[今からはじめるReact.js〜準備〜](http://qiita.com/kuniken/items/19fccc27b8bfa8068d22)

# コンポーネントを作成する

React.jsの特徴は、何と言っても

 - コンポーネント
 - 仮想DOM

です。

React.jsは画面の構成要素をコンポーネントとして実装していきます。
さまざまなコンポーネントをdivタグなどで囲んでいって、ヘッダやボディ、フッタなど
それぞれのコンポーネントを作成し、最終的に一つのコンポーネントとしてまとめます。
![page.png](https://qiita-image-store.s3.amazonaws.com/0/89819/7bcc4cc6-dc72-0d9f-d014-6545ce5e3b38.png)

![component.png](https://qiita-image-store.s3.amazonaws.com/0/89819/ca59661f-53de-6ed8-1094-03a0a4b0541e.png)

コンポーネントとして実装するため、作成したコンポーネントは
同じ仕様の機能が要求されるページで再利用することができます。

仮想DOMについては開発者はあまり意識することはありません（仮想DOMを実現するために直接DOMをいじっちゃダメとかのお約束は意識する必要がありますが）。

ので、仮想DOMについての説明は他に譲るとして、早速コンポーネントを作成して、ブラウザで表示してみましょう。

### index.htmlの作成
まずは、作業フォルダ/clientに、コンポーネントを表示するためのindex.htmlを作成します。

ソースの階層をどうするかは任意ですが、以降では

作業フォルダ
　┣ client←画面側のソース
　┃　┣ scripts←jsを格納
　┃　┗ index.html
　┣ node_module←npmでインストールしたライブラリが格納される
　┣ package.json
　┗ server←サーバ側のソース

という前提で話を進めます。

index.htmlの内容は以下の通りです。

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <title>tutorial</title>
  </head>
  <body>
    <div id="content"></div>
    <script src="./build/app.js"></script>
  </body>
</html>
```

作成したコンポーネントは、
`<div id="content"></div>`
に挿入されるようにします。
`<script src="./build/app.js"></script>`
については後ほど説明します。

###コンポーネントjsxの作成
コンポーネント定義はJSXという、react独自のxml規約にのっとって行います。
client/scriptsにindex.jsファイルを作成し、そこにコンポーネントの定義をおこなってみます。

```js:index.js(ver0.13以前の場合)
var React = require('react');//React.jsのライブラリをimport

//コンポーネントを定義
var Index = React.createClass({
  render:function(){
  	return (
  		<p>hoge</p>
  	);
  }
});

//id='content'の要素にコンポーネント「Index」を挿入してレンダリング
React.render(
  <Index />,
  document.getElementById('content')
);
```

[2016/05/18追記]
上記のソースは執筆時点ではReact0.13をベースに書いていましたので、0.14以降では
[今からはじめるReact.js〜React ver0.14〜](http://qiita.com/kuniken/items/2fc5b782da5d302247ab)
で記載のように実装する必要があります（以降の記事も同様）。

```js:index.js(ver0.14以降の場合)
var React = require('react');//React.jsのライブラリをimport
var ReactDOM = require('react-dom');

//コンポーネントを定義
var Index = React.createClass({
  render:function(){
  	return (
  		<p>hoge</p>
  	);
  }
});

//id='content'の要素にコンポーネント「Index」を挿入してレンダリング
ReactDOM.render(
  <Index />,
  document.getElementById('content')
);
```

`<p>hoge</p>`とか`<Index />`とかタグのように見えている部分がjsxにあたります。

React.createClassを行うことによりコンポーネントが作成されます。
renderというfunctionでコンポーネントの内容をreturnします（決まり事）。

jsxの部分はそのままだとブラウザで表示できません。
ブラウザが解釈できるようにjavascriptにコンパイルしてあげる必要があります。

### jsxのコンパイル
コンパイルするために、reactifyというライブラリを使います。
ライブラリなども含めて最終的に一つのjsにまとめたいので、browserifyも使います。
この２つの処理をまとめて行えるように、gulpというタスクランナーを使います。
※reactify、browserify、gulpについて詳しく知りたい方はググってください。

というわけでコンパイルに必要なライブラリをインストールします。
`npm install gulp browserify reactify vinyl-source-stream --save`

gulpは単独で実行できるように端末自身にもインストールしておく必要があります。
`npm install gulp -g`

gulpのタスクを記述します。作業フォルダ直下に以下の内容でgulpfile.jsを作成します。

```js:gulpfile.js
var gulp = require('gulp');
var browserify = require('browserify');
var source = require("vinyl-source-stream");
var reactify = require('reactify');

gulp.task('browserify', function(){
  var b = browserify({
    entries: ['./client/scripts/index.js'],
    transform: [reactify]
  });
  return b.bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('./client/build'));
});
```

作成したら、gulpコマンドを実行します。
`gulp browserify`
うまくいけば、{作業フォルダ}/client/buildにapp.jsが作成されているはずです。
これがindex.htmlの`<script src="./build/app.js"></script>`の部分になります。

コンパイルが終わったら、index.htmlをブラウザで表示してみてください。
コンポーネントで定義した内容が表示されたらOKです。

## サンプルソース
https://github.com/kunitak/react-tutorial/tree/day1

次回→[今からはじめるReact.js〜コンポーネントをまとめる〜](http://qiita.com/kuniken/items/c0f5ed06695ce52d4854)