Reactの基礎を押さえようと、『React実践の教科書』を学習。
そこで得た学びメモ。

第４章　Reactの基本

コンポーネントファイルの拡張子は.jsx
全コンポーネントを出力するファイルは.js

useState

コンポーネントの状態を管理
Reduxよりもコード数が少なく書ける

//例)
const [num, setNum] = useState(初期値);

//num = 状態を保持した変数
//setNum = その変数を扱う関数

useEffect

useEffect(実行する関数, [依存する値]);

第５章　ReactとCSS

ReactでCSSをかける方法は6種類

①インライン記法

あまり使用しない方法
すぐにstyleを試したい時などに使う

const childStyle = {
    height: "200px",
    backgroundColor: "lightblue",
    padding: "8px"
}

return (
    <div style={childStyle}>
        <p>Child1</p>
    </div>
)

②CSS Modules（別ファイル読み込み）

node-sassモジュール（パッケージ）をインストール　npm install node-sass
- CSS（SCSS)ファイルは別で用意し、コンポーネントファイルに読み込む

③Styled JSX（CSS in JS）

styled-jsxをインストール npm install styled-jsx
- コンポーネント内にCSSを記述
- scss記法はできない
  - 別途ライブラリのインストールが必要
Nest.jsで使われている

④styled components（CSS in JS）

styled-componentsをインストール npm install styled-components

⑤Emotion（CSS in JS）

@emotion/reactと@emotion/styledをインストール
npm install @emotion/react @emotion/styled

⑥TailwindCSS

それぞれをインストール
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
npm install @craco/craco

※npm install @craco/cracoがインストールできなかった → react-scriptsのバージョンを4に変更

調べてみると、react-scriptsパッケージのバージョンが5になっているから？
https://stackoverflow.com/questions/67056349/craco-could-not-resolve-dependency-error

（※後に画面表示自体できなくなったので、やらない方が良い）

4系統に落としてみる。
npm remove react-scripts
npm install react-scripts@4

再度cracoのインストールコマンドを打ち込むと、うまくいった。
npm install @craco/craco

//package.json
"@craco/craco": "^6.4.3",
"react-scripts": "^4.0.3",

（保留）TailwindCSS が適用されなかった

Tailwind CSSのクラスを指定したものの、適用されなかったので、今回は保留。

第６章再レンダリングの仕組みと最適化

　レンダリングをコントロール可能

親コンポーネントがレンダリングされると、子コンポーネントもされる（負荷高い）。
これをコントロールするのが、メモ化と呼ばれる機能。

memo化したいファイルに以下を記述。

import { memo } from "react";

export const ファイル名 = memo(() => {

})

useCallback

第7章グローバルなstate管理

Vue.jsでもVuexの概念があったが、Reactでも多階層のバケツリレー対策が取られている。

Context（機能）
Redux（ライブラリ）
Recoil（ライブラリ）
Apollo Client(ライブラリ・GraphQL使用時のみ)

※親コンポーネント = ルートコンポーネントという

おまけ

storybook = コンポーネントのカタログがある。

・React 向け Storybook のチュートリアル
https://storybook.js.org/tutorials/intro-to-storybook/react/ja/get-started/