パーフェクト反応アプリ

各依存関係の説明
React Router➣ ルーティング( example . com/example . com/何か. htmlの代わりに何か)
TailwindCSS➣ より迅速なスタイリング
Framer Motion➣ CSSアニメ
Viteを作成するJS +反応.jsアプリ

// Command-Line

npm create [email protected] demo --template react
or
npm create [email protected] demo -- --template react

cd demo
npm install

依存関係のインストール

// Command Line

npm install [email protected]
npm install framer-motion
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

フレームワークの構成

// tailwind.config.js

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

// index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

使用ルータ

// App.jsx

import { BroswerRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
    return (
        <BroswerRouter>
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='/page2' element={<Page2 />} />
            </Routes>
        </BroswerRouter>
    )
}

function App() {
    return (
        <>
            <h1>Home</h1>
            <Link to='/'>Home</Link>
            <Link to='/page2'>Page2</Link>
        </>
    )
}

function Page2() {
    return (
        <>
            <h1>Page2</h1>
            <Link to='/'>Home</Link>
            <Link to='/page2'>Page2</Link>
        </>
    )
}

export default App;