React.js 入門 #React

React.jsというものがどうゆうものか触ってみました。
ここはReact.jsを１ファイルでとりあえず書いてみようとしたときのメモになります。

React.jsって結構使うモジュールやらなにやら種類と数があって、０からマジメに環境準備していくと大変です。
お手軽にちゃんとした環境を用意するなら「create-react-app」を入れるのが一番てっとり早かったです↓
コマンド一発でReactの開発環境を構築してくれるFacebook製ツール「create-react-app」

React.js とは

React.jsはMVCでいうところのViewを担っている部分。
と言われてもよくわからずいろいろググりました。そしたら用語が増えてさらに混乱しました(笑)
自分が特に混乱したものを中心に記載しておきます。

バージョンについて

react.jsのバージョンは v0.13,v0.14 → v15.0（急に「0.」がなくなる！！）とあがっています(2018/8/26現在)。
最新バージョンを調べてv15.0かと思いながら、他の皆様が書いてるチュートリアルや入門系のコードを見るとv0.14とかのも多く、
え！？かなり古いのか！？と一瞬焦りましたが、単にバージョンの表記の仕方が変わっただけのようです。

以降はソースをベースに（とりあえずこれコピペすればReactを試せます）

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>
</head>
<body>
  <div id="content"></div>

  <script type="text/babel">
    ReactDOM.render(
        <h1>Hello, World</h1>,
        document.getElementById('content')
    );
  </script>
</body>
</html>

URLについて

<script src="https://cdnjs.〜

何もDL、インストールしなくてもこちらのURLから最低限必要なモジュールは取ってこれます。
個人用とかであればまずはこれで良いかと。

react-dom とは

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>

〜

ReactDOM.render(

描画をする際に「ReactDOM.render()」が必要になってくるので、セットで「react-dom」も定義しておかないといけないです。

Babel とは

なんで急にbabelとな！？となりましたが、これはJSXのコンパイルに必要なモジュールになります。
JSXとはhtmlのタグっぽくJSを書けるものでして、これもreactを使う際にはほぼ必須のモジュールになると思われます。

ReactDOM.render(
    <h1>Hello, World</h1>,    // ← html(のタグ風に書けるのがJSXのおかげ)
    document.getElementById('content')
);

JSXを使わない書き方も乗せてればわかりやすいんですが、使わないと可読性がグッと下がり、ほぼほぼReact.js関連の情報では使われているので逆に使わないやり方を探すのがめんどくさいです。

ちなみに、

ReactDOM.render(
    <h1>Hello, World</h1>
    <p>これはNG!!</p>,　
    document.getElementById('content')
);

あくまでhtmlっぽくかけるだけであって、
renderの第一引数は１つのタグでまとまっていないといけない。
そのため、複数のタグを書くためには

ReactDOM.render(
    <div>
      <h1>Hello, World</h1>
      <p>これはOK</p>
    </div>,
    document.getElementById('content')
);

このように（divタグでまとまってる）する必要があります。
とりあえず１ペラで試すところは以上です。