React 项目搭建の正确打开方式，React 小白也能丝滑起飞 ✈️

xiaoxue_
96 阅读8分钟

React 项目架构：从初始化到路由配置的完整指南 🚀

今天咱们来聊聊 React 项目架构那些事儿！作为前端开发的 “顶流” 框架，React 凭借其组件化思想和灵活的生态，深受开发者喜爱。这篇文章会结合实际代码，从项目初始化到路由配置，手把手带大家搭建一个名为 “react-demo” 的 React 单页应用，全程干货满满～ 😊

一、初始化一个 React 项目 📦

想要开启 React 之旅，第一步当然是初始化项目啦！现代前端开发离不开高效的构建工具，这里我们用 Vite 来搭建项目，它的冷启动速度真的快到飞起～

初始化步骤：

  1. 拉取模板：运行 npm init vite，Vite 会从 GitHub 拉取预设的项目模板。

    • 给项目起个名字（比如 react-demo）
    • 选择 react 框架
    • 选择 javascript 版本（新手友好～）

  2. 启动开发环境：进入项目目录后，运行 npm run dev 启动开发服务器。这里的 dev 是 development（开发）的缩写，是前端的 “约定俗成”—— 对应的生产环境命令是 npm run build（打包代码）。整个开发流程就是：dev -> test（测试） -> production 循环迭代，像打怪升级一样一步步完善项目～

  3. 安装依赖：项目初始化后，需要安装核心依赖 npm i。打开 package.json 看看我们的 “装备清单”：

    json

    // package.json 核心依赖部分
"dependencies": {
  "react": "^19.2.0",  // React 核心库
  "react-dom": "^19.2.0",  // 负责 DOM 渲染
  "react-router-dom": "^7.10.1"  // 路由库
},
"devDependencies": {
  "vite": "^7.2.4",  // 开发构建工具
  "stylus": "^0.64.0"  // CSS 预处理器
}
    • dependencies：项目依赖，开发和上线都需要（比如 React 核心库）。
    • devDependencies：开发依赖，只在开发时用（比如 Vite 负责打包，Stylus 帮我们写更简洁的 CSS）。

灵魂三问：React 相关概念辨析 🤔

  1. React 是什么？ 它是 Meta 开发的JavaScript 库（划重点：是 “库” 不是 “框架”），专注于构建用户界面，核心是 “组件化” 和 “响应式”。

  2. React 和 Vue 有啥区别？

    • React：像一套 “灵活的乐高积木”，只提供核心视图功能，路由等功能需要搭配第三方库（比如 react-router-dom），强调函数式编程和 JSX 语法。
    • Vue：像 “组装好的玩具套装”，是渐进式框架，官方自带路由（Vue Router）等全套工具，模板语法更接近原生 HTML。简单说：React 是 “自己拼”（自由度高），Vue 是 “直接用”（上手快）～

  3. React 和 Vite 是什么关系？

    • React 是 “演员”：负责写页面逻辑、组件和界面。
    • Vite 是 “导演”：负责把 React 代码打包、编译、启动开发服务器，让代码能在浏览器跑起来。而且 Vite 支持 ESM（ES 模块化），冷启动速度远超传统工具，开发体验丝滑～

二、项目结构解析 🔍

一个清晰的项目结构就像整理有序的房间，找东西超方便！咱们的 react-demo 结构长这样：

plaintext

react-demo/
├── node_modules/      # 依赖包（npm install 生成）
├── src/               # 核心源码目录
│   ├── App.jsx        # 根组件
│   ├── main.jsx       # 入口文件
│   ├── router/        # 路由配置
│   │   └── index.jsx  # 路由规则
│   ├── pages/         # 页面组件
│   │   ├── Home.jsx   # 首页
│   │   └── About.jsx  # 关于页
│   ├── index.css      # 全局样式 
│   ├── index.styl     # 全局样式（Stylus）
│   └── App.css        # 根组件样式
├── index.html         # Vite 入口页面
└── package.json       # 项目配置

