Proyectos reales con Vite y el ecosistema

mi-app/
├── index.html          ← la única página; tiene <div id="root"></div>
├── package.json        ← dependencias y comandos (dev, build, preview)
├── vite.config.js      ← configuración de Vite
├── public/             ← archivos estáticos que se copian tal cual (favicon…)
└── src/
    ├── main.jsx        ← punto de entrada: monta <App /> en #root
    ├── App.jsx         ← tu componente principal
    ├── App.css         ← estilos de App
    ├── index.css       ← estilos globales
    ├── assets/         ← imágenes y otros recursos importables
    └── components/     ← (lo creas tú) un archivo por componente

export default function Tarjeta({ titulo, children }) {
  return (
    <article className="tarjeta">
      <h2>{titulo}</h2>
      {children}
    </article>
  );
}

import { useState } from "react";                  // exportación con nombre
import Tarjeta from "./components/Tarjeta.jsx";     // exportación por defecto
import "./App.css";                                  // solo estilos

export default function App() {
  const [n, setN] = useState(0);
  return (
    <Tarjeta titulo="Hola">
      <button onClick={() => setN(n + 1)}>Pulsado {n}</button>
    </Tarjeta>
  );
}

/* Tarjeta.module.css */
.caja { border: 1px solid #ccc; border-radius: 12px; padding: 1rem; }
.titulo { color: #4f46e5; }

import estilos from "./Tarjeta.module.css";

export default function Tarjeta({ titulo }) {
  return (
    <article className={estilos.caja}>
      <h2 className={estilos.titulo}>{titulo}</h2>
    </article>
  );
}

// npm install react-router-dom
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Inicio</Link> <Link to="/productos">Productos</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Inicio />} />
        <Route path="/productos" element={<Productos />} />
        <Route path="/productos/:id" element={<Detalle />} />   {/* parámetro en la URL */}
      </Routes>
    </BrowserRouter>
  );
}

VITE_API_URL=https://api.ejemplo.com

const url = import.meta.env.VITE_API_URL;
fetch(url + "/usuarios");

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  base: "/mi-app/",        // el nombre de tu repositorio
});

name: Publicar en GitHub Pages
on:
  push:
    branches: [main]
permissions:
  pages: write
  id-token: write
  contents: read
jobs:
  desplegar:
    runs-on: ubuntu-latest
    environment:
      name: github-pages
    steps:
      - uses: actions/checkout@v7
      - uses: actions/setup-node@v7
        with:
          node-version: 24
      - run: npm ci
      - run: npm run build
      - uses: actions/upload-pages-artifact@v5
        with:
          path: dist
      - uses: actions/deploy-pages@v5