1
一. 环境的搭建
++npm init -y //生成package.json文件
++npm i react --save / yarn add react
++npm i react-dom --save / yarn add react-dom
++npm i babel-standalone --save
安装好以后分别引入
++react.development.js
++react-dom.development.js
++babel.js
注:1.引入的顺序必出正确
2.script标签必须加上type属性 type=”text/babel”
3.引入的文件是umd下面的文件
二.jsx
1.原理:
++jsx是个根据react.createElement来实现的
2.如何使用react.createElement来创建标签
var mydiv=React.createElement(‘div’,{title:‘这是一个div’,id:‘box’},‘哈哈我真帅’,h1)
++第一个参数 指是想要创建的元素 例如div…
++第二个参数 是指创建元素的属性 例如titlt id class… 如果没有属性使用null来代替
++第三个参数 是指想要渲染的页面的文字
3.如何使用jsx注释
{/注释/}
三.插值表达式
所有的js代码需要卸载{}里面
四jsx中关键字的问题
value 改为defaultValue
checked 改为 defaultChecked
for 改为htmlFor
style 写对象
class 改为className
五.事件
语法:onClick //首字母要大写
2
一.无状态组件
var app=()=>{}
二.class组件
class App extends React.Component{ }
class组件里有三个属性
state ref props
三.通过事件传值
onClick={this.change.bind(this,1)}
四.Ref
方法一
3
一.组件的传值
1.父传子
++通过属性来传值
例: //传递
this.props.list //接收
2.子传父
++调用父组件传递过来的方法来实现的。传递的数据放到参数里去
例: this.props.方法名(所需传递的数据) //传递
//绑定点击事件
add=(num)=>{} //num为接收过来的值
二.模拟mock工具(json-server)
++ npm i json-server -g //安装json-server
++ json-server --version //查看安装的版本也是查看是否安装成功
使用:
1.创建一个json文件
2.运行:
++json-server xxx.json --port 端口 -w
Port //设置打开的端口号
-w //自动运行 类似于nodemon
++ json-server 的使用说明
https://gitee.com/rh_hg/json-server?_from=gitee_search
4
1.代理
++正向代理:
配置文件的路径
项目目录下/node_modules/react-scripts/config/webpackDevServer.config.js
proxy:{
“/weather”:{
target:“http://www.weather.com.cn”,
changeOrigin:true,
“pathRewrite”:{
“^/weather”:"/"
}
}
},
找到配置文件 在proxy后添加以上代码
注:请求时需要将请求接口路径也改变啦
2.弹射
++ yarn eject 不能撤销
如果弹射后出错,重装依赖即可完成弹射
也可以使用
npm run eject来进行安装
3.生命周期钩子函数
1.挂载阶段四个
a.constructor(props,context)
b. getDerivedStateFromProps(props,state)
c.render
d.componentDidMount
2.销毁阶段
componentWillUnmount
3.更新阶段
static getDerivedStateFromProps(props, state)
shouldComponentUpdate(nextProps, nextState)
render()
getSnapshotBeforeUpdate(prevProps, prevState)
componentDidUpdate(prevProps, prevState, snapshot)
5
json-server
6
脚手架安装
npm i create-react-app -D //安装
create-react-app --version //显示安装的版本号
create-react-app 文件名 //创建脚手架
npm satrt //运行