创建现代 React 应用程序：Vite + TypeScript + ESLint + Tailwind + shadcn/ui 和 Zustand

# Web 开发 # JavaScript # 编程 # React

在本指南中，我们将介绍如何使用最新功能和流行库设置 React 应用程序。我们将使用 React 19、React Router、Tailwind CSS、shadcn/ui、带有 Prettier 的 ESLint 和 Zustand 进行状态管理。在本教程结束时，您将拥有一个完全配置好的项目，可供开发。

设置项目

让我们首先使用 Vite 创建一个新的 React 项目，它提供了更快、更精简的开发体验。

npm create vite@latest my-react-app -- --template react-ts
cd my-react-app

此命令创建一个支持 TypeScript 的新 React 项目。现在，让我们安装必要的依赖项：

npm install react@19 react-dom@19 react-router-dom@6 zustand@4 @types/react@19 @types/react-dom@19
npm install -D tailwindcss postcss autoprefixer eslint prettier eslint-config-prettier eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser

配置 Tailwind CSS

要设置 Tailwind CSS，请运行以下命令：

npx tailwindcss init -p

这将创建一个 `tailwind.config.js` 文件。使用以下内容更新它：

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

现在，将 Tailwind 指令添加到你的 `src/index.css` 文件中：

@tailwind base;
@tailwind components;
@tailwind utilities;

设置 ESLint 和 Prettier

在项目根目录中创建 `.eslintrc.js` 和 `.prettierrc` 文件：

touch .eslintrc.js .prettierrc

在 `.eslintrc.js` 中添加以下内容：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    'react/react-in-jsx-scope': 'off',
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
};

对于 `.prettierrc`：

{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "all",
  "jsxSingleQuote": true,
  "bracketSpacing": true
}

安装和配置shadcn/ui

要使用shadcn/ui，我们需要在我们的项目中进行设置：

npx shadcn-ui@latest init

按照提示为您的项目配置 shadcn/ui。这将设置必要的文件和配置。

设置 Zustand

为我们的 Zusand 商店创建一个新文件 `src/store.ts`：

import create from 'zustand';

interface AppState {
  count: number;
  increment: () => void;
  decrement: () => void;
}

export const useAppStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

更新 package.json 脚本

将以下脚本添加到你的“package.json”中：

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
  "preview": "vite preview",
  "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
  "lint:fix": "eslint src --ext ts,tsx --fix"
}

创建示例应用程序

让我们创建一个简单的应用程序来演示我们设置的用法。更新 `src/App.tsx`：

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { Button } from './components/ui/button';
import { useAppStore } from './store';

function Home() {
  const { count, increment, decrement } = useAppStore();

  return (
    
      Home
      Count: {count}
      
      
    
  );
}

function About() {
  return 
    About
  ;
}

function App() {
  return (
    
      
        
          Home
          About
        
        
          } />
          } />
        
      
    
  );
}

export default App;

运行应用程序

现在您可以使用以下命令运行您的应用程序：

npm run dev

这将启动开发服务器，您可以在“http://localhost:5173”查看您的应用程序。

结论

现在，您已使用 React 19、React Router、Tailwind CSS、shadcn/ui、带有 Prettier 的 ESLint 和 Zustand 设置了一个现代 React 应用程序。此设置为构建可扩展且可维护的 React 应用程序奠定了坚实的基础。

祝你编码愉快！

CLIS.CC