Cómo configurar un proyecto de React con Vite

Tutoriales
JavaScript React

El autor seleccionó Code.org para recibir una donación como parte del programa Write for Donations.

Introducción

Normalmente, podrías crear un nuevo proyecto utilizando Create React App, pero puede llevar mucho tiempo instalar más de 140 MB de dependencias. Vite es una herramienta liviana que utiliza solo 31 MB de dependencias, lo que ahorrará tiempo al iniciar un nuevo proyecto. Vite también utiliza los módulos nativos del navegador de ES (ECMAScript) para enlazar archivos JavaScript, lo que no reconstruye todo el paquete después de cada cambio de archivo. Estas diferencias resultan en una experiencia más rápida al crear, actualizar y construir una aplicación React con Vite.

Este tutorial creará una nueva aplicación React utilizando la herramienta Vite. Crearás una aplicación básica con un nuevo componente, CSS y un archivo de imagen, y prepararás un paquete optimizado para implementación.

Simplifica la implementación de aplicaciones React con DigitalOcean App Platform. Implementa React directamente desde GitHub en minutos.

Prerrequisitos

Para seguir este tutorial, necesitarás lo siguiente:

Paso 1 — Crear un Proyecto Vite

En este paso, crearás un nuevo proyecto React utilizando la herramienta Vite desde la línea de comandos. Utilizarás el gestor de paquetes yarn para instalar y ejecutar los scripts.

Ejecute el siguiente comando en su terminal para configurar un nuevo proyecto Vite: 

  1. yarn create vite

Este comando ejecutará el ejecutable Vite desde el repositorio remoto de npm. Configurará las herramientas necesarias para configurar un entorno de desarrollo local de React. Finalmente, abrirá un menú de línea de comandos para configurar los ajustes del proyecto y el tipo de lenguaje.

Después de que el script termine, se le pedirá que ingrese un nombre de proyecto: 

Output
yarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "[email protected]" with binaries:
- create-vite
- cva
? Project name: » vite-project

Escriba el nombre de su proyecto (este tutorial usará digital-ocean-vite como ejemplo): 

  1. digital-ocean-vite

Después de ingresar el nombre de su proyecto, Vite le pedirá que seleccione un framework: 

Output
? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
Vue
> React
Preact
Lit
Svelte
Others

Vite le permite iniciar una variedad de tipos de proyectos, no solo React. Actualmente, admite proyectos de React, Preact, Vue, Lit, Svelte y JavaScript vanilla.

Use las teclas de flecha de su teclado para seleccionar React.

Después de seleccionar el framework React, Vite le pedirá que elija el tipo de lenguaje. Puede usar JavaScript o TypeScript para trabajar en su proyecto.

Use las teclas de flecha para seleccionar JavaScript: 

Output
? Select a variant: » - Use arrow-keys. Return to submit.
> JavaScript
TypeScript
JavaScript + SWC
TypeScript + SWC

Después de configurar el framework, verá una salida que indica que el proyecto ha sido configurado. Vite luego le indicará que instale las dependencias usando Yarn: 

Output
Done:
Scaffolding project in path\to\digital-ocean-vite...

Done. Now run:

cd digital-ocean-vite
yarn
yarn dev

Done in 129.89s.

Vaya a la carpeta de su proyecto según se le indique: 

  1. cd digital-ocean-vite

Luego, use el comando yarn para instalar las dependencias del proyecto.

  1. yarn

Cuando termine, la instalación de dependencias devolverá una salida con el tiempo que llevó instalar las dependencias:

Output
success Saved lockfile.
Done in 43.26s.

Ahora has configurado un nuevo proyecto de React usando Vite e instalado los paquetes requeridos por React y Vite.

A continuación, iniciarás el servidor de desarrollo para probar la aplicación.

Paso 2 — Iniciando el Servidor de Desarrollo

En este paso, iniciarás el servidor de desarrollo para verificar que todo esté funcionando correctamente.

Desde dentro de la carpeta digital-ocean-vite, utiliza el siguiente comando para ejecutar el servidor de desarrollo:

  1. yarn run dev

Este comando es un alias del comando vite. Ejecutará tu proyecto en modo de desarrollo.

