Hasta ahora, has trabajado con ejemplos aislados de React. En el desarrollo real, las aplicaciones de React se crean y ejecutan como proyectos con una estructura y herramientas predefinidas.

En este capítulo, aprenderás a crear y ejecutar un proyecto de React utilizando Vite, una herramienta de construcción moderna que es rápida, ligera y comúnmente utilizada en proyectos de producción.

Creación de un proyecto de React con Vite

Para crear un nuevo proyecto de React, abre tu terminal y ejecuta el siguiente comando:

npm create vite@latest

Se te pedirá:

1. Ingresar un nombre de proyecto;
2. Seleccionar un framework → elige React;
3. Seleccionar una variante → elige JavaScript.

Una vez finalizada la configuración, navega a la carpeta del proyecto:

cd project-name

Instala las dependencias del proyecto:

npm install

Ejecución del servidor de desarrollo

Para iniciar el servidor de desarrollo de React, ejecuta:

npm run dev

Después de ejecutar este comando:

• Vite inicia un servidor de desarrollo local;
• Una URL local (normalmente http://localhost:5173) aparece en la terminal;
• Al abrir esta URL en el navegador se muestra tu aplicación de React.

Cualquier cambio que realices en el código se actualizará automáticamente en el navegador.

Comprendiendo lo que acaba de suceder

Cuando ejecutaste el servidor de desarrollo:

• Vite agrupó tu código de React;
• React renderizó la aplicación en el navegador;
• La aplicación entró en modo de desarrollo, optimizado para retroalimentación rápida.

Ahora tienes un proyecto real de React ejecutándose localmente.