项目目录展示：

QQ20251221-230528.png

关键文件详解：

  1. index.html：浏览器的 “起点”里面有个 <div id="root"></div>，这是 React 组件的 “舞台”—— 所有组件最终都会渲染到这个元素里。还通过 <script type="module" src="/src/main.jsx"></script> 引入了入口文件，告诉浏览器：“先执行这个 JS 文件哦～”

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>react-demo</title>
  </head>
  <body>
    <!-- 根元素 root -->
    <div id="root"></div>
    <!-- ESM 模块 -->
    <!-- 引入 main.jsx 入口文件 -->
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

  1. main.jsx：React 启动器负责创建 React 根实例，并把根组件 App 挂载到 root 元素上：

    jsx

    // main.jsx
import { createRoot } from 'react-dom/client'
import './index.styl'  // 引入全局样式（Stylus）
import App from './App.jsx'

// 把 App 组件渲染到 root 元素
createRoot(document.getElementById('root')).render(
  <App />  // JSX 语法：组件像 HTML 标签一样使用
)

    这里还引入了 index.styl（全局样式），Vite 会自动把 Stylus 编译成 CSS，不用我们手动处理，超省心～（如果没安装 Stylus，记得先跑 npm i -D stylus 哦，-D 表示只在开发环境用～）

  2. App.jsx：根组件整个应用的 “总调度室”，在这里我们会配置路由和全局导航：

    jsx

    // App.jsx
import { BrowserRouter as Router, Link } from 'react-router-dom'
import AppRouts from './router'

function App() {
  return (
    <Router>  // 路由容器：管理所有路由
      <nav>  // 导航栏
        <ul>
          <li><Link to="/">Home</Link></li>  // 跳转首页
          <li><Link to="/about">About</Link></li>  // 跳转关于页
        </ul>
      </nav>
      <AppRouts />  // 显示当前路由对应的页面
    </Router>
  )
}

export default App

4.index.styl（全局样式）：Vite 自动把 Stylus 编译成 CSS

* 
    margin 0
    padding 0

body
    background-color pink

三、引入路由：让页面 “动” 起来 🚪

单页应用（SPA）的核心是路由 —— 不用刷新页面，就能切换不同内容。React 本身不带路由功能，我们用 react-router-dom 来实现～

步骤 1：安装路由

先运行 npm i react-router-dom 安装依赖，这是 React 生态中最流行的路由库。

步骤 2：配置路由规则

新建 src/router/index.jsx，定义 “路径 -> 页面” 的对应关系：

jsx

// src/router/index.jsx
import { Routes, Route } from 'react-router-dom'
import Home from '../pages/Home'  // 首页组件
import About from '../pages/About'  // 关于页组件

export default function AppRouts() {
  return (
    <Routes>  // 路由总管：管理所有 Route
      <Route path="/" element={<Home />} />  // 根路径显示 Home 组件
      <Route path="/about" element={<About />} />  // /about 路径显示 About 组件
    </Routes>
  )
}
  • Routes：路由容器，只会渲染当前匹配的第一个 Route。
  • Route：具体路由规则，path 是 URL 路径，element 是要显示的组件。

步骤 3：创建页面组件

路由配好了，得有对应的页面呀～

首页（src/pages/Home.jsx） ：

jsx

// Home.jsx
import { useState, useEffect } from 'react'

const Home = () => {
  const [repos, setRepos] = useState([])  // 用 useState 定义响应式数据

  // 组件挂载后执行（类似 Vue 的 onMounted）
  useEffect(() => {
    console.log('组件挂载完成～')
    // 发请求获取数据（这里用 GitHub API 举例）
    fetch('https://api.github.com/users/shunwuyu/repos')
      .then(res => res.json())
      .then(data => setRepos(data))  // 更新数据，触发组件重新渲染
  }, [])  // 空数组表示只执行一次

  return (
    <div>
      <h1>Home</h1>
      {repos.length ? (  // 条件渲染：有数据显示列表，否则显示提示
        <ul>
          {repos.map(repo => (
            <li key={repo.id}>
              <a href={repo.html_url} target="_blank" rel="noreferrer">
                {repo.name}
              </a>
            </li>
          ))}
        </ul>
      ) : (
        <p>暂无仓库数据～</p>
      )}
    </div>
  )
}

