<aside> 💡 Para que el índice funcione, tienes que dividir tu tema por Headings o Subtítulos. Para crear un "Heading" tienes que darle formato Heading 1 para el título principal, Heading 2 para título secundario y Heading 3 para título terciario.

</aside>

Índice del Curso:

📚 Guía Rápida: Iniciar un Proyecto React con Vite

🚀 Pasos Iniciales (Terminal)

• 1️⃣ Verifica Node.js:
  • Asegúrate de tener Node.js instalado.
  • Comando: node -v
• 2️⃣ Crea el Proyecto con Vite:
  • Inicia un nuevo proyecto Vite, especificando la plantilla de React.
  • Comando: npm create vite@latest mi-proyecto --template react
• 3️⃣ Entra e Instala Dependencias:
  • Navega a la carpeta recién creada e instala los paquetes necesarios.
  • Comando:
    • cd mi-proyecto
    • npm install
• 4️⃣ Ejecuta el Servidor de Desarrollo:
  • Inicia tu aplicación en el navegador (generalmente en **http://localhost:5173/**).
  • Comando: npm run dev

📂 Estructura Clave del Proyecto (Mi-Proyecto)

Aquí se explica la función de los archivos y carpetas clave que ves en la imagen adjunta:

• 📁 node_modules/
  • Contiene todas las librerías y paquetes (dependencias) que requiere tu proyecto (instaladas con npm install).
• 📁 public/
  • Para archivos que no necesitan ser procesados por Vite (ej. imágenes grandes, el favicon, o el vite.svg de la imagen). Se sirven directamente en la raíz.
• 📁 src/
  • Esta es la carpeta más importante, donde reside todo el código fuente (source code) de tu aplicación.
    • 📁 src/assets/
      • Contiene recursos estáticos como imágenes (react.svg) y archivos CSS globales.
    • 📄 src/main.jsx
      • El punto de entrada de la aplicación React. Aquí se importa el componente principal (App) y se llama a ReactDOM.createRoot() para renderizarlo en el elemento HTML raíz (el div#root de index.html).
    • 📄 src/App.jsx
      • El componente base de tu aplicación. Es el punto de partida para construir la interfaz de usuario.
    • 📄 src/App.css / 📄 src/index.css
      • Archivos de estilos CSS para el componente App y estilos globales de la aplicación, respectivamente.
• 📄 index.html+
  • Es el punto de entrada principal para el navegador. Contiene el scaffold básico de HTML, incluyendo el div#root donde React inyectará toda tu aplicación a través de main.jsx.
• 📄 package.json
  • Define las dependencias del proyecto (qué librerías necesita) y los scripts para ejecutar tareas (como "dev" para iniciar el servidor de desarrollo).
• 📄 vite.config.js
  • El archivo de configuración principal de Vite. Aquí puedes ajustar cómo Vite debe construir, servir y optimizar tu aplicación.