React入门实践之Todo List

最新推荐文章于 2024-06-12 11:18:35 发布

liuhe688

最新推荐文章于 2024-06-12 11:18:35 发布

阅读量4.1k

点赞数

分类专栏： Front End

本文链接：https://blog.csdn.net/liuhe688/article/details/51452892

版权

摘要由CSDN通过智能技术生成

上次我们介绍了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 {

最低0.47元/天解锁文章

liuhe688

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
React入门实践之Todo List

上次我们介绍了React入门的Hello World程序，还搭建了一个简单的React运行环境，今天就来写一个TodoList程序，逐步学习React开发。注意，下面的程序是基于上篇文章中的react-dev项目的，如果没有看过，大家可以移步至：React入门之HelloWorld及环境搭建根据React的开发思想，一切皆为模块和复合组件，所以我们要做一个TodoList，首先要对这个功能进
复制链接

扫一扫