用 React.js 写一个最简单的 To-do List 应用
最近在学 React.js,也写了一些练习的项目,之前参考网上的一些代码写了一个很简单的 to-do list。对于初学者来说,写个基本的 to-do list 对于理解 React 中的一些概念及语法倒是挺有帮助的。 现在很多的 React 项目中已经开始使用 ES6 来写了,不过因为我在学习 React 的时候看的教程大多都是用 ES5 写的,我这里还是用的还是更熟悉的 ES5 写法,虽然有点落伍了,但若想改成 ES6 版本倒也挺方便的。
文件目录在正式的生产项目中,使用 webpack 可以很方便地对我们的文件进行打包,这里因为程序比较简单,直接用 首先新建一个 再新建一个
<script type="text/babel" src="js/script.jsx"></script> 同时还需要一个 最后我们再建立一个 程序功能作为一个最简单的 to-do list,这个程序没有过多的功能。可以从 demo 里看出,它的功能如下:
作为一个示例程序,以上就是它的功能了。 组件结构我们可以使用 React 开发出各种组件(component),利用不同组件的功能来实现一个应用。我们这里创建的组件有: TodoBox -TodoList -TodoItem -TodoFooter -TodoForm
属性的传递React 的组件有两种不同的属性, 具体什么时候用
这里我们从代码来看看,属性是如何从父组件传递到子组件的。 每一条待办事项有这样的几个属性:
我们看看属性的传递过程。 首先在 data: [ {"id": "0001","task":"吃饭","complete": "false"},{"id": "0002","task":"睡觉","complete": "true"},... ]
<TodoList data={this.state.data} // 其他的属性及方法写在这里 /> 这样
var taskList = this.props.data.map(function(listItem) { return ( <TodoItem taskId={listItem.id} key={listItem.id} task={listItem.task} complete={listItem.complete} // 其他的属性及方法 ) },this); 在 函数的传递我们的程序中需要的函数有这几个:
在 React 的组件中传递方法与传递属性类似,现在 <TodoList toggleComplete={this.handleToggleComplete} // 其他的属性及方法写在这里 /> 这样你就可以在 程序的运行你可以下载 GitHub 上的项目文件,再用 python 开启一个 HTTP 服务器,就可以打开 http://localhost:8000/ 查看运行结果了。 git clone https://github.com/noiron/simplest-react-todolist.git cd simplest-react-todolist python -m SimpleHTTPServer // open a server with python 这篇博客里没有对整个项目所有的代码进行分析,更多内容还是直接看代码更清楚。
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |