工程初始化

create-react-app todolist

cd todolist

yarn start

工程目录文件简介

src/index.js 入口文件

src/app.test.js 自动化测试

registerServiceWorker

PWA progressive web application

部署在https协议的服务器上

可实现客户端离线加载

public/manifest.json 可将应用存在桌面

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [ // 快捷方式图标
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": ".", // 打开的地址
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

react中的组件

自定义组件大写开头

_src/index.js_

import React from 'react'; // 需要引入
import ReactDOM from 'react-dom';
import App from './App';

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

reactDOM 将组件挂载在dom节点下

_src/app.js_

import React, { Component } from 'react'; // React需要引入
class App extends Component {
  render() {
    // JSX
    return (
      <div>
        hello
      </div>
    );
  }
}

export default App;

React需要引入，因为使用了JSX语法

render函数必须返回根节点

react 16开始， render支持返回数组

import React from 'react';

export default function () {
    return [
        <div>一步 01</div>,
        <div>一步 02</div>,
        <div>一步 03</div>,
        <div>一步 04</div>
    ];
}

React 16为我们提供了Fragments。
Fragments与Vue.js的

实现todoLIst的增加删除功能

handleBtnClick() {
this.setState({
  list: [...this.state.list, this.state.inputValue],
    inputValue: ''
  })
}

handleItemDelete(index) {
  // immutable
  // state 不允许我们做任何改变
  const list = [...this.state.list]; // 拷贝list
  list.splice(index, 1);
  this.setState({
    list: list
  })
}

JSX语法细节补充

JSX写注释

花括号里面是js代码

<div>
  {/* 多行注释 */}
  {
    // 单行注释，必须换行
   }
  <input
    value={this.state.inputValue}
    onChange={this.handleInputChange.bind(this)}
  />
  <button onClick={this.handleBtnClick.bind(this)}>提交</button>
</div>

用className替代class，避免与ES6 class关键字冲突

import './style.css'

<input
  className='input'
  value={this.state.inputValue}
  onChange={this.handleInputChange.bind(this)}
/>

dangerouslySetInnerHTML的使用

为了防止XSS攻击，在react中，通过富文本编辑器进行操作后的内容，会保留原有的标签样式，并不能正确展示。

在显示时，将内容写入__html对象中即可。具体如下：

<div dangerouslySetInnerHTML = {{ __html: checkMessages.details }} />

如果是直接调用接口中的值，则是以上的写法，如果是单纯的显示固定的内容，用如下的写法：

<div dangerouslySetInnerHTML={{ __html: '<div>123</div>' }} />

用htmlFor代替label标签的for

<div>
  <label htmlFor="inserArea">输入内容</label>
  <input
    id='inserArea'
  />
  <button onClick={this.handleBtnClick.bind(this)}>提交</button>
</div>

组件间通过props传值

// Todolist.js
return (
  <div key={index}>
    <ToDoItem
      content={item}
      index={index}
      deleteItem={this.handleItemDelete}
    />
</div>
)

// TodoItem.js
render() {
  const { content } = this.props;
  return (
    <div onClick={this.handleClick}>
      {content}
    </div>
  )
}

handleClick() {
  const { deleteItem, index } = this.props;
  deleteItem(index);
}