【demo】使用React+Webpackt做一个简单的todolist
2017-04-02 10:59
826 查看
使用React实现一个简单的todolist,实现基本的增删功能
GitHub:https://github.com/heyue-99/todolist
初始化项目并创建一些基础文件
初始化项目之后,就需要安装所需要的库及其依赖。npm安装方式可以为开发环境或生产选择所安装的依赖。
安装完所需要的依赖之后,配置webpack。
webpack.config.js:
运行
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
加上style:
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>
相关文章推荐
- 基于React,Webpack和Antd的简单框架Demo
- webpack 打包一个简单react组件
- 如何使用webpack+react+redux从头搭建Todolist应用
- 使用React-route和Webpack快速构建一个react程序
- 【demo】React+Webpackt做一个微博发送表单
- 一个webpack,react,less,es6的DEMO
- webpack下react与echarts一起使用的简单示例
- 学习 webpack,并构建一个超简单的 demo
- 使用webpack搭建一个react项目
- 开始一个React项目(一)一个最简单的webpack配置
- React-Router+antd+webpack+babel的一个详细demo
- 使用React-route和Webpack快速构建一个react程序
- webpack 打包一个简单react组件
- 屏幕测试亮点,新买了一个显示器,使用web简单的测试下了亮点
- 屏幕测试亮点,新买了一个显示器,使用web简单的测试下了亮点
- tomcat配置及使用(环境变量设置及测试,一个简单的web应用实例)
- 轻量级web富文本框——wangEditor使用手册(2)——扩展一个“缩进”功能 demo
- 【转】 COCOS2D-X之使用CURL下载图片的一个简单Demo
- 使用Restlet创建一个简单的web service(Creating a simple web service with Restlet)
- [webservices开发]使用XFire开发一个简单的web服务