上次我们介绍了React入门的Hello World程序,还搭建了一个简单的React运行环境,今天就来写一个TodoList程序,逐步学习React开发。
注意,下面的程序是基于上篇文章中的react-dev项目的,如果没有看过,大家可以移步至:React入门之HelloWorld及环境搭建
根据React的开发思想,一切皆为模块和复合组件,所以我们要做一个TodoList,首先要对这个功能进行分析,划分模块和创建组件,最后才开始实现业务逻辑。
我们的TodoList比较简单,只是列举了几条待办事项的名称和时间,所以我们就来简单划分一下模块吧:
|- TodoList
|- TodoItem
|- TodoItem
可以看到,TodoList相当于一个容器,里面可以放很多TodoItem组件,接下来,我们先来实现TodoList组件,让它简单地显示一行文字,JSX文件代码如下:
// main.jsx
var React = require('react');
var ReactDOM = require('react-dom');
var TodoList = React.createClass({
render: function() {
return (
<div className="todoList">
Your todo list goes here.
</div>
);
}
});
ReactDOM.render(
<TodoList/>,
document.getElementById('container')
);
上面的代码先使用React.createClass定义一个TodoList组件,然后在其render方法中定义HTML模板结构,可以看到,我们定义了一个div
标签,内容就显示一行文字,非常的简单。不过需要注意的是,React规定,必须使用className
关键字来定义元素样式的class,一方面class
和浏览器中的保留字冲突,另外这是React经过诸多方面的考量决定的。如果大家想立即探个究竟,具体原因请参考:Why do I have to use className instead of class in React
然后下面的一段代码中我们使用ReactDOM.render来将<TodoList/>
渲染到DOM中去。对应的HTML和CSS如下:
<body>
<div id="container"></div>
<script type="text/javascript" src="js/main.min.js"></script>
</body>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.todoList {