// let list = [
//   <li>列表项-1</li>,
//   <li>列表项-2</li>,
//   <li>列表项-3</li>,
// ]

let list = data.map(item => {
  return <li>{item}</li>
})

ReactDOM.render(
  list,
  document.querySelector('#root')
)

let list = <ul>
    {data.map(item=><li>{item}</li>)}
</ul>;

ReactDOM.render(
  list,
  document.querySelector("#root")
);

import React from 'react'
import ReactDOM from 'react-dom'

/** 
 * 条件渲染
 * 逻辑与运算符 &&
 * 逻辑或运算符 &&
 * 三元运算符 ?:
**/
function is(num) {
  if(num>10) {
    return '大于10'
  }else {
    return '小于等于10'
  }
}

let list = <ul>
  <li>{true||'或运算'}</li>
  <li>{false||'或运算'}</li>
  <li>{true &&'与运算'}</li>
  <li>{false &&'与运算'}</li>
  <li>{is(14)}</li>
</ul>

ReactDOM.render(
  list,
  document.querySelector('#root')
)

import React from 'react'
import ReactDOM from 'react-dom'

/** 
 * 如果属性名称由多个单词组，从第二个单词开始首字母大写,
 *  style 接收的是一个对象
**/

let style = {
  width: '100px',
  height: '100px',
  background: 'red'
}

let view = <div
  className="box"
  style={style}
/>

ReactDOM.render(
  view,
  document.querySelector('#root')
)

import { Component } from 'react'
import ReactDOM from 'react-dom'

/*
  React组件，可以理解为一个状态机，当状态发生改变时，组件会更新状态产生不同的效果
  类组件：组件是一个类
  1、继承React.Component类
  2、必须有render()方法
*/

class Count extends Component {
  render() {
    return <div>
      <h1>1</h1>
    </div>
  }
}

ReactDOM.render(
  <Count />,
  document.querySelector('#root')
)

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

/*
  state: 
  1、在组件内，用来state属性来定义状态
  2、在React想要更新状态，必须调用组件的setState方法
  props
  1、父组件调用子组件时，可以将数据添加到子组件的属性上，
  2、在子组件中，可以通过props属性接受父组件传过来的属性
*/

class Count extends Component {
  state = {
    count: 1
  }
  render() {
    const { count } = this.state
    const { title } = this.props

    return <div>      
      <h1>{title}</h1>
      <p>当前件数：{count}</p>
      <button onClick={()=>{
        this.setState({
          count: count + 1
        })
      }} >递增</button>
    </div>
  }
}

class App extends Component {
  render() {
    return <Count title='app'/>
  }
}

ReactDOM.render(
  <App />,
  document.querySelector('#root')
)

  constructor(props) {
    super()
    console.log(this.props); // undefined
  }

  constructor(props) {
    super(props)
    console.log(this.props); // 对象
  }

class Count extends Component {
  state = {
    count: 1
  }
  render() {
    const {count} = this.state
    return <>
      <p>{count}</p>
      <button onClick={(e)=>{
        console.log(123, this, e.target); // this指向Count
      }}>点击</button>
      <button onClick={function(e){
        console.log(123, this, e.target); // this为undefined
      }}>点击1</button>
    </>
  }
}

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

/*
  事件
  1、react中的事件定义类似于js的行间事件
    - 行间事件：将JavaScript函数写到HTML元素中的执行事件
    - 箭头函数的this指向组件本身
    - function函数的this为undefined
  2、添加React事件，要注意从第二个单词开始的首字母要大写
  3、React 事件，是一个合成事件
    - 在 react的事件处理函数中，this指向默认为 undefined
    - 箭头函数没有this
  4、类组件中的constructor
    - constructor属性与构造函数中proptotype属性中的constructor是一样的，
    - 都是指向构造函数本身
    - constructor中的this指向类组件本身
*/

// 行间事件中this的指向问题
// class Count extends Component {
//   state = {
//     count: 1
//   }
//   render() {
//     const {count} = this.state
//     return <>
//       <p>{count}</p>
//       <button onClick={(e)=>{
//         console.log(123, this, e.target); // this指向Count
//       }}>点击</button>
//       <button onClick={function(e){
//         console.log(123, this, e.target); // this为undefined
//       }}>点击1</button>
//     </>
//   }
// }

// react事件
class Count extends Component {
  constructor(props) {
    super()
    this.state = {
      count: 1
    }
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick(e) {
    console.log(333, this, e.target); // this为undefined,必须要在constructor中进行初始化
    this.setState({
      count: 2
    })
  }
  clickHandler = (e) => {
    console.log(222, this, e.target); // this指向Count
    this.setState({
      count: this.state.count + 1
    })
  }
  render() {
    const { title } = this.props
    return <div>
      <h1>{title}</h1>
      <p>{this.state.count}</p>
      <button onClick={this.handleClick}>递增</button>
      <button onClick={this.clickHandler}>递增</button>
    </div>
  }
}

class App extends Component {
  render() {
    return <Count title="App"/>
  }
}

ReactDOM.render(
  <App />,
  document.querySelector('#root')
)

// react事件
class Count extends Component {
  state = {
    count: 1
  }
  clickHandler = (e) => {
    console.log(this);
    this.setState({
      count: this.state.count + 2
    })
  }
  render() {
    return <div>
      <h1>{this.props.title}</h1>
      <p>{this.state.count}</p>
      <button onClick={this.clickHandler}>递增</button>
    </div>
  }
}

class App extends Component {
  render() {
    return <Count title="App"/>
  }
}