React入門 その１

この記事ではReact.js公式チュートリアルを元にReactを始める前に必用な知識を分かりやすく要約しながら説明していきます。

作っていくもの

これから数回に分けてReactの基本的な動き、使い方をバランスよく学ぶ為に簡単な○xゲームを作っていきます。実際に作られたものがこちらです。

前提条件

• HTMLの知識
• javascriptの知識
• オブジェクト思考について知っているとなお良い

セットアップ

今回はセットアップに時間をかけたくないので、Reactのコードをブラウザでかけるサイトを利用して学習していくことにします。

Reactとは

簡単に説明すると、小さないくつもの独立したパーツ（コンポーネント）を作り、それらを組み合わせて一つのwebサイトを作る。というものです。 例えば、Twitterなら

「ヘッダー」「プロフィール」「トレンド」「ツイート」「レコメンド」...etc.この様にたくさんのコンポーネントから成り立っています。
さらに「ヘッダー」も小さな部品が集まってできています。
これらを部品の様にして作っておけば、どんなサイトにも流用できますね。 というのが基本的なReactの考え方です。 なのでWebサイトだけではなくアプリも作れてしまいます。
Reactでは「Virtual DOM」という概念を持っており、画面の描画が早いのも特徴です。 簡単に説明するとHTMLを生成するための元の様なイメージです。 なのでこの元に変更があると、それを元にHTMLを生成し描画し直します。

普段は生成されたHTMLに直接手を加えて編集しなければいけなかったので、処理に時間がかかったのですが、Reactではそれが高速で行える様になりました。
少しややこしいので頭の片隅に置いておくだけで大丈夫だと思います。

JSX

Reactの開発者のほとんどの人が利用している技術なのでこれも覚えておきましょう。 HTMLのタグをJSでも簡易的にかける様にした仕組みです。
普通なら以下の様に書かなければ行けないコードも

React.createElement('div', {className: 'shopping-list'}
React.createElement('h1', /* ... h1 children ... */)
React.createElement('ul', /* ... ul children ... */)

下記の様な記述で分かりやすく簡潔に書くことができるのが特徴です。

var element = 
<div className="shopping-list">
    <h1>Shopping List for {this.props.name}</h1>
    <ul>
        <li>Instagram</li>
        <li>WhatsApp</li>
        <li>Oculus</li>
    </ul>
</div>;

最後に

Reactはこれからどんどん進化していく、最新の技術でもあるので勉強する価値は十分にあります。Reactを利用すれば一つのコードで iOS App にも Android App にも書き出すことができます。 これを機械に勉強をして世界にコミットできるエンジニアになっていきたいですね。
次回から実際に書きながら解説していこうと思います。