一、安装
1. npm i create-react-app -g
2. create-react-app 项目名称
3. cd 项目
npm start
二、元素渲染
1.文本渲染
2.HTML渲染
3.条件渲染
4.列表渲染
三、事件
四、响应式数据
// react 响应式数据state
// 导入React 和Component方法 imrc + TAB
import React, { Component } from 'react';
// 创建一个App类 基础了Component方法 ccc+Tab
class App extends Component {
// 构造函数
constructor(props) {
// 执行父类方法
super(props);
// 响应式状态
this.state = { num:1 }
}
// 更新num
addNum(n){
this.setState({num:this.state.num+n})
}
// 渲染方法
render() {
// 返回一个节点
return (<div>
<h1>函数类</h1>
<button onClick={()=>{
//更新num值为原来的值加1
this.setState({num:this.state.num+1})
}}>{this.state.num}</button>
<button onClick={ this.addNum.bind(this,2)}>{this.state.num}</button>
</div>);
}
}
export default App;
// 更新state状态 this.setState({key:valu})
// bind 创建一个新的函数,改变this
// state状态(数据)理解为vue里面的data