react新手demo——TodoList

react-todolist.gif

一： 写在文章开头

今天我们就使用 react 来实现一个简易版的 todolist ，我们可以使用这个 demo 进行 list 的增删改差，实际效果如上图所示。大家可以clone下来查看：react-todolist

这篇文章我们就不使用 redux，因为这个 demo 本身比较简单，不需要通过 redux 来管理我们的状态。

redux中也有非常有名的一句话叫做：

"如果你不知道是否需要 Redux，那就是不需要它。"

我们废话不多说，直接进入正题。

二：项目的目录结构

   .
   ├── app                              // 开发的文件夹，组件放在这个文件夹中
   │   ├── components                   // 项目的组件
   │   │   ├── App.js                   // 最外层包含下面组件的总组件
   │   │   ├── AppFooter.js             // App的三个筛选按钮的组件
   │   │   ├── AppForm.js               // 添加list的form
   │   │   ├── AppList.js               // 显示list数据的智能组件
   │   │   └── AppTodos.js              // 显示list的木偶组件
   ├── css                              // 放css文件的地方。
   │   ├── semantic.css                 // 我们的文件用到了semantic.css,
   ├── node_modules                     // 第三方的依赖
   ├── .babelrc                         // babel配置文件
   ├── .gitignore                       // git上传时忽略的文件
   ├── bundle.js                        // webpack build之后的文件
   ├── index.html                       // 项目的模版文件
   ├── main.js                          // 项目的入口文件
   ├── webpack.config.js                // webpack配置文件
   ├── README.md                        // readme文件
   └── package.json                     // 当前整一个项目的依赖

三：前期准备，安装依赖

1，首先我们新建一个todolist文件夹，根据我的目录结构建好相应的文件，如果大家嫌麻烦，大家可以clone我的项目，然后看着我的代码，我会一一进行说明的。package.json我们可以自己创建。

$ mkdir todolist
$ cd todolist

2，建立package.json文件

npm init

3，安装相应的依赖，我先解释一下这些依赖的作用

  • 首先安装Babel，Babel 是一个 JavaScript 编译器，他可以将es6或者es7的语法转化为浏览器能识别的javascript。

    npm install babel-cli babel-core --save-dev
  • 其次安装我们的主角，react

    npm install react react-dom --save-dev
  • 安装webpack，打包工具；和webpack-dev-server，用于来给我们开启一个服务的。 
    npm install webpack webpack-dev-server --save-dev
  • 安装loader打包，通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件。

    大家想了解更多的webpack的内容，可以参考webpack中文文档

    npm install css-loader babel-loader style-loader --save-dev

    然后我们在webpack.config.js中引用这些依赖，具体的格参数的意思，大家可以参考webpack各文档说明，我下面也会简单的注释一下。

    module.exports = {
  entry: ‘./main.js‘,                 // webpack打包的入口文件
  output: {
    filename: ‘./bundle.js‘           // 输出之后的文件名
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: ‘babel-loader‘         // babel的loader，jsx文件使用babel-loader处理
      }, {
        test: /\.css$/,
        exclude: /node_modules/,
        loader: ‘style!css‘              // css和styleloader，对css后缀的文件进行处理
      }
    ]
  },
  devtool: ‘cheap-source-map‘,
}
  • 同时要让我们的 babel 能在 react中生效，同时支持es6，我们需要安装下面的插件 
    npm install babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save-dev

    安装完依赖后，我们在.babelrc文件中引入这几个依赖

    {
  "presets": ["es2015","react",‘stage-0‘]
}
  • 其次为了当我们每次添加list的时候有一个唯一的id，我们使用uuid 
    npm install uuid --save-dev

    ?

四：组件的编写，是我们的页面能够显示出来

  • 编写模版文件index.html

    在这个模版文件里面，我们引入 semantic.css 文件，然后建立一个 id=app 的 <div> 为了我们后续的 react 操作。

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>react-todolist</title>
  <link rel="stylesheet" type="text/css" href="/css/semantic.css">
  <style>
      .active { color: red }
      .line{
          display: inline-block;
          border-bottom: 1px solid #222222;
          width:100px;
          position: absolute;
          left:0;
          top:7px;
      }
      .ui.comments .comment{
          padding:0;
          margin:2em 0 0;
      }
  </style>
</head>
<body>
  <div class="ui container" style="padding:30px;">
      <div id="app"></div>
  </div>

  <script src="./bundle.js"></script>
