Vite

Introducción

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 con {% link “/typescript/bun/” %}:

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.

@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

El contingut d'aquest lloc web té llicència CC BY-NC-ND 4.0.