Reactの特徴その１

Reactとは

ReactとはFacebook社によって開発されたJavaScriptのためのユーザインターフェイス構築用のライブラリのこと。

SPA

Single Page Applicationの略。
HTMLは1つのみでJavaScriptで画面を書き換える仕組み。ナウそうな奴は大体SPA。
最初に画面(HTML)を取得した後は、JavaScriptによって画面の書き換えを行うことで
単一ページでありながらアプリケーションを構築できる

必要な箇所だけ書き換える

Reactでは仮想DOMとしてメモリ上にDOMの状態をキャッシュしておき、仮想DOMに差分が発生した場合にのみ差分を計算し、実際のDOMに差分のみを再描写することにより効率化している。

JSファイルだけどHTML風に書ける

JSX(JavaScript XML)は、Reactのコンポーネント内でマークアップ言語を記述するためのXML風の拡張言語である。 jsファイルのreturn括弧内でHTMLタグが記述可能で、レンダリングによってDOMが構築される。このDOMは全体を１つのタグでまとめる必要があり、
フラグメント (fragment) を用いることで、DOM に余分なノードを追加することなく子要素をまとめることが出来る。フラグメントの宣言は
<React.Fragment>~</React.Fragment> あるいは短縮記法で <>~</>で行う。

コードを分割する

１つのファイルに書いていたら膨大な量になってしまうのでコンポーネント(部品)化する。コンポーネントの名前は大文字で始めること！コンポーネントの拡張子は.jsのままでも使えるが、わかりやすく .jsxを使った方が良い。
以下は関数をコンポーネント化し、別ファイルで使用する例。

Comp.jsx

//　　エクスポート `export default モジュール名`

import React from 'react'

const App = () => {
  return (
    <React.Fragment>　
      <h1>磁冠百柱林闘</h1>
      <p>
                中国宋代、四川省拳法家達によって盛んに行われた異種格闘技。当時は杉木立の枝を払い、頂部を切断してその切り口を足場とした。
                その杉は最低でも高さ一五米以上、直径は一〇センチから３米までと変化に富み、落下しようものなら即死は間違いなく、まさに命がけの勝負であった。
                後に四川省青陽山で強磁石が発見されるにいたり、杉の頂部に鉄板をかぶせ磁靴を履き、二名対二名で戦う磁冠百柱林闘が完成した。
                千変万化の中国格闘技にあってもこの磁冠百柱林闘は最高の技量とチームワークを要求される高度な戦いのひとつである。
                現代のプロレスに見られるタッグマッチはこの磁冠百柱林闘を彷彿とさせる。

                中津川大観著時源出版刊『偉大なる中国拳法』より</p>
    </React.Fragment>
  );
}

export default App;

index.js

// インポート `import モジュール名 from 相対パス`

import React from "react";
import ReactDom from "react-dom";
import App from "./Comp";

ReactDom.render(<App />, document.getElementById("root"));

デフォルトエクスポートの場合、インポート側で任意に名前を設定することが出来る。
上記の例だと、import Foo from "./Comp";とすることで、新たに名前を付与することも可能。

Reactの特徴その２