ここから手を動かします。Reactが動く環境を作って、Tailwindをつなぐところまでを一気にやります。
読むだけの回を重ねるより、自分で打って確かめられる状態を先に作ったほうが、このあとの回が何倍も速く進みます。
npmnpmってなに？——npm installは何をしている？npmのコマンドに不安がある人は、先にこの1本を読んでおくと迷いません①プロジェクトのひな形を作る
作業したいフォルダでターミナルを開いて、次のコマンドを打ちます。
npm create vite@latest対話式に質問されるので、こう答えます。
| 質問 | 答え |
|---|---|
| Project name | shima-zukan |
| Select a framework | React |
| Select a variant | JavaScript |
Select a variantにはTypeScriptなど似た選択肢が並びます。ここではJavaScriptを選びます。Reactの間違いと型の間違いが混ざると切り分けがむずかしくなるので、まずReactだけに集中し、後半の章でプロジェクトごとTypeScriptに移行します（実務でもよくある順番です）。
②中に入って、動かしてみる
cd shima-zukan
npm install
npm run devnpm installでpackage.jsonに書かれた道具（Reactの本体やVite）がダウンロードされ、npm run devで開発サーバーが立ち上がります。ターミナルにこう出ます。
VITE v8.2.0 ready in 537 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose表示されたhttp://localhost:5173/をブラウザで開いてください。
このサーバーは止めるまで動きっぱなしです。ファイルを保存すると自動で画面に反映されます（保存した瞬間に切りかわるので、リロードは要りません）。止めるときはターミナルでCtrl + Cです。
③何が作られたのか
フォルダの中はこうなっています。
shima-zukan/
├── node_modules/ ← 入れた道具の置き場（触らない）
├── public/ ← そのまま公開されるファイル
├── src/ ← ここに自分のコードを書く
│ ├── assets/
│ ├── App.css
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── .gitignore
├── .oxlintrc.json
├── index.html
├── package.json
├── package-lock.json
├── README.md
└── vite.config.js多く見えますが、最初に意味を知っておくべきなのは3つだけです。
index.html——入口
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body><div id="root">はからっぽの箱です。ページの中身はここにReactが流しこみます。HTMLを直接書き足す場所ではありません。
src/main.jsx——つなぎこみ
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>,
)「rootの箱にAppを描いて」という指示です。このファイルはほとんど触りません。
<StrictMode>は開発中だけ働く見張り役で、あやしい書き方を見つけると警告してくれます（そのために処理をわざと2回実行するので、後の回で「なぜか2回動く」という現象に出会います）。
src/App.jsx——ここを書く
画面の中身です。このコースで書くのは、ほぼこのファイルとその仲間になります。
④余計なものを掃除する
ひな形にはサンプルの飾りが入っています。先に消して、まっさらな状態にします。デモの残骸の上に書き足すと、どれが自分のコードか分からなくなるからです。
消すのは次の2つです。
src/App.css（サンプル用のCSS。Tailwindを使うので不要）src/assets/フォルダ（ロゴ画像。使いません）
そしてsrc/App.jsxを、この形まで削ります。
function App() {
return <h1>しまちゃんのことりずかん</h1>
}
export default Appsrc/index.cssも中身を全部消して空にしておきます（次でTailwindの1行を書きます）。
⑤Tailwind CSSをつなぐ
このコースの見た目はTailwindで作ります。手順は3ステップです。
入れる
npm install --save-exact tailwindcss @tailwindcss/vitetailwindcssが本体、@tailwindcss/viteがViteに組みこむためのプラグインです。
--save-exactでバージョンを固定する理由。ひな形の^のままにしない習慣についてViteに教える
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [react(), tailwindcss()],
})pluginsの配列にtailwindcss()を足すだけです。
CSSから読みこむ
@import "tailwindcss";この1行だけです。src/index.cssはmain.jsxがすでに読みこんでいるので、つなぎこみの作業は要りません。
⑥効いているか確かめる
App.jsxにTailwindのクラスを足して、効いているかを見ます。
function App() {
return (
<h1 className="p-8 text-3xl font-bold text-sky-600">しまちゃんのことりずかん</h1>
)
}
export default AppclassではなくclassNameです。HTMLとの違いはここから始まります（理由は次の回で扱います）。
このレッスンのまとめ
npm create vite@latestでひな形を作る。フレームワークはReact、種類はJavaScriptnpm run devで開発サーバー。保存すると即反映、止めるのはCtrl + Cindex.htmlのからっぽの<div id="root">にReactが中身を流しこむ- ひな形の飾り（
App.css・assets/）は先に消してまっさらにする - Tailwindは入れる・
vite.config.jsに足す・@import "tailwindcss";の3ステップ - HTMLの
classは、ReactではclassName
次は、いま書いたclassNameのようなJSXの決まりごとを読み解きます。HTMLとよく似ているのに少しだけ違う——その「少しだけ」を先に片づけておきます。