React-Base-Config

1.首先引入一些react的js包

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

这些链接可以直接用的，也可以去CDN 下载到本地导入

2.定义一个Dom结点

<div id="example"></div>

3.开始写代码

<script type="text/babel">
			class Like extends React.Component {
				
				constructor(props) {
				    super(props)//把props交给父类也就是说React.Component这个
					//初始化状态
					this.state={//this代表一个组件对象本身
						isLikeMe : false
					}
					//将新增的方法中的this强制绑定为组件对象/bin是绑定新的函数
					this.handleClick=this.handleClick.bind(this)
				}
				//新添加的方法 ：内部的this默认不是组件对象，而是undesigned
				handleClick(){
					console.log('handleClick()',this)
					//得到原有的状态，然后取反
					const isLikeMe1 = !this.state.isLikeMe
					//更新状态
					this.setState({isLikeMe:isLikeMe1})
				}
				//重写组件类的方法
				render(){
					//读取状态
					const {isLikeMe} = this.state
					const msg1 = '你喜欢我'
					const msg2 = '我喜欢你'
					return <h2 onClick={this.handleClick}>{isLikeMe?msg1:msg2}</h2>
					
				}
			}
			ReactDOM.render(<Like />,document.getElementById('example'));
		</script>