Recibirás la siguiente salida:

Output
VITE v4.0.4 ready in 847 ms

➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help

A continuación, abre tu navegador y visita http://localhost:5173/. El proyecto de React predeterminado estará ejecutándose en el puerto 5173:

Cuando veas esta aplicación en funcionamiento, habrás instalado correctamente React con Vite. A continuación, previsualizarás tu aplicación desde tu teléfono móvil.

Paso 3 — Previsualizando tu Aplicación desde el Teléfono Móvil

Vite no expone tu aplicación de desarrollo a tu red de forma predeterminada. En este paso, expondrás la aplicación a tu red local para previsualizarla desde tu teléfono móvil.

Para ejecutar tu aplicación en tu red local, primero debes detener el servidor actual. En tu terminal, utiliza CTRL+C para terminar el servidor de desarrollo que se está ejecutando actualmente.

A continuación, utiliza el siguiente comando para ejecutar tu proyecto:

  1. yarn run dev --host

La bandera --host le indica a Vite que exponga tu aplicación a la red local.

Verás esta salida en tu terminal:

Output
VITE v4.0.4 ready in 747 ms

➜ Local: http://localhost:5173/
➜ Network: http://your_ip_address:5173/
➜ press h to show help

Esta es una dirección IP local, única para tu red de computadoras o enrutador.

Abre un navegador en tu teléfono móvil, luego escribe la dirección IP y el puerto mencionados anteriormente para acceder a la previsualización de tu aplicación Vite desde tu teléfono móvil:

Ahora has ejecutado tu aplicación en el entorno de desarrollo y has verificado que funciona. En el siguiente paso, eliminarás el código de plantilla que viene con Vite.

Paso 4 — Eliminando la Plantilla Predeterminada

En este paso, eliminarás los archivos de plantilla del proyecto Vite del directorio src/, lo que te permitirá configurar una nueva aplicación. También te familiarizarás con la estructura del proyecto predeterminada de la aplicación actual.

Utiliza el siguiente comando para ver el contenido de tu directorio src/:

  1. ls src/

El resultado mostrará todos los archivos disponibles:

Output
App.css
App.jsx
assets
index.css
main.jsx

Utiliza el comando rm para eliminar un archivo o directorio. Usa los siguientes comandos para eliminar los archivos predeterminados del proyecto:

  1. rm src/App.css

  2. rm src/App.jsx

  3. rm src/index.css

Elimina el directorio assets usando el siguiente comando:

  1. rm -r src/assets

La bandera -r es una operación recursiva, necesaria al eliminar un directorio junto con su contenido.

Después de eliminar estos archivos, solo queda main.jsx en el directorio src/. Ejecuta el comando ls src/ nuevamente para ver los archivos restantes:

  1. ls src/

Ahora, el directorio solo contendrá el archivo main.jsx:

Output
main.jsx

Debido a que has eliminado todos los demás archivos, ahora necesitas eliminar una referencia en main.jsx a un archivo CSS eliminado.

Abre main.jsx para editarlo con el siguiente comando:

  1. nano src/main.jsx

Elimina la línea resaltada para desvincular la referencia al archivo CSS:

/src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import "./index.css"

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)

Guarda y cierra el archivo main.jsx.

Crea un nuevo archivo llamado App.jsx bajo el directorio src/ con el siguiente comando:

  1. nano src/App.jsx

Agrega el siguiente código al archivo App.jsx:

/src/App.jsx
export default function App() {
return (
<>
<div>Hello World</div>
</>
);
}

Este código crea un nuevo componente funcional de React llamado App. El prefijo export default indica a JavaScript que exporte esta función como una exportación predeterminada. El cuerpo de la función contiene un <div> con el texto Hello World.

Guarda y cierra el archivo App.jsx.

Utiliza el siguiente comando para ejecutar nuevamente el servidor de desarrollo:

  1. yarn run dev --host

Ahora, abre o actualiza http://localhost:3000 en tu navegador para acceder a una página en blanco que muestra el texto Hello World:

En este paso, eliminaste algunos de los archivos predeterminados del proyecto Vite. A continuación, construirás una aplicación básica con nuevos componentes, archivos CSS e imágenes.

