React 最初的模样

1. 一个最基本的组件 js

let App = React.createElement('div', {
   className: 'red'
}, 1)

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

2. 一个最基本的class的组件 jsx

class App extends React.Component{
  constructor(){
    super()
  }
  render(){
    return (
      <div>
        1
      </div>
    )	
  }
}

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

3. 一个最基本的function组件   jsx

function App(){
  return (
    <div> 1</div>
  )
}

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

4. 父子组件，以及怎么向组件内传值（props）

class Box extends React.Component{
  constructor(props) {
    super(props)
    this.state = {
      number: 0
    }
  }
  add() {
    this.setState({
      number: this.state.number+1
    })
  }
  sub() {
    this.setState({
      number: this.state.number-1
    })
   }
  render() {
    return(
      <div>
        <h1>{this.props.title || '计数器'}</h1>
        <span className="red">{this.state.number}</span>
        <button onClick={this.add.bind(this)}>+</button>
        <button onClick={this.sub.bind(this)}>-</button>
      </div>
    )
  }
}

class App extends React.Component{
  constructor(){
    super()
  }
  render() {
    return(
      <div>
        <Box title="计数器一"/>
        <Box />
      </div>
    )
  }
}

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

5. 龟兔赛跑例子

  <style>
    *{margin:0;padding:0;box-sizing:border-box;}
    .title{
      display:flex;
      justify-content: space-around;
    }
    #root{
      padding: 30px;overflow: hidden;
      
    }
    .progress{
      border-bottom: 2px solid;margin-top: 20px;
    }
  </style>


function Timer(props) {
  return (<div> 
    {props.name}:
    <span style={{padding: '10px'}}>{props.time}</span>
  </div>)
}


class App extends React.Component{
  constructor() {
    super()
    let t0 = new Date();
    this.state = {
      startTime: t0.getTime(),
      time1: 0,
      time2: 0
    }
  }
  success1() {
    let endTime = new Date();
    this.setState({
      time1: endTime.getTime() - this.state.startTime
    })
  }
  success2() {
    let endTime = new Date();
    this.setState({
      time2:endTime.getTime() - this.state.startTime
    })
  }
  render() {
    return (
      <div>
        <div className="title">
          <Timer name="兔" time={this.state.time1}/> VS <Timer name="龟" time={this.state.time2}/>
        </div>
        <Progress name="兔" speed={10} success={this.success1.bind(this)}/>
        <Progress name="龟" speed={5} success={this.success2.bind(this)}/>
      </div>
    )
  }
}

class Progress extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      progress: 0
    }
    let timeId = window.setInterval(() => {
       let speed = this.props.speed || 10;
      this.setState({
        progress: speed + this.state.progress
      })
      if(this.state.progress >= 100) {
        window.clearInterval(timeId);
       
        if (typeof this.props.success === 'function') {
          this.props.success();
        }
        console.log(`${this.props.name}已经完成`)
      }
    }, 1000)
  }
  get pStyle() {
    return {
      transform: `translateX(${this.state.progress}%)`
    }
  }
  render() {
    return (
      <div className="progress">
        <h2 style={this.pStyle}>{this.props.name}</h2>
      </div>
    )
  }
}

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