Iniciar un Proyecto en React

En este ejemplo usaremos vite, antd y react-router-dom

Instalando dependencias

npm create vite@latest
npm install antd --save
npm i react-router-dom
npm i zustand

Para poder hacer referencia usando '@/...' instalamos

npm install --save-dev @types/node

y editamos los archivos de tsconfig.json y vite.config.js

tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    }
  },
  plugins: [react()],
})

Referencias

• nvm | github
• Getting Started | Vite
• Ant Design of React | Ant Design
• Tutorial | React Router
• Zustand | npm
  • Introduction | Zustand
• Can you import node's path module using import path from 'path' | StackOverflow
  • npm install --save-dev @types/node