认识 React、TypeScript、Vite

像风一样自由2020

1809人浏览 · 2025-08-22 10:16:10

像风一样自由2020 · 2025-08-22 10:16:10 发布

从 0 认识 React、TypeScript、Vite（基于“鲜果优选”项目）

面向前端新手的一份实战型入门笔记：它们分别是什么、解决什么问题、如何在本项目中落地，以及下一步学习建议。

一、快速概览

React：用于构建用户界面的库。把页面拆成“组件”，声明式描述 UI，组合复用灵活。
TypeScript：给 JavaScript 加上“类型系统”。更好地提示/检查，减少低级错误，便于重构与协作。
Vite：新一代前端开发/构建工具。开发期启动和热更新极快；生产期负责打包优化。

这三者常被组合使用：React 负责“怎么写页面”，TypeScript 负责“写得更稳更可维护”，Vite 负责“本地开发体验和上线构建”。

二、React 是什么？

核心理念：组件化 + 声明式 UI。
- 组件是一个函数，输入 props（属性）与 state（状态），输出视图（JSX）。
- 通过组合组件构建复杂界面。
生态：React Router（路由）、状态管理、UI 库（Radix/shadcn）、数据获取（React Query）等。
你项目中的位置：
- 入口装配：src/App.tsx、src/main.tsx
- 页面与路由：src/pages/Index.tsx、src/pages/NotFound.tsx
- 业务组件：src/components/ 下的 Header.tsx、HeroSection.tsx、ProductGrid.tsx、FruitCard.tsx、CartDrawer.tsx

示例（最小组件）：

function Hello({ name }: { name: string }) {
  return <h1 className="text-xl">Hi, {name}</h1>
}

在本项目中，Index.tsx 将多个组件组合成首页：

// src/pages/Index.tsx（节选）
import { Header } from "@/components/Header";
import { HeroSection } from "@/components/HeroSection";
import { ProductGrid } from "@/components/ProductGrid";

export default function Index() {
  return (
    <div className="min-h-screen bg-background">
      <Header />
      <main>
        <HeroSection />
        <ProductGrid />
      </main>
    </div>
  );
}

三、TypeScript 是什么？

给 JS 加类型：让编辑器在“写代码时”就能提示错误与类型信息（而不是运行后才报错）。
好处：
- 自文档化（类型即文档）
- 重构安全（改动时更有把握）
- 团队协作更顺畅（接口清晰）
最终会被编译为普通 JavaScript 供浏览器执行。
你项目中的位置：
- 所有 .ts、.tsx 文件都在使用 TS。
- 配置：tsconfig.json、tsconfig.app.json

示例（为数据和函数声明类型）：

type Product = { id: string; name: string; price: number }

function getTotal(list: Product[]) {
  return list.reduce((sum, p) => sum + p.price, 0)
}

在 src/components/FruitCard.tsx 等组件中，常见做法是为 props 定义类型、为回调入参/返回值标注类型，避免误用。

四、Vite 是什么？

开发期：
- 本地服务器 + 热更新（HMR），保存即刷新，极大提升效率。
- 支持别名、环境变量、插件系统等工程化能力。
构建期：
- 调用 Rollup 进行高效打包，生成可上线的静态资源。
你项目中的位置：
- 启动/构建脚本：package.json → dev/build/preview
- 配置：vite.config.ts

项目中的配置（节选）：

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig(({ mode }) => ({
  server: { host: "::", port: 8080 },
  plugins: [react(), mode === 'development' && require('lovable-tagger').componentTagger()].filter(Boolean),
  resolve: { alias: { "@": path.resolve(__dirname, "./src") } },
}));

server.port = 8080：开发服务器端口。
@vitejs/plugin-react：启用 React 的开发增强（JSX、HMR 等）。
alias @ -> ./src：允许使用 @/components/... 这样的路径别名。

五、三者如何协作？

React 负责“写界面”：组件化组织 UI。
TypeScript 让 React 代码“更稳”：用类型约束组件 props、状态、接口数据等。
Vite 提供“开发与打包”能力：启动、热更新、插件、构建优化，最终产出上线资源。

在 src/App.tsx 你能看到典型的 React 应用装配：

// src/App.tsx（节选）
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Index />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </BrowserRouter>
    </QueryClientProvider>
  );
}