Closed4
適当なデモサイト用の構築手順（Vite, React, Tailwind, shadcn/ui）
ツルオカVite
ゴール: localhostでアクセスできること
npm create vite@latest my-react-app -- --template react-swc-ts
npm i
npm run dev
Tailwind CSS
ゴール: className="text-3xl font-bold underline"でスタイルが効いていること
shadcn/ui
ゴール: npx shadcn@latest add buttonでボタン追加ができること
※2025年2月時点、shadcnはTailwind v4に未対応なので注意
Tailwind v3を使う場合
npm install -D tailwindcss@3 postcss autoprefixer
ツルオカ上記手順を経て`npm run dev経て以下が表示されればひとまずOK
ツルオカあとはv0とかBolt.newとかに骨子作ってもらって微修正して大体完了
ツルオカreact-router-dom
- インストール
npm i react-router-dom
- main.tsxにBrowserRouterを追記
main.tsx
+ import { BrowserRouter } from 'react-router-dom'
createRoot(document.getElementById('root')!).render(
<StrictMode>
+ <BrowserRouter>
<App />
+ </BrowserRouter>
</StrictMode>
)
- App.tsxなどにRoutesで記載
App.tsx
import { Link, Route, Routes } from 'react-router-dom'
function App() {
return (
// 省略…
<Link to='/page2'>Page2</Link>
<Link to='/page3'>Page3</Link>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/page2' element={<Page2 />} />
<Route path='/page3' element={<Page3 />} />
</Routes>
)
}
このスクラップは2024/10/17にクローズされました