Create React App 创建前端项目

精选原创

Jimmy_Pang 2023-05-10 22:00:51 ©著作权

文章标签 前端 React.js ios App 文章分类 Python 后端开发

©著作权归作者所有：来自51CTO博客作者Jimmy_Pang的原创作品，请联系作者获取转载授权，否则将追究法律责任

如题，本文我们将使用 Create React App 创建前端项目。通过本文，你将了解到下面的知识点：

创建项目
结合 vant UI 框架（如果你是开发 PC 端项目，你可以结合 ant-design 等框架）
路由配置
接口联调
更改打包文件
发布项目

在开始之前，先说下我基于什么环境操作的：

# 系统
macOS Apple M1 # 在 M1 上开发的过程中，遇到过 npm 包管理的问题，读者如果是此环境，可以多尝试几次
# Node 版本
v14.18.1
# Npm
6.14.15
# npm 源
npm -------- https://registry.npmjs.org/ # 如果下载依赖不顺畅，可考虑切换源再安装依赖

好，我们进入主题～

创建项目

运行 npm init react-app your-project-name 命令行创建你的项目，比如：

npm init react-app jimmy-app

该命令行会自动为你项目安装好依赖，你只需要进入该项目根目录，运行 npm run start 即可启动项目。默认情况下，在浏览器上通过 http://localhost:3000 即可访问项目，初始化的页面如下：

Create React App 创建前端项目_ios

上图演示项目中 "react" 版本为 "^18.2.0"

结合 UI 框架

这里我们考虑了移动端的项目，采用了比较成熟的 vant 框架。UI 框架的集成大同小异：

安装依赖
引入框架
调用组件

我们通过 npm i react-vant 安装 vant 框架。通过 import { CompName } from react-vant 来引入框架组件，然后直接在组件文件中通过 <Compname /> 引用。比如：

// NotFound.js
import { Button } from 'react-vant';

function NotFound() {
  return (
    <div className="not-found">
      <div className="number">404</div>
      <p className="text">Not Found</p>
      <Button>返回首页</Button>
    </div>
  )
}

export default NotFound;

Create React App 创建前端项目_React.js_02

路由配置

我们使用 react-router-dom 包来管理路由，通过 npm install react-router-dom --save-dev 安装最新版（截止发稿，其最新版为 "^6.10.0"）。

需要留意的是，如果你安装的是版本 5 的安装包，下面的调用方式不适合你，请移步文末参考的对应官网

Create React App 创建前端项目_App_03

在版本六中，我们这样调用，以 history 模式为例：

// App.js
import './App.css';
import { BrowserRouter as Router, Route, Routes} from 'react-router-dom';

import Home from './pages/Home.js';
import Login from './pages/Login.js';
import NotFound from './pages/NotFound.js';

function App() {
  return (
    <Router>
      <Routes>
        // 首页
        <Route path="/" element={<Home />}></Route>
        // 登陆页面
        <Route path="login" element={<Login />}></Route>
        // 404 页面
        <Route path="*" element={<NotFound />}></Route>
      </Routes>
    </Router>
  )
}

export default App;

接口联调

在开发的过程中，我们开发好了页面，需要对接后端的接口。但是我们是本地开发调试，怎么办呢？

我们使用代理 http-proxy-middleware。通过命令行 npm install http-proxy-middleware --save-dev 安装好依赖之后，在项目 src 目录下新建 setupProxy.js 文件：

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function(app) {
  app.use(
    createProxyMiddleware("/api", {
      target: "https://jimmyarea.com", // 代理地址
      changeOrigin: true,
      pathRewrite: {
        "^/api": "/api/"
      }
    })
  )
}

⚠️ 更改了代理，需要重启服务
jimmyarea.com 为个人站点的域名，今年五月份过期。五月份后访问不了属于正常现象

我们以 jimmyarea.com/api/public/… 接口为例，测试调用是否正常。在这之前，我们还使用了 axios 网络请求库。

通过 npm install axios 安装此库，然后简单封装一下：

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

//保存环境变量
const isPrd = process.env.NODE_ENV === 'production';

//区分开发环境还是生产环境基础URL
export const baseURL = isPrd ? 'https://www.production.com' : ''

// 创建 auth axios 实例
const auth = axios.create({
  headers: {
    'Content-Type': 'application/json;charset=UTF-8',
    'X-Requested-With': 'XMLHttpRequest'
  },
  baseURL, // api base_url
  timeout: 30 * 60 * 1000, // 请求超时时间 30 分钟
});

// request interceptor
auth.interceptors.request.use(config => {
  const token = '123'
  if (token) {
    config.headers[ 'Authorization' ] = 'JWT '+ token // 让每个请求携带自定义 token 请根据实际情况自行修改
  }
  return config
}, error => {
  console.log(error)
});

// response interceptor
auth.interceptors.response.use(
  // 响应处理
  response => {
    return response.data;
  },
  // 错误处理
  error => {
    console.log(error);
  }
)

export {
  auth
}

然后我们编写接口：

// 测试
export function getJimmyData(params) {
  return auth({
    url: '/api/public/article',
    method: 'get',
    params
  })
}

调用：

// Test.js
import React, { useState, useEffect } from 'react';
import { getJimmyData } from '../../apis/user.js'

function Test() {
  const [list, setList] = useState([]);
  useEffect(() => {
    getJimmyData({
      page: -1
    }).then((res) => {
      if(res.data && res.data.results) {
        setList(res.data.results);
      }
    })
  }, []);

  return (
    <div className="Test">
      {
        list.map((item, index) => {
           return  <div key={ index }>{ item.title }</div>
        })
      }
    </div>
  );
}

export default Test;

效果如下图：

Create React App 创建前端项目_App_04