First look at the rendering project address: git.coding.net/Weishengyan…

Renderings environment preparation:

To install Node, go to the official website to download and install the node, and then install the NPM package management tool

CSS tools include BULMA and SCSS

Lqzh. me/bulma-docs-…

Create a project

npx create-react-app my-app

Copy the code

NPX is a tool to help you execute files. It will automatically look for the executable file in the current dependency package, and if it can’t find it, it will look for it in the PATH. If still can’t find, will help you install!

cd my-app

npm start

Copy the code

Now the project is up and running!

Since bulMA and SCSS are needed, install bulMA and SCSS in the project directory


npm install bulma node-sass  --save
Copy the code

Add Bulma’s CSS to the index.html file in the project’s public directory

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css"></link>
Copy the code

Empty the SRC directory and create a TodoList folder with the contents of the index.js file:

import React from 'react';

import ReactDOM from 'react-dom';

import TodoList from './TodoList/TodoList';

ReactDOM.render(<TodoList />, document.getElementById('root'));
Copy the code

In the TodoList folder, create a new todolist. js file, todolist. SCSS file

The todolist. js file contains the following contents:

import React, { Component } from 'react'

class TodoList extends Component {

    render() {

        return (

        <div>TodoList</div>

        )

    }

}
Copy the code

export default TodoList

When you run it, you don’t get an error. It says “TodoList.”

Todolist.js basic architecture


import React, { Component, Fragment } from 'react'

import './TodoList.scss';

class TodoList extends Component {

  constructor (props) {

    super(props)

    this.state = {

      list: [],

      inputValue: ' '} handleInputChange = (e) => {this.setState({inputValue: e.target.value})} handleClickAdd = () => {if (this.state.inputValue === ' ') {

      console.log('Input error')

      return 0

    }

    this.setState({

      list: [...this.state.list,{

        content:this.state.inputValue,

        isEnd:false

      }],

      inputValue:' '

    })

    console.log(this.state.list)

  }

  render() {

      let EndNum = this.state.list.filter(item => item.isEnd === true)

      return (

        <Fragment>

          <div className='container ContentBox'>

            <section className="hero is-primary">

              <div className="hero-body">

                <div className="container">

                  <h1 className="title">

                    TodoList

                  </h1>

                </div>

              </div>

            </section>

            <div className="notification action">

              <input

                type="text"

                className="input is-primary"

                value={this.state.inputValue}

                onChange={this.handleInputChange}

              />

              <button className="button is-primary" onClick={this.handleClickAdd}>add</button>

            </div>

            <footer className="footer"> <p> Total :{this.state.list.length} things </p> <p> done :{EndNum. Length}</p> <p> not done: {this.state.list.length - EndNum.length}</p> </footer> </div> </Fragment> ) } }export default TodoList
Copy the code

(CSS styles can be copied in coding, but I won’t show them here)

The renderings look like this at this point, and you can print them out

Then we will add the child component to it by creating the todoitem.js file in the TodoList folder and importing the todolist.js file

Child components:

import React from 'react'

class TodoItem extends React.Component {

  render() {

    const {content,index,isEnd} = this.props

    return (

      <li className="content notification is-primary">

        <label className="checkbox">

        <input

          type="checkbox"

        />

            <span className="tag">{index + 1}</span>

            {content}

            <span

              className={isEnd ? 'tag is-info' : 'tag is-warning'}

            >

              {isEnd ? 'Done' : 'not done'}

            </span>

        </label>

      </li>

    )

  }

}

export default TodoItem
Copy the code

Add functions to the parent component


import TodoItem from './TodoItem'/ / child componentCopy the code

Add function

  getTodoItem() {// Get the child componentreturn this.state.list.map((item, index) => {

      return(<TodoItem key={index} content={item.content} isEnd={item.isend} index={index} />)})} render() <ul className="notification list">{this.getTodoItem()}</ul>

Copy the code

Insert position effect as follows:

rendering

Next we add the event parent component for each event to delete and modify state:

// The parent component passes parameters to the child component as properties // the child component receives parameters from the parent component via props handleDelete = (index) => {// Delete console.log(index) const list = [...this.state.list] list.splice(index, 1) this.setState({ list }) } handleIsEnd = (index) => { // isEndlet list = [...this.state.list]

    list = list.map((item,itemIndex) => {

      if(itemIndex === index) { item.isEnd = ! item.isEnd console.log(item) }return item

    })

    this.setState({

      list

    })

  }

  getTodoItem() {// Get the child componentreturn this.state.list.map((item, index) => {

      return (

        <TodoItem

          deleteItem={this.handleDelete}

          handleIsEnd={this.handleIsEnd}

          key={index}

          content={item.content}

          isEnd={item.isEnd}

          index={index}

        />

      )

    })

  }

Copy the code

Child components:

// If a child wants to communicate with its parent, The child calls the method passed by the parent handleDelete = () => {// delete const {deleteItem, Index} = this. Props deleteItem(index)} handleIsEnd = () => {// Whether to finish const {handleIsEnd, index} = this.props handleIsEnd(index) }Copy the code

Add the method to JSX

Insert position ok project completed ✅ hurry up and try it!