【demo】使用React+Webpackt做一个简单的todolist

使用React实现一个简单的todolist，实现基本的增删功能

GitHub：https://github.com/heyue-99/todolist

创建项目

创建的todo主要采用node包的方式，使用webpack打包

初始化项目并创建一些基础文件

初始化项目之后，就需要安装所需要的库及其依赖。npm安装方式可以为开发环境或生产选择所安装的依赖。

安装完所需要的依赖之后，配置webpack。

webpack.config.js:

var path = require("path");module.exports = {  entry: {    app: ["./app/app.js"]  },  output: {    path: path.resolve("./build"),    filename: "main.js"  },  module: {    loaders: [      {        test: /\.js$/,        exclude: /(node_modules|bower_components)/,        use: {          loader: 'babel-loader',          options: {            presets: ['env','react']          }        }      },      {        test: /\.css$/,        use: [ 'style-loader', 'css-loader' ]      },      {        test: /\.less$/,        use: [{                loader: "style-loader" // creates style nodes from JS strings              }, {                loader: "css-loader" // translates CSS into CommonJS              }, {                loader: "less-loader" // compiles Less to CSS              }]      }      ]}};

运行 webpack-dev-server启动webpack服务器，使用浏览器打开 http://127.0.0.1:8080就能看见。webpack-dev-server是为了监测前端文件的变化，以便实时编译打包前端文件。

todolist

整体分析

React最大的卖点是轻量组件化。如果要分组件的话，我们大约可以分成一个总组件和两个子组件。一个输入内容的组件，一个显示内容列表（带删除功能）的组件，外面再用一个总组件将两个子组件包括起来。

显示数据

既然是展示数据，首先要考虑数据存储在哪里，来自于哪里。React提倡所有的数据都是由父组件来管理，通过props的形式传递给子组件来处理。

做一个todolist页面需要一个父组件，两个子组件。父组件当然就是todolist的总指挥，两个子组件分别用来add和show、delete。

数据完全由父组件来管理和控制，子组件用来显示、操作数据，得经过父组件的批准，父组件通过props的形式将数据传递给子组件，子组件拿到父组件传递过来的数据，再进行展示。

另外，根据React开发的规范，组件内部的数据由state控制，外部对内部传递数据时使用 props 。这么看来，针对父组件来说，要存储todolist的数据，那就是内部信息（本身就是自己可控的资源，而不是『领导』控制的资源），用state来存储即可。而父组件要将todolist数据传递给子组件，对子组件来说，那就是传递进来的外部信息（是『领导』的资源，交付给你来处理），需要使用props。

新增数据

子组件得到数据后，就需要将新数据添加到todolist的数据中。而todolist的数据是由父组件来管理的，子组件不能说改就改呀，得申请父组件的允许和同意呀。因此，我们需要让父组件开放一个可以修改数据的接口，然后将这个接口作为props传递给子组件，让其能修改数据。

另外，子组件调用父组件的接口对todolist数据进行修改了之后，相当于修改了React对象的state数据，此时就会触发React的自动更新（就是通过virtual-dom对比，然后更新真实的dom那一套），React会将UI实时随着数据更新，就不用我们操心了，这也是React比较强大的地方之一。

删除数据

删除数据和新增数据，逻辑上是一样的，都是需要父组件提供一个修改数据的接口，通过props形式传递给子组件，然后让子组件来调用。

app.js

import React from "react";import ReactDOM from "react-dom";//import css from './style.css';require('./style.css')//TodoList组件是一个整体的组件，最终React也只渲染这个组件//TodoList组件是两个组件的集合var TodoList = React.createClass({getInitialState: function(){return{todolist:[]};},handleAdd: function(mes){this.setState({todolist: mes});},render: function(){return(<div><h2 className="top">react-todolist</h2><TypeNew add={this.handleAdd} todo={this.state.todolist} /><ListTodo todo={this.state.todolist} del={this.handleAdd} /></div>);}});var TypeNew = React.createClass({addContent: function(e){e.preventDefault();var tet = this.refs.content.value.trim();if(tet!=''){this.props.todo.push(tet);this.props.add(this.props.todo);}this.refs.content.value='';},render: function(){return(<form onSubmit={this.addContent} className="form"><input type="text" ref="content" placeHolder="请输入您的todolist" className="input" /><input type="submit" value="添加" className="add" /></form>);}});var ListTodo = React.createClass({delContent: function(e){var i = e.target.getAttribute("data-index");this.props.todo.splice(i,1);this.props.del(this.props.todo);},render: function(){return(<ul id="todo-list">{this.props.todo.map(function(mes,i){return(<li className="content"><label>{mes}</label><span className="del" onClick={this.delContent} data-index={i}>×</span></li>);}.bind(this))}</ul>);}});ReactDOM.render(<TodoList />,document.getElementById("example"));

加上style：

*{padding: 0;margin: 0;}body{background-color: #F5A22C;letter-spacing: 1px;}.top{text-align: center;margin-bottom: 20px;font-size: 26px;}.form{width: 430px;height: 50px;}.input{height:100%;width: 350px;border: none;font-size: 17px;padding-left: 10px;color: #8B8383;}.add{height: 100%;width: 60px;margin-left: 10px;background-color: #FB731F;border: none;color: white;font-size: 16px;}.add:hover{cursor: pointer;}.content{width: 420px;background-color: rgba(255,255,255,.3);margin-top: 20px;list-style: none;border-radius: 10px;padding-left: 10px;font-size: 17px;line-height: 60px;}.content .del{float: right;padding-right: 10px;color: #A19898;}.del:hover{cursor: pointer;}

index.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title></head><body><div id="example" style="width: 430px; margin: 100px auto;"></div><script type="text/javascript" src="/main.js"></script></body></html>