30 Days of React を意訳していく Day3 - Our First Components

# はじめに

[Fullstack React: 30 Days of React](https://www.fullstackreact.com/30-days-of-react/) の意訳です。

ちょいちょい読んでるのでせっかくなので訳そうと思った次第。飽きるまで続きます。かなり意訳です。

- [Day1 \- What is React?](http://qiita.com/eiei19/items/933870b8a1d746a279f7)
- [Day2 \- What is JSX?](http://qiita.com/eiei19/items/fd95b38ca62fbea38e7d)

# 本編

https://www.fullstackreact.com/30-days-of-react/day-3/

Day1とDay2はちょっと小難しい話でしたが、Day3では実際にコードを買いて、最初のコンポーネントを作ります。

```
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello world</title>
  <!-- Script tags including React -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
  <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">
    var app = <h1>Hello world</h1>
    var mountComponent = document.querySelector('#app');
    ReactDOM.render(app, mountComponent);
  </script>
</body>
</html>
```

## Hello world

### Loading the React library

```head``` 要素の ```script``` タグの中でReactのソースコードをインクルードしています。当たり前ですが、Reactアプリを書き始める前にReactが読み込まれている必要があります。

また同様に、babel-core 読み込んでいます。

### Babel

Day2で書いたように、ES6がサポートされているブラウザはまだまだ少ないので、ES6を実際に使いたい場合は、ES5に変換するのが良い方法です。

BabelはES5 => ES6の変換ライブラリです。

```
<script type="text/babel">
```

上記のタグ内にJavascriptを記述することで、Babelがこの中のJavascriptを処理してくれます。Babelのおかけで、ES6でReactアプリを記述することができ、ES6をサポートしてないブラウザについて、BabelがES5に変換することで動作するを保証してくれます。

### The React app

Babelスクリプトのbodyに最初のReactアプリを定義しました。 ```<h1>Hello world</h1>``` というなんてことのない要素です。```ReactDOM.render()``` によってこの要素がページに配置されます。 ```ReactDOM.render（）``` が呼ばれなければ、DOMには何もレンダリングされません。 ```ReactDOM.render（）``` の最初の引数はレンダリングするもので、2番目の引数はレンダリングする場所です。

```
ReactDOM.render(<what>, <where>)
```

最初のReactアプリを作りましたが、これではあまりおもしろくないですね。リッチなWebアプリはユーザの入力を受けて表示を変えたり、サーバーと通信したり、などなどをすると思います。これらをする方法を最初のコンポーネントを通じて見ていきましょう。

### Components and more

Day1でReactの肝はコンポーネントにあると書きました。コンポーネントを理解するための一番の方法は、コンポーネントを書くことです。ES6を使ってコンポーネントを買いていきます。

Appというコンポーネントを見ていきましょう。他のすべてのReactコンポーネントと同じように、このクラスはReactパッケージからReact.Componentクラスを拡張します。

```
class App extends React.Component {
  render() {
    return <h1>Hello from our app</h1>
  }
}
```

> すべてのReactコンポーネントは少なくとも ```render``` メソッドを持つ必要があり、 ```render``` メソッドはVirtual DOMを返すようにする必要があります。
> Reactコンポーネントの定義方法はいくつかあって、上記のES6のクラス記法がもっとも一般的です。
> 他にも React.createClass() を使って下記のようにも書けます。

```
var App = React.createClass({
  render: function() {
    return <h1>Hello from our app</h1>
  }
});
```

> ES6のクラス記法のほうがよく見られますが、どちらの方法も同じ機能を持つReactコンポーネントを生成します。

最初の例は、コンポーネントを使って、以下のように書き換えられます。

```
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello world</title>
  <!-- Script tags including React -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
  <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">
    class App extends React.Component {
      render() {
        return <h1>Hello from our app</h1>
      }
    }
  </script>
</body>
</html>
```

しかし、実は上記ではなにも画面に表示されません。なぜだかわかるでしょうか？

Reactに何をどこにレンダリングするか伝えてないからですね。 ```ReactDOM.render()``` を使って何をどこにレンダリングか記述する必要があります。そうすれば画面に ```Hello from our app``` が表示されるはずです。

```
var mount = document.querySelector('#app');
ReactDOM.render(<App />, mount);
```

### Hello from our app

H1たDivなどの組み込みタグと同様に、Appコンポーネントを ```<App />``` のように買いて使うことができます。

このアイディアによって、通常のDOMツリーを書くようにコンポーネントツリーを作成することができます（要は普通のHTMLっぽくReactコンポーネントのネストを表現できるということ）。

例のコンポーネントはまだリッチさに欠けますね。すぐにデータ駆動でリッチなReactコンポーネントを作る方法を見ていきますが、Day4ではどのようにコンポーネントをレイヤー（ネスト）していくのかを説明します。ネストされたコンポーネントはリッチなアプリの基盤となります。