npx create-react-app myweb ainda funciona, mas não gera mais um projeto React + TypeScript funcional — veja esta issue. Next.js e Gatsby são frequentemente exagerados para uma SPA simples, e o Vite tem seu próprio problema de memória conhecido, que raramente é relevante na prática. O Vite continua sendo a melhor opção padrão para uma SPA React + TypeScript — aqui está a configuração passo a passo.

Etapa 1: Inicializar o projeto

npm create vite@latest

Use este comando se quiser inicializar o projeto no diretório atual: npm create vite@latest .

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

O SWC é 20x mais rápido que Babel em uma única thread e 70x mais rápido em quatro núcleos. Segundo seu site

Etapa 2: Configurar Prettier e ESLint

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

Adicione vite.config.ts à seção de ignorados em eslint.config.js:

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

Importe eslint-plugin-prettier no eslint.config.js, depois adicione-o à lista de plugins do ESLint.

import eslintPluginPrettier from 'eslint-plugin-prettier'

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

Agora configure a regra do Prettier adicionando o seguinte à lista de regras em eslint.config.js:

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

Adicione .prettierrc com o seguinte conteúdo:

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

Etapa 3: Configurar o Visual Studio Code

Instale as seguintes extensões:

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

Adicione o seguinte 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"
}

Etapa 4: Etapas opcionais

Mapeie @/* para src/*, permitindo usar import '@/shared/Header' em vez de import '../../shared/Header', adicionando compilerOptions no tsconfig.json:

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

Também precisamos informar o Vite sobre esse mapeamento, adicionando alias em 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')
    }
  }
})

Adicione scripts de utilidade para CI/CD incluindo o seguinte dentro do campo scripts em package.json:

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

Etapa 5: Adicionar Tailwind CSS

Basta seguir este guia oficial: https://tailwindcss.com/docs/guides/vite

É isso — para iniciar o desenvolvimento: npm run dev