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