当前位置：首页>編程日記>正文

react脚手架配置

編程日記08-29

react脚手架配置

1. 使用node创建react项目

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

cnpm i -g create-react-app

检查 react模块包的版本：create-react-app -V

1.2 创建一个react应用程序

create-react-app myapp

myapp是自定义项目名

1.3 启动react项目

cd myapp 需要cd进入项目my-app根目录
npm start 启动react项目

1.4 如何解决下载慢的问题？

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

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

可以把npm指令替换成cnpm指令
（使用热点或移动网络下载更快）

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

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

解决: npm i npm@6.4.1 -g

2. react中如何实现样式隔离？

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

导入组件的css样式文件：

import { Component } from "react"  // 导入react内置组件
import "./Home.css"  // 手动引入样式文件

2.1 根标签选择器限制样式

2.1.1 设置组件的class值，即组件根标签选择器

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

<div className="home"><h1>这是首页</h1>
</div>

2.1.2 在组件中的所有样式选择器都以根标签class开头

.home{font-size: 30px;
}
/* 样式隔离1：在组件中的所有样式选择器都以根标签class开头（保证各个组件的根标签样式各不相同） */
.home h1{color: red;
}

在App.js中渲染根组件Home：

import './App.css';// 导入主页（根组件）
import Home from "./pages/Home/Home"function App() {return (<div className="App"><h1>根组件</h1><Home/></div>);
}export default App;  // ES6模块化导出App

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’

import styles from "./Home.module.css"  // css样式模块化导入

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

<div className="home"><h1 className={styles.myH1}>这是首页</h1><h2 className={styles.name}>drgsrgb</h2>
</div>

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

.myH1{text-decoration: underline;
}
.name{background-color: black;color: white;
}

补充：要是想设置多个样式属性，有两种方式

(1) styles.name 拼接上字符串，里面是自定义属性名

<h3 className={styles.name + " age"}>sxwec</h3>

(2) 使用模板字符串包裹，$动态调用{styles.name}，再加上空格和自定义属性名

<h3 className={`${styles.name} age`}>sxwec</h3>

在Home.css中设置多属性样式即可：

.home .age{border-radius: 50%;border: 1px solid;
}

3. react项目配置代理

3.1 下载安装代理模块

cnpm install http-proxy-middleware --save

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

const { createProxyMiddleware } = require('http-proxy-middleware')module.exports = function (app) {//   /api是本地同源地址   此例为请求斗鱼数据app.use(createProxyMiddleware('/api',{target: 'https://open.douyucdn.cn',changeOrigin: true,// pathRewrite: {//   "^/api": ""// }}))
}

3.3 使用axios请求数据

按照axios模块包：cnpm i axios --save

导入axios模块：

import axios from "axios"  // 导入axios模块，用于数据请求

在componentDidMount（组件已经渲染）生命周期中，使用axios的get方法请求数据：

state = {  // 设置state状态数据roomList: []
}
componentDidMount(){axios.get("/api/RoomApi/live", {page: 1}).then(res=>{console.log(res.data);// 更新state状态数据this.setState({  roomList: res.data.data})})
}

在render()函数中渲染出斗鱼数据：

<ul>{this.state.roomList.map(item=>{return (<li key={item.room_id}><img src={item.room_src} /></li>)})}
</ul>

配置附加内容:

设置项目端口号: node_modules/react-scripts/scripts/start.js

也可以通过指令 npm run eject 把服务器配置暴漏出来, 修改scripts/start.js (这个指令不可逆)

4. react图片懒加载

4.1 下载安装懒加载模块

cnpm i react-lazyload --save

4.2 在src/assets/目录下放入懒加载占位图 logo.svg

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

import LazyLoad from "react-lazyload"  // 导入懒加载模块
import holder from "../../assets/logo.svg" // 导入占位图

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

var holderImg = <img src={holder} alt="" />  // 定义占位图变量holderImg

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

<LazyLoad placeholder={holderImg}><img src={item.room_src} />
</LazyLoad>

通过placeholder字段动态绑定holderImg占位图变量

5. react 路由5.0配置

注意：使用react-router 5.x 版本实现

5.1 下载react的路由模块

cnpm i react-router-dom@5 --save

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

import { HashRouter } from 'react-router-dom';  // 从路由模块导入工具组件Router

使用HashRouter工具包裹根组件：

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(// <React.StrictMode> <HashRouter>  <App /></HashRouter>// </React.StrictMode>
);

StrictMode 严格模式，是一个用来突出显示应用程序中潜在问题的工具，对 react框架做出约束
在严格模式下，不能使用插件，第三方模块，组件库，建议注释掉

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

import { Route, Switch} from 'react-router-dom'

5.4 创建路由组件（函数式组件），使用exact精准配置路由，并导出

export default function MyRouter(){return (<Switch>{/* 主页路由要加exact精确匹配，因为每一个路径都有/，不精确的情况下都会匹配主页 */}<Route exact path="/" component={Home}/>{/* 正常路由建议加exact，动态路由（如：/user:name）因为路径不固定，不能加exact */}<Route path="/user" component={User}/></Switch>)
}

主页路由要加exact精确匹配，因为每一个路径都有/，不精确的情况下都会匹配主页
正常路由建议加exact，动态路由（如：/user:name）因为路径不固定，不能加exact

导入路由跳转的组件，组件Home和组件User才能被使用：

import Home from "../pages/Home/Home"
import User from "../pages/User/User"

5.5 在App.js中导入路由组件

import RouterView from './router/index';  // 导入路由组件

5.6 在根组件App模板中添加路由组件，即路由出口

<RouterView></RouterView>

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

import { Link } from "react-router-dom"  // 导入路由跳转组件

5.8 在需要跳转的页面中使用Link组件执行路由跳转

<div className="App"><h1>根组件 |<Link to="/"> 主页 | </Link><Link to="/user">个人中心</Link></h1><RouterView></RouterView>
</div>

6. react路由重定向

6.1 进行路由配置

// 相当于vue中的index.js
import { Route, Switch, Redirect } from 'react-router-dom'import Home from "../pages/Home/Home"
import User from "../pages/User/User"export default function MyRouter(){return (<Switch><Route exact path="/home" component={Home}/><Route exact path="/user" component={User}/><Redirect path="/" to="/home"/></Switch>)
}

Redirect组件用于路由重定向
to为重定向跳转到的路径

6.2 函数式组件编程式导航跳转 props.history.push()

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

export default function User(props){function goToHome(){console.log("编程式导航", props);props.history.push("/home")   // this.$router.push("/home")  // vue的编程式导航跳转写法}return <div>这是用户页<button onClick={goToHome}>跳转到主页</button></div>
}