React入门学习-脚手架(二)

1

cnpm install create-react-app -g

1
2

create-react-app react-learn-1
cd react-learn-1

1
2

cd react-learn-1
yarn start

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

// import './App.css';

import React from "react";

class App extends React.Component{
  state = {
    val: '',
    li: []
  }

  handleChange = (event) => {
    this.setState({
      val: event.target.value
    })
  }

  handleAdd = () => {
    const { val, li } = this.state
    li.push(val)
    this.setState({
      li
    })
    console.log(this.state)
  }
  render(){
    const { val, li } = this.state

    return <div>
      <input type="text" value={val} onChange={this.handleChange} />
      <button onClick={this.handleAdd}>添加</button>
      <ul>
        {
          li.map((item, index)=>{
            return <li key={index}>{item}</li>
          })
        }
      </ul>
    </div>
  }
}

export default App;