パーフェクト反応アプリ
2042 ワード
各依存関係の説明
React Router➣ ルーティング( example . com/example . com/何か. htmlの代わりに何か)
TailwindCSS➣ より迅速なスタイリング
Framer Motion➣ CSSアニメ
Viteを作成するJS +反応.jsアプリ
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;
Reference
この問題について(パーフェクト反応アプリ), 我々は、より多くの情報をここで見つけました https://dev.to/zytha/perfect-react-app-2cniテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol