React的基础语法（元素渲染 / 更新状态）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello React!</title>
<!-- Babel 可以将 ES6 代码转为 ES5 代码 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- 提供与 DOM 相关的功能 -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- React 的核心库 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<!-- 更DOM节点 -->
<div id="example"></div>
<script type="text/babel">
// -----------元素渲染-------------
// 1.直接声明使用
// ReactDOM.render(
// <h1>Hello, world!</h1>,
// document.getElementById('example')
// );
// 2.用变量的形式创建
// const element = <h1>用变量的形式创建</h1>;
// ReactDOM.render(
// element,
// document.getElementById('example')
// )
// 3.用函数的形式创建
// function Demo(props){
// return(
// <div>
// <h3>用函数的形式创建</h3>
// <h3>传值：{props.name}</h3>
// </div>
// )
// }
// ReactDOM.render(
// <Demo name="Lucy" />,
// document.getElementById('example')
// )
// 4.用类的形式创建（ 使用 ES6 类写法，用 this.props.属性名 来取值。）
var i = 12;
var mytyle = {
color:'red',
fontWeight:'bold'
}
// class Nav extends React.Component{
// render(){
// return(
// <div>
// <h3>用类的形式创建</h3>
// {/* JSX 传值 */}
// <h3>姓名：{this.props.name}</h3>
// <h3>年龄：{this.props.age}</h3>
// {/* JSX中不能使用if else 语法, 只能使用三元运算符 */}
// <h3>{i == 1 ? 'True' : 'False'}</h3>
// {/* JSX 推荐使用内联样式 */}
// <h4 style={mytyle}>JSX 推荐使用内联样式</h4>
// </div>
// )
// }
// }
// ReactDOM.render(
// <Nav name="Eva" age="18"/>,
// document.getElementById('example')
// )
{/* JSX 中插入数组 */}
// let arr = [
// <div>数组1</div>,
// <div>数组2</div>
// ]
// ReactDOM.render(
// <h4>{arr}</h4>,
// document.getElementById('example')
// )
{/* React State(状态) */}
// class App extends React.Component {
// constructor(props){
// super(props);
// this.state = {
// date : new Date()
// }
// // console.log('this.state.date: ', this.state.date);
// }
// // 生命周期的钩子函数（componentDidMount，componentWillUnmount）
// // 挂载
// componentDidMount(){
// this.timer = setInterval(() => this.navTick(), 1000)
// }
// // 销毁
// componentWillUnmount(){
// clearInterval(this.timer);
// }
// // 点击时间
// navTick(){
// // 在setState中重置数据
// this.setState({
// date : new Date()
// },() => {
// // 必须再回调函数里面打印，外层打印无效果
// // console.log('this.state.date: ', this.state.date);
// })
// }
// render(){
// return(
// <div>
// <h1>这是一段文字</h1>
// <h1>{this.state.date.toLocaleTimeString()}</h1>
// </div>
// )
// }
// }
// ReactDOM.render(
// <App/>,
// document.getElementById('example')
// )
{/* 事件处理 */}
// function Nav(){
// function navTick(e) { //e 是一个合成事件
// e.preventDefault();
// console.log('被触发');
// }
// return(
// <h3 onClick={navTick}>事件处理</h3>
// )
// }
// ReactDOM.render(
// <Nav/>,
// document.getElementById('example')
// )
{/* 切换开关状态的按钮： */}
// class Toggle extends React.Component{
// constructor(props){
// super(props);
// this.state = {
// toggles:true
// }
// // 这边绑定是必要的，这样 `this` 才能在回调函数中使用
// this.navToggle = this.navToggle.bind(this);
// }
// navToggle(){
// this.setState(prevState => ({
// toggles: !prevState.toggles
// }), ()=>{
// console.log(this.state.toggles);
// })
// }
// render(){
// return(
// <button onClick={this.navToggle}>{this.state.toggles ? 'open' : 'close'}</button>
// )
// }
// }
// ReactDOM.render(
// <Toggle/>,
// document.getElementById('example')
// )
{/* 向事件处理程序传递参数 */}
// class LoggingButton extends React.Component {
// constructor(props){
// super(props);
// this.state = {
// toggles:true,
// name:'Hello world!'
// }
// }
// // 这个语法确保了 `this` 绑定在 handleClick 中
// // 这里只是一个测试
// handleClick = () => {
// console.log('this is:', this); //this指向this.state
// }
// preventPop(name, e){ //事件对象e要放在最后
// e.preventDefault();
// alert(name);
// }
// render() {
// return (
// <div>
// <button onClick={this.handleClick}>
// Click me
// </button>
// <button onClick={(e) => this.handleClick(e)}>
// Click me
// </button>
// {/*向事件处理程序传递参数(两种方式是等价的。)*/}
// {/* 1.参数 e 作为 React 事件对象将会被作为第二个参数进行传递 */}
// <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
// {/* 2.通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面 */}
// <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
// {/* 通过 bind() 方法传递参数。 */}
// <a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
// </div>
// );
// }
// }
// ReactDOM.render(
// <LoggingButton/>,
// document.getElementById('example')
// )
</script>
<!--
1.推荐在 React 中使用 JSX 来描述用户界面。
例如：const element = <h1>用变量的形式创建</h1>; 既不是字符串也不是 HTML。它被称为 JSX， 一种 JavaScript 的语法扩展。
2.注释需要写在花括号中
3.在添加属性时，class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
-->
</body>
</html>
