React 项目开发指南：脚手架搭建、Axios 封装与 Gitee 远程仓库配置

一、React 脚手架搭建

1.1 使用Create React App创建项目（全局安装）

Create React App 是 React 官方推荐的脚手架工具，可以快速搭建现代化的 React 项目。

复制代码

npm install -g create-react-app

1.2 创建项目

复制代码

create-react-app 项目名

1.3 进入新创建的项目文件夹

复制代码

cd 项目名

1.4 启动开发服务器

复制代码

npm start

项目结构说明

项目搭建（主要）

1. 修改App.js文件移除原有DOM内容（react-router-dom为例）

复制代码

import React from 'react';
import AppRouter from './router';
import './App.css';

function App() {
  return (
    <div className="App">
      <AppRouter />
    </div>
  );
}

export default App;

2. 创建router.js文件

按需创建即可（该项目主要为H5）

复制代码

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import HomePage from './view/homePage/HomePage';

const AppRouter = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
      </Routes>
    </Router>
  );
};

export default AppRouter;

3. 配置单个H5的 title（可选）

通过 message.useMessage() 实现消息提示主要是解决原生 antd 的 message 使用后没有生效的问题。

复制代码

import React, { useState } from 'react';
import styles from './HomePage.module.scss';
import { message } from 'antd';

const HomePage = () => {
const [messageApi, contextHolder] = message.useMessage();
  return (
    <>
      {contextHolder}
      <title>
        JshineLink
      </title>
      <div>
        欢迎来到首页
      </div>
    </>
  );
};

export default HomePage;

注意⚠：按需下载对应的所需库即可！！！

二、Axios 二次封装

2.1 安装 Axios

复制代码

npm install axios

2.2 创建 Axios 实例

在 src/utils/request.js 中统一封装：

复制代码

import axios from 'axios';
import { message } from 'antd';

// 创建axios实例
const request = axios.create({
  baseURL: process.env.REACT_APP_BASE_API,
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
});

const getLocalStorageValue = (key) => {
  if (typeof window !== 'undefined') {
    return localStorage.getItem(key);
  }
  return null;
};

// 请求拦截器
request.interceptors.request.use(
  (config) => {
    const token = getLocalStorageValue('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
request.interceptors.response.use(
  (response) => {
    const res = response.data;
    if (res.code === 401) {
      if (typeof window !== 'undefined') {
        localStorage.removeItem('token');
        window.location.href = '/';
      }
      return Promise.reject(res.data);
    } else if (res.code !== 200) {
      return Promise.reject(new Error(res.message || '未知错误'));
    }

    return res;
  },
  (error) => {
    console.error('响应错误:', error);
    if (error.response.data.code === 401) {
      if (typeof window !== 'undefined') {
        localStorage.removeItem('token');
        window.location.href = '/';
      }
      return Promise.reject(error.response.data);
    }

    // 处理网络错误
    if (error.response && error.response.data) {
      message.error(error.response.data.message || '请求失败，请稍后重试');
    } else {
      message.error('网络错误，请检查您的网络连接');
    }
    return Promise.reject(error);
  }
);

export default request;

2.3 .env文件配置

复制代码

# 开发环境配置
REACT_APP_BASE_API=http://192.168.0.65:3000

# 测试环境配置
# REACT_APP_BASE_API=http://jsinetest.link.cn

# 生产环境配置
# REACT_APP_BASE_API=https://jshine.link.cn

2.4 API 接口统一管理

在 src/services/api.js 中统一管理所有 API 接口：

复制代码

import request from '../utils/request';

export const login = (params) => {
    return request({
        url: '/login',
        method: 'POST',
        data: params,
    });
};

export const bindPhone = (params) => {
    return request({
        url: '/bind-phone',
        method: 'POST',
        data: params,
    });
};

2.5 在组件中使用封装的 API

复制代码

import React, { useState } from 'react';
import styles from './HomePage.module.scss';
import { message, Button } from 'antd';
// 导入接口
import { login } from '../../service/api';

const HomePage = () => {
const [messageApi, contextHolder] = message.useMessage();

// 使用接口
// 登录
const handleLogin = async() => {
    const params = {
      phoneNumber,
      verificationCode,
    };
    const res = await login(params);
    if ( res.code === 200 ) {
        // 按实际需求添加代码
        localStorage.setItem('token', res.data.token);
        ...自行补充
    } else if {
        ...自行补充
    }
    
  };
  return (
    <>
      {contextHolder}
      <title>
        JshineLink
      </title>
      <div>
        欢迎来到首页
        ...自行补充代码
          <Button className={styles.loginBtn} onClick={handleLogin}>
            立即登录
          </Button>
      </div>
    </>
  );
};

export default HomePage;

三、Gitee 远程仓库连接

3.1 Gitee新仓库创建

个人仓库配置SSH公钥：

右上角个人头像 > 设置 > 安全设置（SSH公钥）

公钥位置一般都是在：C:\Users\Administrator\.ssh

按照操作步骤操作即可！！！

创建后会生成远程仓库

个人版和企业版类似新建仓库即可！！！

3.2 初始化Git 仓库

复制代码

# 在项目根目录初始化 Git
git init

3.3 连接 Gitee 远程仓库

本地创建以及修改了多个文件（未建立远程连接）

打开对应文件终端或者直接

终端输入

复制代码

git remote add origin https://gitee.com/cqjshine_tech/agg-notifs.git

// 查看建立远程连接的仓库
git remote -v

git push -u origin master

git add .

git commit -m "feat: 推送远程"

git push

warning: in the working copy of 'src/utils/request.js', LF will be replaced by CRLF the next time Git touches it 是一个非常常见的提示，尤其是在 Windows 系统上进行 Git 操作时。

方式一：忽略它（推荐，最简单）

对于大多数项目来说，你可以安全地忽略这个警告。Git 会自动处理换行符的转换，不会对你的工作造成影响。你可以继续执行你的 git commit 和 git push 操作。

方式二：配置 Git 的 autocrlf（推荐，一劳永逸）

如果你想让 Git 停止显示这个警告，并根据你的操作系统自动处理换行符，可以配置 core.autocrlf 设置。

3.4 Git 常用工作流程

复制代码

# 查看当前状态
git status

# 查看分支
git branch

# 创建并切换到新分支（比如 V1.0）
git checkout -b feature/new-feature

# 添加文件到暂存区
git add .

# 提交更改
git commit -m "feat: 添加新功能"

# 推送到远程分支
git push origin feature/new-feature

# 拉取最新代码
git pull origin master

# 合并分支
git checkout master
git merge feature/new-feature

四、项目部署与持续集成

4.1 构建生产版本

复制代码

# 构建优化后的生产版本
npm run build

# 构建后可以在本地预览
npm install -g serve
serve -s build

根据 .env 环境设置打包部署服务器

总结

通过以上步骤，我们完成了：

React 项目脚手架搭建 - 使用 Create React App 快速创建项目
Axios 二次封装 - 统一的请求/响应拦截、错误处理、API 管理
Gitee 远程仓库连接 - 版本控制、自动化部署

这套配置为 React 项目开发提供了完整的基础设施，能够提高开发效率，保证代码质量，并支持团队的协同开发。