Open2023/10/02にコメント追加6

読書メモ　りあクト！②React基礎編

5-1 なぜReactではJSXを使うのか

JSXとはJavaScriptの中にXMLライクな記述が出来るようにした構文拡張
- 構文拡張 = 言語標準には含まれない特殊な用途のための便利な構文を後づけで使えるようにしたもの

<button type="submit" autoFocus>
Click Here!
</button>

import { jsx as _jsx } from 'react/jsx-runtime';
_jsx('button', {
  type: 'submit',
  autoFocus: true,
  children: 'Click Here',
});

{
  type: 'button',
  props: {
    type: 'submit',
    autoFocus: true,
    children: 'Click Here',
  },
  key: null,
};

これは TypeScript では ReactElement というインターフェースを下敷きにしたオブジェクトになる。
つまり React において JSX の構文は、本質的には React.createElement(...) のシンタックスシュガーであ
り、ReactElement オブジェクトを生成する特殊な式だと言える」

JSXはあくあで最終的にJavascriptに解釈されるものであり、Javascriptの枠組みを超えるような言語ではない

Hidden comment

ReactはViewのレンダリングもJavascriptの中で行う
- テンプレートを使わない理由は以下の2つの言葉に集約されるらしい
  - テンプレートは技術は分離するが関心は分離しない
  - 表示ロジックとマークアップは否応なしに結びつく
- Webアプリケーションを組版指定（画面表示？）ではなく、制御構造が主体だと捉えているらしい

ハイパーテキストを表現するHTMLではなく、汎用的なXMLがベースになっている
Reactはレンダラー（仮想DOMをViewに反映させるやつ）を本体から分離する設計になっており、それを入れ替えて様々なプラットフォームのアプリケーションやドキュメントを表現するという意図がある
- React Nativeもその一つ
- pdf用のレンダラーを使えばpdfが出力される

タイトル通り。知らんことばかりで驚き。