A preface

In the beginning, I started to learn Vue by writing todoList. In the same way, I started to learn React. I also wrote a simple todoList Demo by using React + ANTD to get familiar with the basic syntax and development process of React.

Two program functions

  • Displays the current task
  • Add or delete a task
  • Tasks can be marked as completed/unfinished

3 Creating a Project

  1. Download the Node. Js
  2. The installationThe React of scaffolding
    • npm i create-react-app -g If you have installed globally before, you can ignore the current operation
    • create-react-app todolist
    • cd todolist
    • npm i antd -S
    • npm start
  3. The localhost:3000 page is displayed. If the following information is displayed, the server is successfully started.

Four main body

  • 4.1 introduced sass
    • When vue-CLI scaffolding was used previously, only the sASS dependencies needed to be introduced. But in Grate-react-app, in addition to introducing sASS dependenciesnpm i sass-loader node-sass -SIn addition, additional configuration is required: innode_modules/react-scripts/config/webpapack.config.jsAt the end of the Module configuration item add:
    {
    test: '/\.scss$/', loaders: ['style-loader'.'scs-loader'.'sass-loader']}Copy the code
  • 4.2 Introducing the CSS modularity

    • CSS rules are global, and the style rules of any one component apply to the entire page.

    • So in Vue, to avoid global contamination of component styles, the framework gives us a scoped option.

      We can avoid style contamination between different components, but React does not have this option. React uses CSS modules to prevent global style contamination of different components.

    • In create-react-app, there is a built-in CSS Module configuration. CSS /. SCSS /. Less etc. Style files are modified into the module. The CSS /. The module. The SCSS /. The module. The less, and then in the JSX file using the import way to introduce it.

      import styled from './App.module.scss'
<div className={styled.wrapper}>
 </div>
Copy the code

    Review elements:

You can see that the generated class name is unique, just like the scoped principle in Vue.

  • 4.3 Function Code
import React, {Component, Fragment} from 'react';

import { Input, List , Checkbox } from 'antd'
import styled from './App.module.scss'


const {Search} = Input
class App extends Component {
  constructor (props) {
    super(props);
    this.state = {
      value: ' ',
      list: [
        {
          title: 'eat',
          id: 1,
          isCompleted: false
        },
        {
          title: 'sleep',
          id: 2,
          isCompleted: false
        },
        {
          title: 'Beat the beans',
          id: 3,
          isCompleted: true}}}]render () {
    return (
      <div className={styled.wrapper}>
        <h2>Todo-List</h2>
        <Search
          placeholder="Please enter the keyword ~~"
          enterButton="Add"
          size="large"
          allowClear
          value={this.state.value}
          onChange={this.handleChange}
          onPressEnter={this.handlePressEnter}
          onSearch={this.handleAdd}
        />
        <List
          bordered
          className={styled.gaosen}
          dataSource={this.state.list}
          renderItem={(item, index) => <List.Item className={styled['list-item']}>
              <Fragment>
                <Checkbox checked={item.isCompleted} onChange={this.handleCheckChange.bind(this,item.id)}></Checkbox>
                <span className={item.isCompleted ? styled['line-through'] : ' '}>{item.title}</span>
              </Fragment>
              <span style={{color:'red'}} onClick={this.handledelete.bind (this, item, index)}> Delete </span> </ list.item >} /> </div>); } handleCheckChange (id) {this.setState((prevState) => {console.log(prevState)return {
        list: prevState.list.map(todo => {
          if(todo.id === id) { todo.isCompleted = ! todo.isCompleted }returnTodo})})} handlePressEnter = () => {this.handleadd (this.state.value)} // change handleChange = (e) => { const value = e.target.value this.setState({ value }) } // delete handleDelete (item, index, e) {let newList = JSON.parse(JSON.stringify(this.state.list))
    newList.splice(index, 1)
    this.setState({
      list: newList
    })
  }
  // add
  handleAdd = (title) => {
    if(! title)return
    let copy = [...this.state.list, {title}]
    this.setState({
      list: copy,
      value: ' '}, () => {})}}export default App;

Copy the code
  • 4.4 Page Effect