React入门（todoList实例）

ReactJS是由Facebook在2013年5月推出的一款JS前端开源框架，推出时主打特点是函数式编程风格。目前，ReactJS是世界上使用人数最多的前端框架，它拥有全球最健全的文档和社区体系。

对react我也是初学者，有错误的地方敬请指出

JSX简介

JSX就是Javascript和XML结合的一种格式。React发明了JSX，可以方便的利用HTML语法来创建虚拟DOM，当遇到<，JSX就当作HTML解析，遇到{就当JavaScript解析。

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

在 JSX 语法中，可以在大括号内放置任何有效的 JavaScript 表达式。例如，2 + 2，user.firstName 或 formatName(user) 都是有效的 JavaScript 表达式，注意不能使用语句

初始化项目

使用 npx create-react-app my-app创建新项目，生成的项目目录如下

|-- node_modules                     //模块文件夹，存放package.json中列出的依赖项
|-- public
|-- |-- favicon.ico                  //网站图标
|-- |-- index.html                   //入口页面
|-- |-- manifest.json                //应用的配置文件
|-- src
    |-- App.css                      // App组件的样式
    |-- App.js                       // App组件
    |-- App.test.js                  // App组件测试脚本
    |-- index.css                    // 公共样式
    |-- index.js                     // 程序入口文件
    |-- serviceWorker.js             // 为本地缓存提供服务
    |-- logo.svg                     // logo
|-- .gitignore                       // 上传至仓库时忽略的内容
|-- package-lock.json(yarn.lock)     // 版本管理使用的文件
|-- package.json                     // 项目基本信息,包依赖信息等
|-- README.md                        // 项目说明

新建TodoList组件

在src目录下新建一个TodoList.js文件，编写一个基础页面，包含一个输入框、一个按钮和一个列表

import React, { Component } from 'react';
class TodoList extends Component {
  render() {
    return (
      <div>
        <div>
          <input />
          <button>add</button>
        </div>
        <ul>
          <li>learn react</li>
          <li>learn vue</li>
        </ul>
      </div>
    );
  }
}
export default TodoList;

把入口文件index.js的组件换成TodoList组件

注意：

1. 组件名称必须以大写字母开头
2. 组件的最外层都需要有一个包裹

input响应式设计

数据定义

React不建议直接操作DOM元素，而是要通过数据进行驱动，改变界面中的效果。React会根据数据的变化，自动的帮助你完成界面的改变。
数据定义在TodoList组件中的构造函数里constructor

constructor(props) {
  super(props);
  this.state = { 
    inputValue: '', // 输入框内容
    list: [] // 列表
  };
}

数据绑定

把inputValue值绑定到input框中

<input value={this.state.inputValue} />

事件绑定

绑定响应事件，改变inputValue的值

<input value={this.state.inputValue} onChange={this.handleInput} />

在class里面创建handleInput方法

handleInput = (e) => {
  this.setState({
    inputValue: e.target.value
  })
}

注意：

1. 事件绑定要注意this的指向
2. 改变state的值要使用this.setState

添加功能实现

列表渲染

先将写死的列表转换为动态显示，用JavaScript语法循环在页面上
在state中为list添加数据

constructor(props) {
    super(props);
    this.state = { 
      inputValue: '', // 输入框内容
      list: ['learn react', 'learn vue'] // 列表
    };
  }

循环输出

<ul>
  {
    this.state.list.map((item, index) => {
      return <li key={index}>{item}</li>
    })
  }
</ul>

注意：

1. 循环的项目中需要添加key属性，key的值唯一

添加事件

在add按钮上绑定一个handleAdd的点击事件

<button onClick={this.handleAdd}>add</button>

实现handleAdd

handleAdd = () => {
  this.setState({
    list: [...this.state.list, this.state.inputValue] // ...为es6语法扩展运算符
  })
}

删除功能实现

在列表项中绑定一个点击事件handleDelete，并传递index值

<ul>
  {
    this.state.list.map((item, index) => {
      return <li key={index} onClick={() => this.handleDelete(index)}>{item}</li>
    })
  }
</ul>

实现handleDelete

handleDelete = (index) => {
  const list = this.state.slice()
  list.splice(index, 1)
  this.setState({
    list
  })
}

注意：

1. this.handleDelete 和 this.handleDelete() 的区别
2. React是禁止直接操作state的，不要直接修改list的值，先把list复制一个副本再进行操作（JS基本数据类型和引用数据类型的区别）

完整代码

TodoList.js

import React, { Component } from 'react';
class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      inputValue: '', // 输入框内容
      list: ['learn react', 'learn vue'] // 列表
    };
  }

  handleInput = (e) => {
    console.log(e.target.value)
    this.setState({
      inputValue: e.target.value
    })
  }

  handleAdd = () => {
    this.setState({
      list: [...this.state.list, this.state.inputValue]
    })
  }

  handleDelete = (index) => {
    const list = this.state.slice()
    list.splice(index, 1)
    this.setState({
      list
    })
  }

  render() {
    return (
      <div>
        <div>
          <input value={this.state.inputValue} onChange={this.handleInput} />
          <button onClick={this.handleAdd}>add</button>
        </div>
        <ul>
          {
            this.state.list.map((item, index) => {
              return <li key={index} onClick={() => this.handleDelete(index)}>{item}</li>
            })
          }
        </ul>
      </div>
    );
  }
}

export default TodoList;

完整代码及在线预览