当前位置: 首页 > 工具软件 > react-katex > 使用案例 >

react-app

寿子默
2023-12-01

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org
–以上是安装淘宝镜像

npm install -g create-react-app
create-react-app my-app
cd my-app
– my-app 是react项目

推荐使用 npm 的方式安装,它能更好地和webpack打包工具配合使用
npm i element-react --save

开始前, 你还需要一个主题包, 这里我们推荐使用element-theme-default.
npm install element-theme-default --save

react项目中默认没有less

先安装yarn
npm install -g yarn

安装less-loader less
yarn add less less-loader

突然,您会发现在我们项目中找不到 webpack 相关配置文件。

因为脚手架为了实现“零配置”,会默认把一些通用的脚本和配置集成到 react-scripts,目的是让我们专注于src目录下的开发工作,不再操心环境配置。同时,被其集成的脚本和配置也会从程序目录中消失 ,程序目录也会变得干净许多。

如果我们要自定义环境配置怎么办?
项目构建完成后,会提供一个命令yarn eject,通过这个命令,我们可以把被 react-scripts 集成的配置和脚本暴露出来。

运行yarn eject
yarn eject

然后会发现项目中多了一个config文件:
webpack.config.js # 配置

修改 webpack 配置
在module.rules节点中找到 css 文件的加载规则:
找到 const cssRegex = /.cssKaTeX parse error: Can't use function '\.' in math mode at position 31: …st cssRegex = /\̲.̲(css|less)/
找到 common function to get style loaders 在 getStyleLoaders 函数中加
{
loader: require.resolve(‘less-loader’)
}

可能版本不同 详情可见 https://www.cnblogs.com/esofar/p/9631657.html

配置项目路径
找到 alias 属性在此属性内添加
‘@’: path.resolve(__dirname, ‘…/src’), --@代表项目src是根目录

安装请求数据依赖
npm install axios

首先我们解决跨域的问题
打开项目生成的package.json文件,修改文件内容如下
在文件末尾加以下属性后重启
“proxy” : {
“/app” : {
“target” : “http://cp01-bkm-ibox01.epc.baidu.com”,
“changeOrigin” : true
}
}
然后项目会打不开报错原因是这里配置proxy只能是字符串,这个是一个好大的坑所以不能配置多个代理
只能如下添加
“proxy” : “http://127.0.0.1”,

如果想用多个代理设置的话那么只能使用代理中间件配置。
安装代理中间件
npm install http-proxy-middleware
在项目中src文件夹下 加 setupProxy.js 内容如下

// 引用依赖
const proxy = require(‘http-proxy-middleware’);
// proxy 中间件的选择项
const options = {
target: ‘http://localhost:8000’, // 目标服务器 host
changeOrigin: true, // 默认false,是否需要改变原始主机头为目标URL
ws: true, // 是否代理websockets
pathRewrite: {
‘^/api’ : ‘/’, // 重写请求,比如我们源访问的是api/old-path,那么请求会被解析为/api/new-path
},
router: {
‘dev.localhost:3000’ : ‘http://localhost:8000’ //对象/函数,重新指定请求转发目标
}
};
// 创建代理
const exampleProxy = proxy(options);

module.exports = function(app) {
app.use(’/api’, exampleProxy);
}

这里一定要注意配置完以上代理 要不然配置更新不了

下来咱们就可以请求数据了

首先介绍一下react的生命周期吧
学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助

//初始化

页面初始化 constructor
constructor(props) {
super(props); // – 必须写在class方法中,继承是使用extends 关键字来实现的。子类 必须 在 constructor( )调用 super( )方法,否则新建实例时会报错。
this.state = {}; // – 这里是本页面的值
}
componentWillMount() // – 组件初始化时只调用,以后组件更新不调用,整个生命周期只调用一次,此时可以修改state。

componentDidMount() // – 组件渲染之后调用,只调用一次。

render() // – react最重要的步骤,创建虚拟dom,进行diff算法,更新dom树都在此进行。此时就不能更改state了。

//更新
shouldComponentUpdate(nextProps, nextState)
react性能优化非常重要的一环。组件接受新的state或者props时调用,我们可以设置在此对比前后两个props和state是否相同,如果相同则返回false阻止更新,因为相同的属性状态一定会生成相同的dom树,这样就不需要创造新的dom树和旧的dom树进行diff算法对比,节省大量性能,尤其是在dom结构复杂的时候

componentWillUpdata(nextProps, nextState) // – 组件初始化时不调用,只有在组件将要更新时才调用,此时可以修改state
componentDidUpdate() // – 组件初始化时不调用,组件更新完成后调用,此时可以获取dom节点。

//卸载
componentWillUnmount()
每当React使用完一个组件,这个组件必须从 DOM 中卸载后被销毁,此时 componentWillUnmout 会被执行,完成所有的清理和销毁工作,在 componentDidMount 中添加的任务都需要再该方法中撤销,如创建的定时器或事件监听器。

更新state需要用this.setState()来更新状态,这个很类似微信小程序的setData(),state一发生改变,绑定那些状态的试图也会相应刷新改变。

下来我们安装router,实现路由功能
npm i react-router-dom --save

exact
exact是Route下的一条属性,一般而言,react路由会匹配所有匹配到的路由组价,exact能够使得路由的匹配更严格一些。

如:


//这种情况下,如果匹配路由path=’/page’,那么会把Home也会展示出来

所以我们添加exact来解决上述问题。

 类似资料: