React 概要

環境構築

• 雛形を作る（webpackも入る）

npx create-react-app xxx
npm start

• npm run build 本番環境用にコンパイルしbuildに出力

• npm run eject webpack/babelの設定情報をconfigに出力

• React.StrictMode 非推奨の警告を出してくれる機能

• JSX: タグをjavascriptの中に書ける
• コンポーネント名は頭が大文字
• Reactは変更されたDOMの部分のみ更新される（VirtualDOM）
• VirautlDOMとは
  メモリ上に置かれたDOMのコピー。更新を最小限に抑える。

JSX

• index.html内のdivタグなどをReactタグで置き換え
• Javascriptの拡張言語で、タグを使用して記述。実行時にはJavascriptに変換される
• JSXを使わないなら、React.createElementを使っても書ける
• 唯一のルート要素を持つ
• ルート要素を付けたくない場合ダミー要素

<React.Fragment> </React.Fragment>
または
<> ~ </>
このタグは出力されない。

• htmlの記法との違い
  Javascriptの予約語は使えない。camelCaseを使う。

class -> className
for -> htmlFor
tabindex -> tabIndex

• htmlコメント構文は使えない
  <!-- コメント --> -> {/* コメント */}

• テンプレートでjavascript式を埋め込む
  1 + 2 = { 1 + 2 } {}の中は自動でエスケープされる

• 属性値の指定
  属性値でテンプレートを使う場合、クオートを付けない href="{url}" -> href={url}
  style属性はオブジェクトリテラル 'color: Red' -> {color: 'Red'}
  属性はオブジェクトリテラルでまとめられる {...attrs} attrs = {src: ".img", title: "img" }