自分用メモ（React）

※自分用メモですが、「これからはじめるReact実践入門」を参考に勉強中のメモなので、この本に掲載されているサンプルコード等を引用してる場合があります。
※細かい用語については、特に自分にしか通じない言葉もあるので、つっこまないで…

webpacks
Babel：JSXを読み込むやつ

JS

React Developer Tool

Chromeとかのプラグイン。あると便利。

React Sample

繰り返し処理

index.js

  // ForListは自作のクラス。src=の{}はJSXにJavascript構文を埋め込むためのやつ。
  // booksはbooks.jsで定義してここでインポートしたオブジェクト。
  // src={books}と書くことで、Babelさんが{src: books}というオブジェクトに変換してるらしい。
  root.render(
    <ForList src={books} />  
  );

ForList.js

// ここで、srcはArray。
// Babelさんが引数を{src: books}という形で渡してくるので、そのうちsrcを直に受け取るためにForList({src})とする。
export default function ForList({src}) {
    // このreturnの後の()はJSXをひとまとめにするための()。
    // なのでJavascriptの構文ではない。1行で書くなら省略できるけど、複数行書きたければ()でくくるのだと。
    return(
        <dl>
        {
            src.map(elem => (
                <>
                    <dt>
                        <a href={`https://wings.msn.to/book/${elem.isbn}/${elem.isbn}.jpg`}>
                        {elem.title} ({elem.price}円)
                        </a>
                    </dt>
                </>
            ))
        }
        </dl>
    )
}

PropsとState

コンポーネントを支える基礎となる概念らしい。
どこ用語？？（AI曰く、React用語だそうな）

コンポーネントは画面を構成する部品という理解でいいかな。

Propは値を渡すためのもので、Stateは状態を記述するためのもの。

以下のコードのsrc={books}がProps。
伝統的にこのオブジェクトの名前をpropsというけど、実際は名前はないでもよい？？見たい。

index.js

  // ForListは自作のクラス。src=の{}はJSXにJavascript構文を埋め込むためのやつ。
  // booksはbooks.jsで定義してここでインポートしたオブジェクト。
  // src={books}と書くことで、Babelさんが{src: books}というオブジェクトに変換してるらしい。
  root.render(
    <ForList src={books} />  
  );

props.childrenプロパティ

呼び出し側の子要素を取得できる。
Reactでは複数のchildrenを渡せないから、渡したいなら工夫が必要？？？

RenderProps

描画のための関数を表す総称としてこう呼ぶみたい。
一旦以下は儀式だと思おう。
const [count, setCount] = useState(0);

情報伝達

親コンポーネントから子コンポーネントへの情報伝達はPropsで行い、逆はStateで行うのだそうな

コメント

.jsx

const tag = (
  // コメント。ここはまだJavascriptの世界かな？
  // 次の行からJSXの世界が始まる。
  <ul>
    {/* コメント。JSXの世界なので、一旦Javascriptの世界に戻してあげてコメント */}
    <li // だけれど、タグのなかならコメントできるんだって。
      >React</li>
    <li /*
       複数行コメントもいけるみたい。
    */>Vue.js</li>
  </ul>
);