Vite

Vite és un servidor de desenvolupament i una eina de compilació.

Introducció

Vite és una eina de construcció que té com a objectiu proporcionar una experiència de desenvolupament més ràpida i lleugera per a projectes web moderns. Consta de dues parts principals:

Un servidor de desenvolupament que proporciona millores amb funcionalitats enriquides sobre mòduls ES natius, per exemple, Reemplaçament de Mòduls en Calent (HMR) extremadament ràpid.
Un build command que empaqueta el teu codi amb Rollup, preconfigurada per generar assets estàtics altament optimitzats per a producció.

Crea el teu primer projecte amb React

Getting Started

Cloudlfare

Create a new React SPA using the create-cloudflare CLI:

> bun create cloudflare@latest vite-mongo -- --framework=react --platform=workers

This command runs create-vite and then makes the necessary changes to incorporate the Cloudflare Vite plugin.

Seleccciona:

category: Framework Starter
framework: React
variant: TypeScript + SWC
git: No

Hello, World!

Puedes crear un proyecto:

bun create vite

¡Y a continuación sigue las instrucciones!

Otra opción es especificar directamente el nombre del proyecto y la plantilla que deseas usar,

Por ejemplo, para montar un proyecto de Vite + Reac, ejecuta:

bun create vite tsx --template react-swc-ts

Tailwind

Instala tailwindcss:

bun add -d tailwindcss @tailwindcss/vite

Añade el complemento @tailwindcss/vite a tu configuración de Vite.

vite.config.js

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react-swc'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
})

Agrega un @import al archivo index.css que importe Tailwind CSS.

css

@import "tailwindcss";

Ejecute su proceso de compilación con npm run dev

bun run dev

Comienza a usar las clases de utilidad de Tailwind para darle estilo a tu contenido:

App.tsx

export default function App() {
  return (
    <div className="flex h-screen">
      <header className="m-auto">
        <p className="text-2xl underline underline-offset-8 font-['Menlo']
          hover:underline-offset-4 hover:text-3xl hover:border-red-500
           hover:border-4 hover:p-4 hover:cursor-pointer">
          David de Mingo
        </p>
      </header>
    </div>
  );
}

TODO

{ /*