</body>
</html>
  • 编写入口文件main.js

    这边的data是我们的模拟数据，将其传入到<App/>组件，在子组件中可以通过props.data的方法获取 data。对于react的基础知识，大家可以参考来自一位react新手的react入门须知。

    import React from ‘react‘
import ReactDOM from ‘react-dom‘

import App from ‘./app/component/App‘

let data = [
 {id: 0, text: ‘天气不错哦!!!‘, complete: false},
 {id: 1, text: ‘天气不错哦!!!‘, complete: false},
 {id: 2, text: ‘出去玩啊!!!‘, complete: true},
]

ReactDOM.render(
  <App data={data}/>,
  document.getElementById(‘app‘)
)
  • 编写component里面的组件
    1. App.js

      这个组件我们可以认为是一个容器组件，我们会把AppForm、AppList、AppFooter放在这个组件中。

      import React from ‘react‘
import AppList from ‘./AppList.js‘
import AppForm from ‘./AppForm.js‘
import AppFooter from ‘./AppFooter.js‘

class App extends React.Component {
  state = {
      choosevalue : 1,
      data: this.props.data
  }

  render () {
    const { data } = this.state;
    return (
      <div className=‘ui comments‘>
        <h1>My Todo with React</h1>
        <div className=‘ui divider‘></div>
        <AppForm />
        <AppList data={data}/>
        <AppFooter />
      </div>
    )
  }
}

export default App;
    2. AppForm.js

      这个组件是我们添加 list 用的一个form 组件，其中下面的styles这个对象那个也是jsx中申明样式的一种方式，我们还可以使用className来添加样式名字。

      import React from ‘react‘;
import uuid from ‘uuid‘;

var styles = {
  ‘title‘: {
    width: 200,
    display: ‘inline-block‘,
    marginRight: 10,
    verticalAlign: ‘top‘
  }
}

class AppForm extends React.Component {
  render () {
    return (
      <form className=‘ui reply form‘>
        <div className=‘field‘ style={styles.title}>
          <input type=‘text‘ placeholder=‘TODO‘ ref=‘text‘ />
        </div>

        <button type=‘submit‘ className=‘ui blue button‘>
            添加
        </button>
      </form>
    )
  }
}

export default AppForm;
    3. AppList.js

      这个组件是我们在react中常说的智能组件，得到数据lists后通过 map 方法遍历数据，然后进行渲染。这里的map方法是用到了es6中的解构赋值，大家可以参考react新手必须懂得es6的基础知识，然后将值一一传递到子组件中去。

      import React from ‘react‘
import AppTodos from ‘./AppTodos‘

class AppList extends React.Component {
  render () {
    const a = this.props.data.map(({ id, text, complete }, index) => {
       return
           <AppTodos
               key={index}
               id={id}
               text={text}
               complete={complete}
             />
    })

    return (
      <div> { a } </div>
    )
  }
}

export default AppList;
    4. AppTodos.js

      这个组件是我们在react中常说的木偶组件，就是得到数据渲染组件。

      import React from ‘react‘

var styles = {
  ‘title‘: {
    paddingLeft: ‘20px‘,
    paddingRight: ‘50px‘,
    position: ‘relative‘
  },
  ‘delete‘: {
    marginLeft: ‘20px‘,
    marginRight: ‘50px‘
  }
}

class AppTodos extends React.Component {
  render () {
    return (
      <div className=‘comment‘>
        <div className=‘content‘>
          <span
               className=‘author‘
                style={styles.title}
          >
              {this.props.text}
              <span
                   className={this.props.complete ? ‘line‘ : ‘‘}
              />
          </span>
          <span className=‘author‘
                style={styles.title}>
                {this.props.complete ? ‘已完成‘ : ‘未完成‘}
          </span>
          <span className=‘author‘>{this.props.id}</span>
          <span className=‘ui blue button‘
                style={styles.delete} >
                删除
          </span>
        </div>
      </div>
    )
  }
}

export default AppTodos;
    5. AppFooter.js

      这个组件就是下面的三个按钮全部、未完成、已完成。

      import React from ‘react‘

var styles = {
  ‘title‘: {
    marginRight: 10,
    fontSize: 20
  },

  ‘top‘: {
    marginTop: 20
  }
}

class AppFooter extends React.Component {

