MPA(クラシックSSR + jQuery)の課題: ワークフロー DB HTML ブラウザ APサーバ Webサーバ JS DOM テンプレート C V M フロントエンド側で 開発するリソース 開発リソースではない 依 存 サーバサイド側で 開発するリソース 齟齬 スケジュールの違い jQueryを使わなくても クラシックSSR + JSは 同じ課題を抱えています 二重開発
JSXとHTMLの違い • JSXはXML風の構文であって通常のHTML構文と同じではない • かつてのXHTMLに近い • 現在のHTML Living Standardでは「The HTML Syntax」よりも 「The XML Syntax」に近い • 特に属性名はHTML Living StandardでWeb IDLにより定義される DOMインタフェースの属性名が採用されている
繰り返しとkey属性 • 前頁の例を実行すると警告が出力される • 繰り返される要素にはkey属性が必要 • 繰り返し中における個々の要素をReactが識別できるようにするため • 仮想DOMによる差分検出処理で使われる • key属性の値は安定した値が望ましい • 商品一覧における商品であれば「商品コード」など • 配列のインデックスは極力避ける Warning: Each child in a list should have a unique "key" prop. Check the render method of `App`. See https://reactjs.org/link/warning-keys for more information. at li at App