脚手架搭建react环境

本文是用脚手架搭建 react 开发环境，完成一个留言板的 demo

1、安装脚手架

cnpm i create-react-app

2、创建项目

// 此过程可能花费较长时间，耐心等待即可
create-react-app myapp

在任何位置 project 文件夹，文件夹名字自拟
打开命令行或者终端创建项目即可

3、启动项目

一定要在项目文件夹下启动
此过程可能花费一点时间，请耐心等待

npm start
yarn start

4、精简项目

• 项目结构

- public 静态资源目录
- src
	- index.js
- .gitignore
- package.json

5、留言板Demo

1）index.js 入口文件示例代码

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

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

2）在 src/App.jsx 示例代码

import React, { Component } from 'react'
import './app.css'

class App extends Component {
  // 构造函数
  constructor() {
    super()

    // this.del3 = this.del3.bind(this)
  }

  state = {
    comment: {
      nikename: '',
      text: '',
      star: 0
    },
    textList: []
  }

  // 修改昵称
  changeName(e) {
    let temp = {...this.state.comment} // 准备备份
    temp.nikename = e.target.value
    this.setState({
      comment: temp
    })
    console.log(temp)
  }
  // 修改内容
  changeText(e) {
    let temp = {...this.state.comment} // 准备备份 
    temp.text = e.target.value 
    this.setState({
      comment: temp
    })
    console.log(temp)
  }
  
  // 提交按钮
  submit() {
    let temp = [...this.state.textList] 
    temp.push(this.state.comment)

    this.setState({
      textList: temp
    }, () => {
      // 提交成功，要将数据初始化
      this.setState({
        comment: {
          nikename: '',
          text: '',
          star: 0
        }
      })
    })
  }
  // 删除
  // del1(index) {
  //   let temp = [...this.state.textList]
  //   temp.splice(index, 1)
  //   this.setState({ // react 的双向绑定，用 this.setState() 函数
  //     textList: temp
  //   })
  // }
  // ==============================================================
  // del2 = (index) => {
  //   let temp = [...this.state.textList]
  //   temp.splice(index, 1)
  //   this.setState({ // react 的双向绑定，用 this.setState() 函数
  //     textList: temp
  //   })
  // }
  // ==============================================================
  // del3(index) {
  //   let temp = [...this.state.textList]
  //   temp.splice(index, 1)
  //   this.setState({ // react 的双向绑定，用 this.setState() 函数
  //     textList: temp
  //   })
  // }

  // 点赞
  handleStar(index) {
    let temp = [...this.state.textList]
    temp[index].star += 1
    this.setState({
      textList: temp
    })
  }

  render() {
    return (
      <div>
        <div className="content-inp">
          昵称：<input type="text" 
          				value={this.state.comment.nikename} 
                      	onChange={this.changeName.bind(this)}/>
          内容：<textarea onChange={this.changeText.bind(this)} 
                          value={this.state.comment.text}
                          cols="30" rows="10"></textarea>
          <button onClick={this.submit.bind(this)}>提交</button>
        </div>
        <hr />
        <ul>
          {this.state.textList.map((item, index) => {
            return (
              <li key={index}>
                <div>昵称：{item.nikename}</div>
                <div>简介：{item.text}</div>
                <div>
                  <button onClick={this.handleStar.bind(this, index)}>
                  		点赞({item.star})</button>
                  {/* 
                  	<button onClick={this.del1.bind(this, index)}>
                  	删除1</button> */}
                  {/* 
                  	<button onClick={this.del2.bind(index)}>
                  	删除2</button> */}
                  {/* 
                  	<button onClick={this.del3.bind(index)}>
                  	删除3</button> */}
                  <button onClick={
                    () => {
                      let temp = [...this.state.textList]
                      temp.splice(index, 1)
                      this.setState({
                        textList: temp
                      })
                    }
                  }>删除4</button>
                </div>
              </li>
            )
          })}
        </ul>
      </div>
    )
  }
}

export default App;

• app.css

.content-inp {
  display: flex;
  flex-direction: column;
  width: 200px;
}

总结：

1、react 双向绑定使用：this.setState()
2、react 中的响应数据在：state: { … }
3、react 中受控组件： onChange
4、获取value值，使用：e.target.value
5、组件：函数组件和类组件
函数组件和类组件的区别：
1）函数组件：无状态组件——不能触发视图更新
2）类组件：有状态组件——能触发视图更新

—————————————
“掐指一算，不管你听不听 ”