当前位置：首页 > React

项目如何搭建react面试

2026-01-24 11:42:06React

搭建 React 面试项目的步骤

环境准备
确保已安装 Node.js（建议版本 16+）和 npm/yarn。通过以下命令验证环境：

node -v
npm -v

创建 React 项目
使用 Create React App（CRA）快速初始化项目：

npx create-react-app react-interview-project
cd react-interview-project

安装必要依赖
根据面试需求添加常用库，如路由、状态管理、UI 组件库等：

npm install react-router-dom @reduxjs/toolkit react-redux axios antd

项目结构设计
推荐按功能模块组织代码，例如：

src/
  ├── components/    # 通用组件
  ├── pages/         # 页面级组件
  ├── store/         # 状态管理
  ├── utils/         # 工具函数
  └── App.js         # 主入口

配置路由
在 App.js 中设置基本路由结构：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/quiz" element={<QuizPage />} />
      </Routes>
    </BrowserRouter>
  );
}

实现核心功能
根据面试场景设计功能模块，例如：

题目展示组件（支持单选/多选）
计时器与答题进度统计
结果评分与反馈

样式与优化
使用 CSS Modules 或 styled-components 管理样式，添加响应式布局。通过 npm run build 生成生产环境代码。

面试题示例实现

以下是一个简单的面试题组件代码：

import { useState } from 'react';
function Question({ data }) {
  const [selected, setSelected] = useState(null);
  return (
    <div>
      <h3>{data.question}</h3>
      {data.options.map((opt) => (
        <button 
          key={opt.id} 
          onClick={() => setSelected(opt.id)}
          style={{ backgroundColor: selected === opt.id ? '#ddd' : '' }}
        >
          {opt.text}
        </button>
      ))}
    </div>
  );
}