export default Home

这里用到了 React 的两个核心 Hook：

  • useState：定义响应式状态，数据变了组件会自动重新渲染。
  • useEffect：处理副作用（比如发请求、定时器），第二个参数是空数组时，只在组件挂载后执行一次。

关于页（src/pages/About.jsx） ：

jsx

// About.jsx
const About = () => {
  return (
    <div>
      <h1>About</h1>
    </div>
  )
}

export default About

简单直接，只显示一个标题～

路由小知识：两种路由模式

  • BrowserRouter：基于 HTML5 History API，URL 里没有 #（比如 http://localhost:5173/about），看起来更美观，但需要服务器配置支持（否则刷新可能 404）。
  • HashRouter：基于 URL 哈希（# 后面的部分），比如 http://localhost:5173/#/about，兼容性好，不用服务器配置，但 URL 里有 # 不够美观。

我们在 App.jsx 里用的是 BrowserRouter（通过 as Router 取别名），实际开发可以根据需求切换～

导航用 Link 代替 <a> 标签

在 React 路由中，不能用普通的 <a href> 导航，否则会刷新页面！要用 react-router-dom 提供的 Link 组件：

jsx

<Link to="/">Home</Link>  // 正确：无刷新跳转
<a href="/">Home</a>      // 错误：会刷新页面

Link 会拦截默认跳转行为，通过 JS 实现无刷新切换，这才是单页应用的精髓～

四、项目效果亮个相：

我们项目实现的效果：

  • 页面组成：包含两个核心页面 ——Home（首页）和About（关于页）。
  • 路由配置：通过Routes和Route定义路由规则，首页对应路径/，关于页对应/about；使用Link组件实现无刷新导航，导航栏包含首页和关于页的跳转链接。
  • 首页功能：Home组件通过useState管理仓库数据状态，useEffect在组件挂载后请求 GitHub 用户shunwuyu的仓库列表，成功后展示仓库名称及链接，无数据时显示 “暂无仓库”；About组件仅展示标题信息。

QQ20251221-231144.gif

五、React 小考题：这些细节你注意到了吗？ 📝

  1. 严格模式为什么执行两次？ 在 main.jsx 里提到了 <StrictMode>：

    jsx

    // import { StrictMode } from 'react'
// createRoot(...).render(
//   <StrictMode>
//     <App />
//   </StrictMode>
// )

严格模式是 React 提供的 “代码审查员”，会故意执行两次组件初始化和副作用，帮我们发现重复执行可能导致的问题（比如忘记清理定时器）。开发环境有效，生产环境不会执行两次哦～

  1. export default 是什么意思？ 每个组件末尾都有 export default Home 这样的代码，这是 ESM（ES 模块化）的默认导出语法。作用是把组件 “暴露” 出去，让其他文件可以通过 import Home from './Home' 引入使用。

六、结语 🌟

今天我们从初始化项目开始，一步步搭建了一个带路由的 React 应用，涉及了 Vite 构建工具、组件化开发、路由配置等核心知识点。React 的魅力在于它的灵活性和组件化思想，而 Vite 则让开发过程更高效～

其实 React 还有很多好玩的特性（比如 Hooks 进阶、状态管理），前面我们在React 之 HooksReact Hooks 如 useState 和 useEffect 赋予函数组件状态与副作用 - 掘金已经探索过了，想了解的可以去看看！希望这篇文章能帮你入门 React 项目架构，赶紧动手试试吧～ 有问题欢迎在评论区交流哦～ 😘

avatar
文章
阅读
粉丝