React学习笔记（一）

Star丶oOo

已于 2025-04-18 19:57:24 修改

阅读量649

点赞数 25

文章标签： react.js 学习笔记

于 2025-04-17 18:59:29 首次发布

本文链接：https://blog.youkuaiyun.com/moustar007/article/details/147305424

版权

※ 序言

React API 官方地址
React.Children 官方API标记不推荐使用，要了解更多请参考React API官方地址
Object 静态函数 MDN API
PropTypes 规则参考链接地址

一、脚手架入门

create-react-app介绍
默认会处理好webpack的打包规则
create-react-app使用
安装：npm i create-react-app -g
检查：create-react-app --version
创建项目：create-react-app project-name

二、脚手架进阶

npm/yarn eject 提交需要将代码提交到仓库，防止暴露的代码覆盖我们写的代码
webpack.config.js 修改支持less 的css编写，修改以下左侧内容为右侧内容
- sassRegex -> lessRegex
- sassModuleRegex -> lessModuleRegex
- sass/scss -> less
- sass-loader -> less-loader
- resolve.alias -> add ‘@’:paths.appSrc – @将默认指向src目录
- import ./file.less -> import @/index.less
环境变量脚手架
- npm install -g cross-env / yarn add cross-env
环境变量的使用
- package.json 文件
- 修改内容：scripts.start: “cross-env PORT=8080 node scripts/start.js”
- process.env.变量
react-app-polyfill 兼容插件，react脚手架已内置

接口代理配置

setupProxy.js //存在则编辑，不存在则创建该文件
npm install/yar add http-proxy-middleware/
const { createProxyMiddleware } = require(‘http-proxy-middleware’)

代理配置

module.exports = function(app){
    app.use(
        createProxyMiddleware("/apipath",{
            target: "api.host",
            changeOrigin: true, // 支持跨域
            ws: true,
            pathRewrite: { "regex-path": "" }
        })
    )
}

三、React JSX基础

组件继承

class ComponentName extends React.Component {
	render() {
		return <></> // JSX，这里写 <></> fragment空标记，既能作为容器把内容包裹起来，还不占用层级
	}
}

js文件修改为jsx后缀，即可支持jsx语法
{} 胡子语法只能嵌入js表达式，表达式和逻辑代码要严格区分
ReactDOM.createRoot() 的时候，不能把HTML/BODY直接做为根节点使用
boolean/null/undefined/Symboy/BigInt 渲染的是空
- 除了数组对象外，其余对象一般都不支持{}中进行渲染，也有特殊情况
  - JSX虚拟DOM对象
  - 给元素设置style行内样式，要求必须写成一个对象
  - 数组对象：渲染数据，并不是字符串，且没有逗号分割
  - 函数对象：不支持在{}中渲染，但是可以作为函数组件，用<Component/>方式渲染
{{}} 这么写的意思，最外层的花括号为胡子语法，里层花括号申明是个对象
react JSX中 class 叫 className
render中的注释需要写在{}胡子语法中
数组只要函数具备return的函数，均可以进行渲染使用