React Vite How to Setup Path Aliases | from @/components/Navigation

React Vite How to Setup Path Aliases | from @/components/Navigation

Create react project
Run the following command in your terminal: vite dev/guide/
npm create vite@latest
Install react-router-dom

my-app\src\App.tsx my-app\src\App.tsx

//src\App.tsx
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Index from "./pages/Index";
import NotFound from "./pages/NotFound";

const App = () => (
  <BrowserRouter>
    <Routes>
        <Route path="/" element={<Index />} />
        <Route path="*" element={<NotFound />} />
    </Routes>
  </BrowserRouter>
);

export default App;

my-app\src\pages\Index.tsx

//pages\Index.tsx
import { Navigation } from "@/components/Navigation";

const Index = () => {
  return (
    <div className="min-h-screen">
      <Navigation />
      <main>
        <div id="home">
          Heror
        </div>
        <h1>About</h1>
        <h1>Skills</h1>
        <h1>Projects</h1>
        <h1>Contact</h1>
      </main>
      Footer
    </div>
  );
};

export default NotFound;

my-app\src\pages\NotFound.tsx

//pages\NotFound.tsx
import { useLocation } from "react-router-dom";
import { useEffect } from "react";

const NotFound = () => {
  const location = useLocation();

  useEffect(() => {
    console.error(
      "404 Error: User attempted to access non-existent route:",
      location.pathname
    );
  }, [location.pathname]);

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <div className="text-center">
        <h1 className="text-4xl font-bold mb-4">404</h1>
        <p className="text-xl text-gray-600 mb-4">Oops! Page not found</p>
        <a href="/" className="text-blue-500 hover:text-blue-700 underline">
          Return to Home
        </a>
      </div>
    </div>
  );
};

export default Navigation;

my-app\src\pages\Navigation.tsx

//pages\Navigation.tsx
import { useState, useEffect } from "react";
import logo from "@/assets/react.svg";

const navLinks = [
  { label: "Home", href: "#home" },
  { label: "About", href: "#about" },
  { label: "Skills", href: "#skills" },
  { label: "Portfolios", href: "#portfolios" },
  { label: "Contact", href: "#contact" },
];

export function Navigation() {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
    };
    
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  const scrollToSection = (href: string) => {
    console.log(`Navigating to ${href}`);
  };

  return (
    <nav className={`fixed top-0 left-0 right-0 z-50 transition-smooth ${
      scrolled ? "bg-background/90 backdrop-blur-md shadow-card" : "bg-transparent"
    }`}>
      <div className="container mx-auto max-w-6xl px-4">
        <div className="flex items-center justify-between h-16">
          {/* Logo */}
          <div className="text-2xl font-bold">
              <img 
                src={logo} 
                alt="logo" 
                className="h-[50px]"
              />
          </div>

          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center space-x-8">
            {navLinks.map((link) => (
              <button
                key={link.label}
                onClick={() => scrollToSection(link.href)}
                className="text-muted-foreground hover:text-primary transition-smooth font-medium"
              >
                {link.label}
              </button>
            ))}
            <button>
              Hire Me
            </button>
          </div>
        </div>
      </div>
    </nav>
  );
}

Update vite.config.ts
my-app\vite.config.ts

//vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@/components': '/src/components',
      '@/assets': '/src/assets',
      '@/lib': '/src/lib',
    },
  },
});

Update tsconfig.json
my-app\tsconfig.json

//tsconfig.json
{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
        "@components/*": ["src/components/*"],
        "@assets/*": ["src/assets/*"],
        "@lib/*": ["src/lib/*"]
    }
  }
}

Run
myapp\my-app> npm run dev