【React】Reactの基礎知識を学習した①（JSX/Babel/コンポーネント）

Reactの環境構築とデプロイの方法までは理解できたのでいざコーディングを開始しようと思ったのだが想像以上にわからないことだらけだった。

心を入れ替えて基礎から学習したのでメモ。

JSXとは
JavaScript内に書ける特殊なルールのHTMLみたいなもの

<script type="text/babel">
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
);
</script>

rootにh1タグでHelloWorldを表示するだけのコード。
上記コードの<h1>Hello, world!</h1>の部分がJSXの構文。

Babelとは
様々なコードをブラウザが解釈できるJavaScriptに変換してくれるツール。
JSXの構文はそのままではJavaScriptの文法として不正なのでエラーとなるが、babel/browser.min.jsというツールを使ってブラウザ上でHTMLに変化されている。
script要素のtype属性にtext/babelと記述して使用する。

<script type="text/babel">
// Reactの命令
</script>

例えば先ほどのHello,world!のコードは以下のように変換される。

ReactDOM.render(
    React.createElement("h1", null, "Hello, world!"),
    document.getElementById('app')
);

注意点として、JSXの変換コストは軽くないためファイルサイズが大きくなる場合はあらかじめ変換しておいたJSファイルを使うのが一般的らしい。

コンポーネントとは
Reactでは作成したいUIを大きなコンポーネント（部品）として扱い、大きなコンポーネントは小さなコンポーネントの組み合わせで作成する。

コンポーネントの作成方法は複数あり

• React.createClassのrenderメソッドを使う
• React.Componentを継承する
• function構文を使う（Stateless Functionsと呼ばれる）

※React 15.5.0以降、React.createClassは廃止予定とのこと。代わりにnpmモジュール「create-react-class」を使用する。使い方は割愛。

React.createClassを使う場合

//コンポーネントの作成//
var SampleComponent = React.createClass({
  render: function() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>texttext</h2>
      </div>
    )
  }
});
//コンポーネントの描画
ReactDOM.render(
  <SampleComponent />,
  document.getElementById('root')
);

SampleComponentというコンポーネントを作成してJSX内で<SampleComponent />タグとして利用している。

次にReact.Componentを継承して作成する場合

//コンポーネントの作成
class SampleComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>texttext</h2>
      </div>
    )
  }
};
//コンポーネントの描画
ReactDOM.render(
  <SampleComponent />,
  document.getElementById('root')
);

あまり違いがわからないがReact.ComponentはES2015で定義されたClass構文を用いているため古いブラウザでは動作しないこともあるらしい。

最後にfunction構文で作成する場合

//コンポーネントの作成
function SampleComponent() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>Sample Text</h2>
    </div>
  )
};
//コンポーネントの描画
ReactDOM.render(
  <SampleComponent />,
  document.getElementById('root')
);

コンポーネント作成時は基本的にこの方法（Stateless Functions）を使う。
React.Componentで作成したコンポーネントと比較するとライフサイクルメソッド（後述）などの一部機能が簡略化されているので、必要に応じてReact.Componentと使い分けていく模様。

作成したコンポーネントは以下のように組み合わせて使うことができる。

//コンポーネントの作成
function MyH1() {
  return (
    <h1>Hello, world!</h1>
  )
}
function MyH2() {
  return (
    <h2>texttext</h2>
  )
}
function SampleComponent() {
  return (
    <div>
      <myH1 />
      <myH2 />
    </div>
  )
};
//コンポーネントの描画
ReactDOM.render(
  <SampleComponent />,
  document.getElementById('root')
);

長くなりそうなので続きはまた明日
サンプルコード等、参考サイト様のまるパクリだけど大丈夫だろうか。
怒られたら修正します。ごめんなさい。

↓参考サイト様
React入門 - to-R Media