【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>