在题，文中我们将要应用 Create React App 建立前端项目。根据文中，我们将了解到了下边重点知识：
在开始前，先说一下我根据什么样的环境操控的：
# 系统软件
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 cmd建立你新项目，例如：
npm init react-app jimmy-app
该指令公会全自动给你新项目装好依靠，你只要进到此项目网站根目录，运作 npm run start 就可以启动项目。默认设置前提下，用浏览器上根据 http://localhost:3000 就可以浏览新项目，复位页面如下所示：
图中演试工程中 "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;
路由配置
使用 react-router-dom 包来处理路由器，根据 npm install react-router-dom --save-dev 组装最新版本（截至发表文章，其最新版本为 "^6.10.0"）。
必须注意的是，要是你组装是指版本号
5的安装文件，下边的启用方法不适合做，请移步文尾借鉴的相匹配官方网站
在版本号六中，我们好好启用，以 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。根据cmd 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 min
});
// 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;
实际效果如下图所示：
变更打包文件
这一部分内容，我还在其他回答里已经提到，有兴趣的阅读者能够换步 React 新项目途径加上指定浏览作为前缀 - SPA：变更项目实施作为前缀。
发布项目
这一部分内容，我还在其他回答里已经提到，有兴趣的阅读者能够换步 React 新项目途径加上指定浏览作为前缀 - SPA：部署项目。
参照
- create-react-app
- React 新项目途径加上指定浏览作为前缀 - SPA
- react-vant.3lang
- React Router
- Axios
Thanks for reading.
文中已经参与「」