『モダンJavaScriptの基本から始める React実践の教科書』初版5刷目について
Reactのメジャーバージョンアップ(V18)について以下の対応を行いましたので
ご確認ください。
■p.122 Pointの追加
2022年3月にリリースされたReact v18.0.0から将来的に追加される機能を
見据え、StrictModeを使用しており且つ開発時のみコンポーネント表示時に
マウントが2度実行されるようになったので注意。
■p.130-131
node-sass→sassに変更
■p.149
npmでインストール
コマンドを以下に更新
npm install -D tailwindcss postcss autoprefixer
■p.149
yarnでインストール
コマンドを以下に更新
yarn add -D tailwindcss postcss autoprefixer
■p.149
CRACOのインストール→Create React AppV4以前使用の方向けの解説にしました。
■p.150
tailwind.config.jsの作成→Postcss.config.js、tailwind.config.jsの作成に変更
■p.150
設定ファイルの追加(tailwind.config.jsの作成)の内容を以下に更新
設定ファイルの追加(Postcss.config.js、tailwind.config.jsの作成)
npx tailwindcss init -p
するとプロジェクトルートにpostcss.config.js、tailwind.config.jsという2つのファイルが生成されます。
生成されたファイル(postcss.config.js)
———————————————————-
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
———————————————————-
生成されたファイル(tailwind.config.js)
———————————————————-
/** @type {import(‘tailwindcss’).Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
———————————————————-
tailwind.config.jsのcontentには対象とするファイルを設定する必要があるので以下のように設定しておきます。
生成されたファイル(tailwind.config.js)
———————————————————-
/** @type {import(‘tailwindcss’).Config} */
module.exports = {
content: [
“./src/**/*.{js,jsx,ts,tsx}”, ←追加
],
theme: {
extend: {},
},
plugins: [],
}
———————————————————-
■p.299
以下、注意の追加
※2022年3月にReact v18.0.0がリリースされ、実際にFCからchildrenが取り除かれたので今後はFCを使用していくことになるでしょう。