Explanation For Each Dependencies
React Router ➣ Routing (example.com/something instead of example.com/something.html)
TailwindCSS ➣ Quicker Styling
Framer Motion ➣ CSS Animation
Creating A Vite.js + React.js App
// Command-Line
npm create vite@latest demo --template react
or
npm create vite@latest demo -- --template react
cd demo
npm install
Installing Dependencies
// Command Line
npm install react-router-dom@6
npm install framer-motion
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Configure Frameworks
// tailwind.config.js
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,jsx}",
],
theme: {
extend: {},
},
plugins: [],
}
// index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Use React Router
// 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;
Top comments (0)