  render () {
    return (
      <div>
        <h2 style={styles.top}>show</h2>
        <button
           type=‘submit‘
           style={styles.top}
           className=‘ui blue button‘
           value=‘1‘
           ref=‘all‘
         >
           全部
        </button>
        <button
           type=‘submit‘
           style={styles.top}
           className=‘ui blue button‘
           value=‘2‘
           ref=‘active‘
        >
           还未完成
        </button>
        <button
           type=‘submit‘
           style={styles.top}
           className=‘ui blue button‘
           value=‘3‘
           ref=‘complete‘
        >
           已完成
        </button>
      </div>
    )
  }
}

export default AppFooter;

    然后我们在命令行输入，会开启一个服务。

    npm run server

    ?

    打开浏览器，输入http://localhost:8080，可看到：

    react-demo_1.png

5，实现list的添加操作

  • 首先理一下流程

    首先在form输入待办事情，点击添加触发一个handleSubmit点击函数，但是我们的data是通过<App />组件来分发的，而list是组件AppList渲染的。这里涉及到了从子组件传递值给父组件，其实也很简单，就从父组件中传一个函数给子组件，子组件将值通过函数再传递出去，大家可以参考react父子组件间的交流。

  • 在组件App.js中，我们加入一个OnAddTodoItem函数，并传入到AppForm组件中，我们新建函数中将传进来的newItem通过concat()现在的data，然后更新state。 
      ...

  OnAddTodoItem (newItem) {
    let newdata = this.state.data.concat(newItem);
    this.setState({data : newdata});
  }

  render () {
    const { data } = this.state;
    return (
      <div className=‘ui comments‘>
        <h1>My Todo with React</h1>
        <div className=‘ui divider‘></div>
        <AppForm
          AddTodoItem={this.OnAddTodoItem.bind(this)} />
        <AppList
          data={data}/>
        <AppFooter />
      </div>
    )
  }
}

export default App;
  • 在组件AppForm.js中，我们加入一个handleSubmit函数，并在form表单添加一个onClick函数，将用户输入的数据，通过uuid生成的id、输入的text、以及是否完成false。通过函数传递给父组件。 
    ...

handleSubmit (event) {
    event.preventDefault()
    let text = this.refs.text.value

    if (!text.trim()) {
      alert("Input can‘t be null")
      return
    }

    let id = uuid();
    this.props.AddTodoItem({id,text,complete:false});
  }

  render () {
    return (
      <form
              className=‘ui reply form‘
              onSubmit={this.handleSubmit.bind(this)}>
        <div
          className=‘field‘
            style={styles.title}>
          <input type=‘text‘ placeholder=‘TODO‘ ref=‘text‘ />
        </div>
        <button type=‘submit‘ className=‘ui blue button‘>
            添加
        </button>
      </form>
    )
  }
}

export default AppForm;

    你可以看到如下效果：

    react-add2.gif

6，完成筛选功能

  • 首先里一下流程

    我们给下面的三个按钮设置了不同的value，1代表全部、2代表未完成、3代表已完成，然后我们根据相应的value，展示相应的list，给三个按钮分别加上handleAll、handleActive、handleComplete三个方法，在onClick时触发。

  • App.js

    添加一个加上choosevalue的state，默认为1，即全选，同时将其传入到<AppList/>中去，同时添加chooseValue的方法，然后传入到AppFooter组件中去。

    ...
state = {
      choosevalue : 1,
      data: this.props.data
}

ChooseValue (id) {
    this.setState({choosevalue:id});
}

...

<AppList
      data={this.state.data}
      choosevalue={this.state.choosevalue}
/>
<AppFooter
  SubmitChooseValue={this.ChooseValue.bind(this)}
/>
  • AppFooter.js 
    ...

handleAll () {
    let all = this.refs.all.value;
    this.props.SubmitChooseValue(all);
}

handleActive () {
    let active = this.refs.active.value;
    this.props.SubmitChooseValue(active);
}

handleComplete () {
    let complete = this.refs.complete.value
    this.props.SubmitChooseValue(complete);
}