Paso 5: Crear una aplicación básica

En este paso, crearás componentes, agregarás archivos CSS y enlazarás imágenes al crear una aplicación básica. Comienza cerrando el servidor de desarrollo.

En la siguiente subsección, crearás un nuevo componente para tu aplicación React.

Crear un componente

Crear un nuevo componente añade modularidad a tu proyecto. Agregarás todos los componentes al directorio components para mantener las cosas organizadas.

Usa el siguiente comando para crear un nuevo directorio llamado components dentro de src/: 

  1. mkdir src/components

A continuación, crea un nuevo archivo llamado Welcome.jsx dentro del directorio src/components/ con el siguiente comando: 

  1. nano src/components/Welcome.jsx

Añade el siguiente código al archivo Welcome.jsx:

/src/components/Welcome.jsx
export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
</div>
</>
);
}

El código anterior creará un nuevo componente funcional de React llamado Welcome. El prefijo export default le indica a JavaScript que exporte esta función como una exportación predeterminada.

La etiqueta div con un nombre de clase wrapper te permite seleccionar esta sección en el CSS. Las etiquetas h1 y p mostrarán el mensaje en la pantalla.

Guarda y cierra el archivo.

A continuación, harás referencia a este nuevo componente en tu archivo App.jsx.

Abre App.jsx con el siguiente comando:

  1. nano src/App.jsx

Actualiza el contenido de App.jsx con el código resaltado:

/src/App.jsx
import Welcome from "./components/Welcome"

export default function App() {
return (
<>
<Welcome />
</>
)
}

Esta línea de código importará Welcome.jsx en la aplicación y vinculará el nuevo componente al cuerpo de la función. Cuando hayas terminado, guarda y cierra el archivo.

En la siguiente subsección, agregarás una imagen a tu aplicación.

Agregar una Imagen

Agregar imágenes en React es un caso de uso común en el desarrollo de aplicaciones.

Crea un nuevo directorio llamado img bajo el directorio src/ con el siguiente comando:

  1. mkdir src/img

Navega a tu directorio src/img con este comando:

  1. cd src/img

Descargarás esta imagen de Sammy en src/img.

Descarga la imagen con wget:

  1. wget https://html.sammy-codes.com/images/small-profile.jpeg

Renombra la imagen con el siguiente comando:

  1. mv small-profile.jpeg sammy.jpeg

Este comando renombra el archivo de imagen de small-profile.jpeg a sammy.jpeg, lo que será más fácil de referenciar más tarde.

Vuelve a tu directorio raíz con este comando:

  1. cd ../../

A continuación, actualizarás el archivo Welcome.jsx para enlazar esta imagen. Abre el archivo:

  1. nano src/components/Welcome.jsx

Actualiza tu archivo Welcome.jsx añadiendo las líneas resaltadas:

/src/components/Welcome.jsx
import Sammy from "../img/sammy.jpeg"

export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
<img src={Sammy} alt="Sammy Image" width={200} height={200} />
</div>
</>
)
}

La primera línea importará la imagen a React como un módulo.

La otra línea dentro del cuerpo de la función creará una nueva etiqueta <img> y vinculará el atributo src al componente de imagen que acabas de importar. Las propiedades width y height establecerán los atributos de imagen correspondientes en 200 píxeles.

Guarda y cierra el archivo Welcome.jsx.

A continuación, agregarás CSS a tu proyecto.

Agregando CSS

En esta subsección, agregarás un archivo CSS personalizado a tu proyecto para estilizar tu aplicación.

Crea un nuevo directorio llamado css bajo el directorio src/ utilizando el siguiente comando:

  1. mkdir src/css

Ahora, crea un nuevo archivo CSS llamado main.css en src/css:

  1. nano src/css/main.css

Agrega el siguiente código al archivo main.css:

/src/css/main.css
body {
display: grid;
place-items: center;
background-color: #b4a7d6;
font-family: Arial, Helvetica, sans-serif;
}

.wrapper {
background-color: #fff9e6;
padding: 20px;
border-radius: 10px;
}

h1 {
color: #8873be;
}

En el CSS anterior, estableces una visualización de cuadrícula y colocas elementos en el centro para el body. También estableces una familia de fuentes y un color de fondo.

