npx create-react-app myweb sigue funcionando, pero ya no genera un proyecto React + TypeScript funcional — consulta este issue. Next.js y Gatsby suelen ser excesivos para una SPA sencilla, y Vite tiene su propio problema de memoria conocido, que raramente es relevante en la práctica. Vite sigue siendo la mejor opción predeterminada para una SPA React + TypeScript — aquí tienes la configuración paso a paso.

Paso 1: Inicializar el proyecto

npm create vite@latest

Usa este comando si deseas inicializar el proyecto en el directorio actual: npm create vite@latest .

✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC

SWC es 20 veces más rápido que Babel en un solo hilo y 70 veces más rápido en cuatro núcleos. Según su sitio web

Paso 2: Configurar Prettier y ESLint

npm i prettier eslint-config-prettier eslint-plugin-prettier -D

Agrega vite.config.ts a la sección de ignorados en eslint.config.js:

export default tseslint.config(
  { ignores: ['dist', 'vite.config.ts'] },
  {
...

Importa eslint-plugin-prettier en eslint.config.js, luego agrégalo a la lista de plugins de ESLint.

import eslintPluginPrettier from 'eslint-plugin-prettier'

export default tseslint.config(
  ...
  plugins: {
    'react-hooks': reactHooks,
    'react-refresh': reactRefresh,
    'prettier': eslintPluginPrettier,
  },
  ...

Ahora configura la regla para Prettier agregando lo siguiente a la lista de reglas en eslint.config.js:

'prettier/prettier': [
  'warn',
  {
    arrowParens: 'always',
    semi: false,
    trailingComma: 'none',
    tabWidth: 2,
    endOfLine: 'auto',
    useTabs: false,
    singleQuote: true,
    printWidth: 120,
    jsxSingleQuote: true
  }
]

Agrega .prettierrc con el siguiente contenido:

{
  "arrowParens": "always",
  "semi": false,
  "trailingComma": "none",
  "tabWidth": 2,
  "endOfLine": "auto",
  "useTabs": false,
  "singleQuote": true,
  "printWidth": 120,
  "jsxSingleQuote": true
}

Paso 3: Configurar Visual Studio Code

Instala las siguientes extensiones:

• Prettier - Code formatter
• Eslint
• Jest
• ES7+ React/Redux/React-Native snippets

Agrega lo siguiente a settings.json:

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": "always"
},
"[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"files.associations": {
    "*.css": "tailwindcss"
}

Paso 4: Pasos opcionales

Mapea @/* a src/* para usar import '@/shared/Header' en lugar de import '../../shared/Header', agregando compilerOptions en tsconfig.json:

{
  "files": [],
  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

También debemos indicar este mapeo a Vite, agregando alias en vite.config.js:

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

Agrega scripts de utilidad para CI/CD incluyendo lo siguiente dentro del campo scripts en package.json:

"scripts": {
  ...
  "lint:fix": "eslint . --fix",
  "prettier": "prettier --check \"src/**/(*.tsx|*.ts|*.css|*.scss)\"",
  "prettier:fix": "prettier --write \"src/**/(*.tsx|*.ts|*.css|*.scss)\""
}

Paso 5: Agregar Tailwind CSS

Simplemente sigue esta guía oficial: https://tailwindcss.com/docs/guides/vite

Eso es todo — para iniciar el desarrollo: npm run dev