react脚手架、懒加载、路由配置、路由跳转、路由重定向、样式隔离、代理服务器

1.使用node创建react项目

1.1, 安装react代码行工具(脚手架)

​ npm install -g create-react-app

1.2,创建一个react应用程序, my-app是自定义项目名

​ create-react-app my-app

1.3,启动react项目 (需要cd进入项目my-app根目录)

​ npm start

注意：在使用create-react-app来创建一个新的React应用，在拉去各种资源时，往往会非常慢，一直卡在那，因为医院还是使用了npm下载的，我们可以换成淘宝的资源，执行指令。

npm config set registry https://registry.npm.taobao.org

问题：安装脚手架报错：The fs.promises API is experimental

原因：npm版本过高或node版本过低

解决：npm i npm@6.4.1 -g

2.样式隔离的使用

在react组件中，默认所有的样式文件都是全局作用域，不存在样式隔离

2.1 方法一：根标签选择器限制

如果需要每个组件样式隔离，在设置组件样式时，每一个选择器都添加组件根标签选择器，以区分不同组件中的样式

2.2 使用CSS Modules css模块化

2.2.1, 创建组件样式文件时以 xxx.module.css命名, 例如 Home.module.css 代替 Home.css

2.2.2, 在组件jsx导入样式文件时使用 import styles from ‘./xxx.module.css’ 导入 代替 import ‘./xxx.css’

2.2.3, 在组件中需要设置样式的标签上添加class值, className={styles.yyy} 其中yyy指的是css样式中的class值

2.2.4, 在xxx.module.css中通过 .yyy{} 设置样式,即为局部样式

3.React项目配置代理

3.1, 下载安装代理模块

​ npm install http-proxy-middleware --save

3.2, 在src目录中新建setupProxy.js文件，在文件中放入如下代码(注意是src目录,不是根目录)：

const { createProxyMiddleware } = require(‘http-proxy-middleware’)

module.exports = function (app) {
app.use(createProxyMiddleware(‘/api’,
{
target: ‘http://127.0.0.1:3000’,
changeOrigin: true,
pathRewrite: {
“^/api”: “”
}
})
)
}

4.react图片懒加载模块

4.1, 下载安装懒加载模块

​ cnpm i react-lazyload --save

4.2, 在src/assets/目录下放入懒加载占位图 placeholder.gif

4.3, 在需要使用懒加载的组件中导入懒加载模块和占位图

​ import LazyLoad from ‘react-lazyload’;
​ import placeholder from “…/…/asset/placeholder.gif”

4.4, 在组件rander函数中创建占位图片标签img

​ var holderImg =

4.5, 在组件模板中给需要懒加载的图片添加LazyLoad父标签

​
​
​

5.react路由配置

提示: 此教程使用react-router 5.x 版本实现

5.1, 下载react的路由模块

​ npm install react-router-dom@5 --save

5.2, 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件

​ import { HashRouter } from ‘react-router-dom’
​ ReactDOM.render(

​
​ ,
document.getElementById(‘root’)
​ );

5.3, 创建路由文件src/router/index.js, 并从路由模块中导入工具组件Route

​ import { Route, Switch } from “react-router-dom”;

5.4, 创建路由组件,配置路由, 并导出

​ export default function MyRouter(){
​ return(
​
​
​
​ )
​ }

5.5, 在app.js中导入路由组件

​ import RouterView from ‘./router/index’;

5.6, 在根组件app模板中添加路由组件,即路由出口

​

5.7, 在需要跳转的页面, 从路由模块导入工具组件 Link

​ import {Link} from ‘react-router-dom’

5.8, 使用Link组件执行路由跳转

​ 首页/Link>

6.精确匹配

主页路由要加exact精确匹配，因为每一个路径都有/，不精确下，都会匹配主页。正常路由建议加exact，动态路由因为路径不固定，不能加exact。

7. 路由重定向

redirect 用于路由重定向，可以不写精确匹配

8.路由跳转的两种方式

8.1 link路由跳转

如果需要用到link路由跳转，需要先导入Link工具组件

import {Link} from “react-router-dom”;

link路由跳转同vue的router-link相似，不过link路由跳转也需要定义to属性

   <Link to="/">今日新闻</Link>|
   <Link to="/last">昨日新闻</Link>

8.2 编程式导航跳转

由于HashRouter路由组件包裹了根组件App，所以HashRouter就是所有组件的父组件，当路由跳转时HashRouter这个父组件会像跳转的子组件页面props中传入路由数据

路由跳转的页面组件会传入三个路由信息：history、location、match

• history：拥有路由处理函数，实现路由的跳转和路由的监听
• location：拥有路由信息，主要用于路由传值
• match：拥有路由信息，也可以用于路由传值

所以，编程式导航主要是在history字段中的push来实现编程式导航跳转

props.history.push(“/home”)

9.路由重定向

实现路由重定向之前，需要导入Redirect这个模块

import { Redirect} from “react-router-dom”;

使用路由重定向：

今日新闻