La clase .wrapper seleccionará el div contenedor en tu archivo Welcome.jsx. Los estilos para esta clase harán lo siguiente:

  • Establecer un color de fondo.
  • Agregar un relleno de 20 píxeles.
  • Agregar esquinas redondeadas de 10 píxeles.

El selector h1 apuntará a la etiqueta en HTML, estableciendo su color a una sombra de morado.

Cuando hayas terminado, guarda y cierra el archivo main.css.

A continuación, harás referencia al nuevo archivo CSS desde el componente Welcome.jsx. Abre el archivo Welcome.jsx: 

  1. nano src/components/Welcome.jsx

Actualiza el contenido del archivo con la línea resaltada:

/src/components/Welcome.jsx
import Sammy from "../img/sammy.jpeg"
import "../css/main.css"

export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
<img src={Sammy} alt="Sammy Image" width={200} height={200} />
</div>
</>
)
}

Esta línea importará el archivo CSS como un módulo en tu componente. Es posible que necesites actualizar la línea con la ruta de archivo correcta para la carpeta de tu proyecto.

Cuando hayas terminado, guarda y cierra el archivo Welcome.jsx.

En la siguiente subsección, cambiarás la barra de título de tu aplicación.

Cambiando la Barra de Título de la Aplicación

Por defecto, la aplicación Vite muestra el texto Vite + React en la barra de título de la ventana del navegador. En este paso, lo cambiarás a un título descriptivo.

Abre index.html en tu directorio raíz: 

  1. nano index.html

Actualiza la etiqueta <title> con el texto resaltado:

/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Cool App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

Este texto reemplaza la barra de título predeterminada de Vite App con el título personalizado de tu aplicación.

Guarda y cierra el archivo index.html.

Si necesitas volver a ejecutar el servidor de desarrollo, utiliza este comando:

  1. yarn run dev --host

Después de realizar todos estos cambios, visita http://localhost:5173 para ver tu aplicación. Verás una nueva versión de tu aplicación.

Puedes cerrar el servidor de desarrollo cuando estés listo para continuar con la construcción.

Ahora has añadido una imagen, cambiado estilos y creado una interfaz de usuario pulida. En el próximo y último paso, construirás un paquete de aplicación optimizado para implementación.

Paso 6 — Construcción para Producción

En este paso, construirás un paquete de aplicación optimizado listo para implementar en un servidor. Para crear una compilación, ejecuta el siguiente comando en la terminal:

  1. yarn run build

Este comando crea una nueva carpeta dist con archivos fuente minificados que puedes implementar en tu servidor para producción.

Recibirás una salida similar a esta:

Output
vite v4.0.4 building for production...
✓ 34 modules transformed.
dist/index.html 0.45 kB
dist/assets/sammy-9cb83ad5.jpeg 6.74 kB
dist/assets/index-d1c95597.css 0.19 kB │ gzip: 0.16 kB
dist/assets/index-e0751083.js 143.19 kB │ gzip: 46.04 kB
✨ Done in 1.63s.

Puede implementar ahora el contenido de la carpeta dist en un servidor en línea. Si tiene un servidor Apache o Nginx, puede cargar el contenido manualmente. También puede utilizar una plataforma de aplicaciones para ejecutar el script de compilación y generar los archivos de compilación automáticamente. Para implementar su aplicación React en la plataforma de aplicaciones de DigitalOcean, siga nuestro tutorial sobre Cómo implementar una aplicación React en la plataforma de aplicaciones de DigitalOcean.

Conclusión

En este tutorial, creó una nueva aplicación React utilizando la herramienta Vite. Creó una aplicación React fresca con el comando yarn create vite. Después de eliminar el código base, creó sus componentes agregando una imagen personalizada, un archivo CSS y cambiando la barra de título. Finalmente, creó un paquete optimizado usando el comando yarn run build, listo para implementar.

Ahora que tiene una aplicación React construida con Vite, vea qué más puede hacer con React en la serie Cómo programar en React.js y explore otros tutoriales de React.

Source:
https://www.digitalocean.com/community/tutorials/how-to-set-up-a-react-project-with-vite