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/