React - Vit - Leaflet

 

Crear proyecto reac-vit-leaflet :

 Requisitos Previos

Antes de comenzar, asegúrate de tener instalado:

• Node.js (versión 14 o superior)

• npm (viene con Node.js) o yarn o pnpm

Puedes verificar con:

node -v
npm -v

Paso a Paso para crear un proyecto React con Vite

1. Crear el proyecto con Vite

npm create vite@latest

¿Qué hace este comando?

• Ejecuta el generador de proyectos Vite.

• Te pedirá un nombre para el proyecto y te preguntará qué framework usar.

2. Elegir nombre del proyecto

Vite te preguntará:

Project name: my-react-app

Puedes escribir el nombre que desees para tu proyecto.

3. Elegir framework y variante

Vite mostrará:

Select a framework:
> React

Select a variant:
> JavaScript
> TypeScript

 Elige:

• React como framework.

• TypeScript si deseas usar tipado (recomendado), o JavaScript si prefieres sin tipos.

4. Entrar en la carpeta del proyecto

cd my-react-app

Esta carpeta contiene la estructura básica de un proyecto React + Vite.

5. Instalar dependencias

npm install

¿Qué hace esto?

• Descarga todas las dependencias definidas en el archivo package.json.

• Prepara el entorno para ejecutar o desarrollar.

6. Ejecutar el servidor de desarrollo

npm run dev

¿Qué hace esto?

• Inicia el servidor local de desarrollo.

• Puedes acceder a tu aplicación en http://localhost:5173 (o puerto que indique).

 Estructura del Proyecto

Una vez creado, tendrás algo como:

my-react-app/
├── public/           # Archivos estáticos (favicon, imágenes, etc.)
├── src/              # Código fuente de tu app
│   ├── App.jsx       # Componente principal
│   ├── main.jsx      # Punto de entrada
├── index.html        # HTML principal
├── package.json      # Configuración y dependencias
├── vite.config.js    # Configuración de Vite
└── ...

Archivos clave

• main.jsx: monta el componente <App /> en el DOM.

• App.jsx: es el componente principal de la aplicación.

• vite.config.js: configuración específica de Vite.

• index.html: plantilla HTML usada por Vite.