SBクリエイティブ

その他

【V18対応】モダンJavaScriptの基本から始める React実践の教科書

2022.11.22

『モダン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を使用していくことになるでしょう。

この記事をシェアする