render () {
    return (
      <div>
        <h2 style={styles.top}>show</h2>
        <button
          type=‘submit‘
          style={styles.top}
          className=‘ui blue button‘
          value=‘1‘
          ref=‘all‘
          onClick={this.handleAll.bind(this)}
        >
              全部
        </button>
        <button
          type=‘submit‘
          style={styles.top}
          className=‘ui blue button‘
          value=‘2‘
          ref=‘active‘
          onClick={this.handleActive.bind(this)}
        >
          还未完成
        </button>
        <button
          type=‘submit‘
          style={styles.top}
          className=‘ui blue button‘
          value=‘3‘
          ref=‘complete‘
          onClick={this.handleComplete.bind(this)}
        >
          已完成
        </button>
      </div>
    )
  }
}

export default AppFooter;
  • AppList.js

    根据value渲染相应的List

    ...

class AppList extends React.Component {
  render () {
    var value = this.props.choosevalue;

    const a = this.props.data.map(({ id, text, complete }, index) => {
      if (value == ‘1‘) {
          return  <AppTodos
                          key={index}
                          id={id}
                          text={text}
                          complete={complete}
                    />
      }

      if (value == ‘2‘ && complete === false) {
          return  <AppTodos
                          key={index}
                          id={id}
                          text={text}
                          complete={complete}
                    />
      }

      if (value == ‘3‘ && complete === true) {
          return  <AppTodos
                          key={index}
                          id={id}
                          text={text}
                          complete={complete}
                    />
      }
    })

    return (
      <div> { a } </div>
    )
  }
}

export default AppList;

    ?

你可以看到如下效果：

react-add3.gif

7，修改list状态和删除list的功能

  • 首先里一下流程

    修改list的状态，其实就是我们找到相应id的list，然后将其的complete改为true就可以了。

    删除list时，就是我们找到相应id的list，我们给他添加一个deleteFlag属性，在AppList渲染的时候，我门判断是否有deleteFlag来惊醒渲染。

  • App.js

    添加两个方法AllChangeComplete：改变状态；AllOnDeleteItem：删除list的方法。然后通过组件传入到相应的子组件。

    ...
  AllChangeComplete (id) {
    let newdata = this.state.data.map((item,index) => {
        if(item.id === id) {
          item.complete = !item.complete;
        }
        return item;
    })
    this.setState({data : newdata});
  }

  AllOnDeleteItem (id) {
    console.log(id);
    let newdata = this.state.data.map(function (item) {
      console.log(item);
      if (item.id == id) {
        item.deleteFlag = true
      }
      return item
    })
    this.setState({ data: newdata })
  }

...

<AppList
      data={this.state.data}
        choosevalue={this.state.choosevalue}
        ChangeCompleteTop={this.AllChangeComplete.bind(this)}
        DeleteItemTop={this.AllOnDeleteItem.bind(this)}
/>

...
  • AppList.js

    我们根据complete与deleteFlag来进行渲染。并在这个组件中，充当一个中间的过度组件，将AppTodos触发的函数传到App.js中去改变状态。

    ...

class AppList extends React.Component {
  SubmitDelete (id) {
    this.props.DeleteItemTop(id)
  }

  ChangeDone (id) {
    this.props.ChangeCompleteTop(id);
  }
  render () {
    var value = this.props.choosevalue;

    const a = this.props.data.map(({ id, text, complete }, index) => {
      if (value == ‘1‘ && deleteFlag !== true) {
          return  <AppTodos
                          key={index}
                          id={id}
                          text={text}
                          complete={complete}
                          ChangeCompleteItem={this.ChangeDone.bind(this)}                         DeleteItem={this.SubmitDelete.bind(this)}
                    />
      }

      if (value == ‘2‘ && complete === false && deleteFlag !== true) {
          return  <AppTodos
                          key={index}
                          id={id}
                          text={text}
                          complete={complete}
                          ChangeCompleteItem={this.ChangeDone.bind(this)}                         DeleteItem={this.SubmitDelete.bind(this)}
                    />
      }

      if (value == ‘3‘ && complete === true && deleteFlag !== true) {
          return  <AppTodos
                          key={index}
                          id={id}
                          text={text}
                          complete={complete}
                          ChangeCompleteItem={this.ChangeDone.bind(this)}                         DeleteItem={this.SubmitDelete.bind(this)}
                    />
      }
    })

    return (
      <div> { a } </div>
    )
  }
}

export default AppList;
  • AppTodos.js

    添加两个方法，handleChangeComplete和handleDelete。一个时更改状态，一个是删除。

    ...
handleChangeComplete () {
    let newComplete = this.props;
    this.props.ChangeCompleteItem(this.props.id);
}

handleDelete () {
    this.props.DeleteItem(this.props.id);
}

