Perfect React App

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;