React・TypeScript・TailwindCSSのプロジェクトを作成してみた
ReactをつかったCSRのサイトを1から作成してみたときの記録です。TailwindCSSとTypeScriptにも対応させてみました。環境はM1Macを使用しています。基本的にターミナルからコマンドを打ち込んで進めていきます。
1. Reactプロジェクトを作成
ローカルの作業ディレクトリに移動し、以下を打ち込んでみました。
「blog」の部分はプロジェクト名です。これだけでベースのプロジェクトができました。
Reactのバージョンは2023年3月19日時点でver.18のようですね。
できたプロジェクトの中身を見てみると、「index.tsx」と拡張子が「.tsx」になっているので、TypeScript化もできているようですね。
npx create-react-app blog --template typescript2. 各種ライブラリをインストール
次にTailwindCSSやアイコン、コードを整えてくれたり、コーディングエラーをチェックしてくれるような便利ライブラリをまとめて入れました。yarnというコマンドでいれるようです。
yarn tailwindcss init -p
yarn add tailwindcss postcss autoprefixer postcss-nested
yarn add eslint-plugin-tailwindcss
yarn add prettier prettier-plugin-tailwindcss
yarn add eslint prettier-eslint prettier-eslint-cli
yarn add @tailwindcss/forms
yarn add @headlessui/react
yarn add @heroicons/react
yarn add html-react-parser
yarn add react-helmet-async
yarn add react-router-dom
yarn add react-loading
yarn add date-fns
yarn add axios
yarn add swr
yarn add react-helmet-async3. ディレクトリ構成を作る
他のサイトをみると、ディレクトリ構造を整えるといいようなのでやってみました。1ですでにほとんど整っているのですが、さらに使いやすいように手を加えたほうがいいようです。
src/
└─ components/
├─ auth/
├─ features/
├─ hooks/
└─ ui/こんな感じでつくりました。componentsというディレクトリをつくって、基本的にここに入れていくのがいいようです。共通のUIは「ui」に、共通の処理はReactHooks化して「hooks」にいれるようです。
「features」には目的別のファイルをいれるようです。「user」とか「spot」とかですかね。共通化をしすぎちゃうと、追加したり消したりする時に変に影響しちゃうので、こうするのが良いようで。
明確なルールがあるわけではないのですが、運用していく上で他のパーツに影響を与えないようにきれいに分ける必要がありそうです。
共通化と目的別の切り分けをいかにうまくやるかがポイントですかね。
4. 各種ファイルを変更・作成
設定ファイルを変更する必要があるようです。まずは「tailwind.config.js」です。Reactはファイルを変更したら自動で検知して更新してくれるみたいなんですが、その検知するディレクトリを指定するようです。
module.exports = {
mode: 'jit',
darkMode: false, // 'media' or 'class'
purge: {
content: [
'./src/components/**/*.{js,ts,jsx,tsx}',
'./src/common/**/*.{js,ts,jsx,tsx}',
'./src/lib/**/*.{js,ts,jsx,tsx}'
],
options: {
safelist: {
standard: [/^bg-/, /^text-/],
},
},
},
content: [],
theme: {
extend: {},
},
plugins: [],
}続いてtsconfig.jsonです。これもちょっと変更しています。
{
"compilerOptions": {
"baseUrl": "src",
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}5. TailwindCSSを設定
/src/index.cssを以下に書き換えることでtailwindcssが反映するようです。
@tailwind base;
@tailwind components;
@tailwind utilities;6. 実行してみる
ここまでで設定が完了して、あとは実際にコーディングしていくフェーズのようです。
ターミナルでローカル実行してみます。
yarn start無事実行できたら、ブラウザから以下のアドレスを叩いてみます。もしかしたら勝手にブラウザが開くかもしれません。
http://localhost:3000
こんな感じでReactのデフォルト画面が出てきました！
これでReactの初期設定は完了したみたいですね。
今回は以上です！