render () {
    return (
      <div className=‘comment‘>
        <div className=‘content‘>
          <span className=‘author‘
                style={styles.title}
                onClick={this.handleChangeComplete.bind(this)}>
              {this.props.text}
              <span className={this.props.complete ? ‘line‘ : ‘‘} />
          </span>
          <span className=‘author‘
                style={styles.title}>
                {this.props.complete ? ‘已完成‘ : ‘未完成‘}
          </span>
          <span className=‘author‘>{this.props.id}</span>
          <span className=‘ui blue button‘
                style={styles.delete}
                onClick={this.handleDelete.bind(this)}>
                删除
          </span>
        </div>
      </div>
    )
  }
}

export default AppTodos;

至此我们完成了所有的功能，如下图所示：

react-add4.gif

8，结语

我们这次没有借助任何的状态管理工具，如redux来做这个demo。因为大家做下来也能发现，其实我们这个demo的层级只有2层，所以我们可以通过props来进行父子间的通信。

但是其实我们也发现了，如果当组件的层级越来越多的时候，我们通过这样来进行父子间的通信就不方便了，在这个时候我们就需要用到redux或者mobx等等的状态管理工具。

其实这边的删除和修改list状态我都是在前端模拟处理的，在实际工作中我们都会通过接口去处理，然后根据返回值进行更改state。

希望这篇文章对大家有一点启发，有任何问题可以在简书里私信我哦！

来自一个奔跑在前端路上的前端小白。

9，参考资料

作者：darrell
链接：https://www.jianshu.com/p/211ecf8ed34e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

原文地址：https://www.cnblogs.com/pangguoming/p/12247875.html

时间： 2024-10-20 08:50:26

react新手demo——TodoList的相关文章

谈谈我对前端组件化中“组件”的理解，顺带写个Vue与React的demo

前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ...... 每个频道有独立的团队去维护这些代码,具体到某一个频道的话有会由数十个不等的页面组成,在各个页面开发过程中,会产生很多重复的功能,比如弹出层提示框,像这种纯粹非业务的UI,便成了我们所谓的UI组件,最初的前端组件也就仅仅指的是UI组件. 而由于移动端的兴起,前端页面的逻辑已经变得很重了,一个页面的

学习react入门demo的总结。

在github上找到react入门学习比较好的demo,下面是那个链接: https://github.com/ruanyf/react-demos 然后接下来是每个demo的学习笔记: demo1: <body> <div id="example"></div> <script type="text/jsx"> //jsx类型可html和javasript一起写,遇到 HTML 标签,就用 HTML 规则解析:遇到代

react综合案例-todolist、localstorage缓存数据

1.工具类storage.js var app ={ set(key,value){ localStorage.setItem(key,JSON.stringify(value)); }, get(key){ return JSON.parse(localStorage.getItem(key)); }, delete(key){ localStorage.removeItem(key); }, countFalseNum(key){ let count=new Number(0); let l

React 新手随笔

一.HTML 模板 使用 React 的网页源码,结构大致如下. <!DOCTYPE html> <html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.

react购物车demo

import React, { Component } from 'react'; import './App.css'; import {connect} from 'react-redux'; import {bindActionCreators} from 'redux'; import action from './shopcar/reduce/action' // ui 组件 只取数据 class App extends Component { constructor(props){

react hook的todolist

感觉好长时间没写博客一样,app.js代码 import React from 'react'; import { useState } from 'react'; function App() { const [input, setInput] = useState(''); // const [inputList, setInputList] = useState([]); // let submitData=()=>{ let arr=[] arr.push({ value:input }

react新手报错日记

问题1  Uncaught TypeError: Super expression must either be null or a function, not undefined 如果碰到这个问题不要去百度了,先狠狠的打自己一顿起,因为你是单词写错了,出现这个问题百分之99.99是因为单词写错了,反正我是把Component写成了Compontent 后续更新

React Native DEMO for Android

Demo1: 主要知识:navigator,fecth 地址:https://github.com/hongguangKim/ReactNativeDEMO1 Demo2: 主要知识:navigator,fecth,react-native-tab-navigator 地址:https://github.com/hongguangKim/ReactNativeDEMO2 Demo3: 主要知识:react-native-swiper,Animated 地址:https://github.com/

Todolist分别用React与Vue的实现与思考

源码查看: React 版的TodoList: React Todolist Vue 版的TodoList: Vue Todolist