脚手架的安装

1.全局安装 npm i -g create-react-app 【首次安装】
2.创建项目 create-react-app 项目名
临时安装 不全局 npx create-react-app 项目名 【每次安装都是最新版本 】
启动项目 npm start
npm的包的仓库管理软件 npm i -g nrm
nrm use taobao
react环境搭建
1 需要安装nodejs
2 安装create-react-app
npm i create-react-app -g
3 使用create-react-app创建项目
create-react-app 项目名
4 进入文件目录 同时执行npm start运行项目
cd 文件目录
npm start
—————————————————————————————————————————————————-
在react中组件分为两种
1 类组件 (在老的项目中使用的是类组件)
2 函数组件 (企业中使用该类型) 引入hooks
react中数据渲染需要使用单花括号
this.state={
msg: 123
}
{this.state.msg}
单花括号中是一个js运行环境
在react中循环遍历数据使用数组方法map
this.state={
lists: [1,2,3]
}
js
{this.state.lists.map((item,index)=>

{item}


)}
—————————————————————————————————————————————————-
组件只能有一个根节点
在react中需要注意以下几点
1 react中没有class属性 需要使用className来替换
2 react中如果写行内样式style 它的值是一个对象
例如
<元素标签 style={{属性1: ‘属性值1’, 属性2: ‘属性值2’}}></元素标签>
注意：
css样式属性如果有中横线 需要添加引号或者转化为小驼峰命名

react事件方法

react中绑定事件有两种形式
1 this.方法名.bind(this) 让this指向于当前组件
2 ()=>this.方法名()
以上两种方法都可以进行传值
1 this.方法名.bind(this,要传递的数据)

react组件传值

react中组件与组件分为两种
非父子
父子
父组件向子组件传值
1 在父组件中找到子组件的标签 在子组件的标签上边写上自定义属性名=要发送的数据
<子组件标签 自定义属性名=”要发送的数据”></子组件标签>
2 在子组件的模板中我们使用this.props.自定义属性名来获取父组件传递过来数据

{this.props.自定义属性名}
子组件向父组件传值
1 在子组件中自定义事件 通过this.props.自定义属性名(要发送的数据)来发送子组件中的数据

方法名1() {
this.props.自定义属性名(要发送的数据)
}
2 在父组件中找到子组件标签 在子组件标签写 自定义属性名={()=>this.方法名2()} 来接受数据
同时 在方法名2中接受一个默认参数 该参数就是子组件传递过来的数据
<子组件标签 自定义属性名={()=>this.方法名2()}></子组件标签>
方法名2(data) {
console.log(data) // data就是子组件传递过来的数据
}

生命周期

react生命周期整体分为三个阶段
挂载
componentWillMount
componentDidMount
更新
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
销毁
componentWillUnmount
生命周期函数有
componentWillMount() {
console.log(‘Component WILL MOUNT!’)
}
componentDidMount() {
console.log(‘Component DID MOUNT!’)
}
componentWillReceiveProps(newProps) {
console.log(‘Component WILL RECEIVE PROPS!’)
}
shouldComponentUpdate(newProps, newState) {
return true;
}
componentWillUpdate(nextProps, nextState) {
console.log(‘Component WILL UPDATE!’);
}
componentDidUpdate(prevProps, prevState) {
console.log(‘Component DID UPDATE!’)
}
componentWillUnmount() {
console.log(‘Component WILL UNMOUNT!’)
}
常用的生命周期只有一个 componentDidMount
相当于vue中created或者mounted

常用

点击
import React, { Component } from’react’
exportdefaultclassAppextendsComponent {
a=100
render( ) {
return (




)
}
handleClick() {
console.log(this.refs.mytext)
}
}
点击获取input的值
importReact, { Component } from’react’
exportdefaultclass App extendsComponent {
myref=React.createRef()
render() {
return (




)
}
handleClick( ) {
console.log(this.myref.current.value)
}
}
点击收藏/取消收藏
import React, { Component } from’react’
exportdefaultclassAppextendsComponent {
state= {
myname: ‘王文超’,
myShow: true
}
render( ) {
return (

欢迎你-{this.state.myname}




)
}
}
渲染数据
import React, { Component } from’react’
exportdefaultclass App extends Component {
state= {
list: [{
id: 1,
text: “1111”
}, {
id: 2,
text: “2222”
}, {
id: 3,
text: “3333”
}]
}
render( ) {
return (


    {
    this.state.list.map((item, index) =>
  • {item.text}
    • )
    }


)
}
}
留言
import React, { Component } from ‘react’
exportdefaultclass App extends Component {
myref=React.createRef( )
state= {
list: [{
id: 1,
mytext: ‘aaa’
}, {
id: 2,
mytext: ‘bbb’
}, {
id: 3,
mytext: ‘ccc’
}]
}
render( ) {
return (




    {
    this.state.list.map(item=>
  • {item}

    • )
    }


)
}
handleClick2= ( ) => {
let newlist= […this.state.list]
newlist.push({
id: Math.random() *1000,
mytext: this.myref.current.value,
})
this.setState({
list: newlist
})
}
}
ant design UI框架 react用的最多的https://ant.design/index-cn

安装路由组件库 react-router-dom

npm i react-router-dom@5 —save-dev