はじめに

Fullstack React: 30 Days of React の意訳です。

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

本編

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ではどのようにコンポーネントをレイヤー（ネスト）していくのかを説明します。ネストされたコンポーネントはリッチなアプリの基盤となります。