很多课程一上来就给大家如何配置环境、怎么写 React.js 组件。但是本课程还是希望大家对问题的根源有一个更加深入的了解,其实很多的库、框架都是解决类似的问题。只有我们对这些库、框架解决的问题有深入的了解和思考以后,我们才能得心应手地使用它们,并且有新的框架出来也不会太过迷茫;因为其实它们解决都是同一个问题。

这两节课我们来探讨一下是什么样的问题导致了我们需要前端页面进行组件化,前端页面的组件化需要解决什么样的问题。后续课程我们再来看看 React.js 是怎么解决这些问题的。

所以这几节所讲的内容将和 React.js 的内容没有太大的关系,但是如果你能顺利了解这几节的内容,那么后面哪些对新手来说很复杂的概念对你来说就是非常自然的事。

一个简单的点赞功能

我们会从一个简单的点赞功能讲起。 假设现在我们需要实现一个点赞、取消点赞的功能。

如果你对前端稍微有一点了解,你就顺手拈来:

HTML:

  <body>
<div class='wrapper'>
<button class='like-btn'>
<span class='like-text'>点赞</span>
<span>

React.js 小书 Lesson2 - 前端组件化(一):从一个简单的例子讲起的更多相关文章

  1. React.js 小书 Lesson4 - 前端组件化(三):抽象出公共组件类

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson4 转载请注明出处,保留原文链接和作者信息. 为了让代码更灵活,可以写更多的组件,我们把这种模 ...

  2. React.js 小书 Lesson3 - 前端组件化(二):优化 DOM 操作

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson3 转载请注明出处,保留原文链接和作者信息. 看看上一节我们的代码,仔细留意一下 change ...

  3. React.js 小书 Lesson17 - 前端应用状态管理 —— 状态提升

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson17 转载请注明出处,保留原文链接和作者信息. 上一个评论功能的案例中,可能会有些同学会对一个 ...

  4. React.js 小书 Lesson11 - 配置组件的 props

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson11 转载请注明出处,保留原文链接和作者信息. 组件是相互独立.可复用的单元,一个组件可能在不 ...

  5. React.js 小书介绍

    React.js 小书 Github 关于作者 这是一本关于 React.js 的小书. 因为工作中一直在使用 React.js,也一直以来想总结一下自己关于 React.js 的一些知识.经验.于是 ...

  6. React.js 小书 Lesson24 - PropTypes 和组件参数验证

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson24 转载请注明出处,保留原文链接和作者信息. 我们来了到了一个非常尴尬的章节,很多初学的朋友 ...

  7. React.js 小书 Lesson22 - props.children 和容器类组件

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson22 转载请注明出处,保留原文链接和作者信息. 有一类组件,充当了容器的作用,它定义了一种外层 ...

  8. React.js 小书 Lesson20 - 更新阶段的组件生命周期

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson20 转载请注明出处,保留原文链接和作者信息. 从之前的章节我们了解到,组件的挂载指的是将组件 ...

  9. React.js 小书 Lesson19 - 挂载阶段的组件生命周期(二)

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson19 转载请注明出处,保留原文链接和作者信息. 这一节我们来讨论一下对于一个组件来说,cons ...

随机推荐

  1. BCP导入导出

  2. Dubbo接口测试方法及步骤

    1)打开soapUI,点击File--New project: 2)右键New REST service from URL,注:因为dubbo接口不像http接口一样有URL,所以这里的URL可以随便 ...

  3. MPI编程指南

    MPI编程指南 一.     MPI概述 1.1  MPI的发展史 MPI标准化涉及到大约60个国家的人们,他们主要来自于美国和欧洲的40个组织,这包括并行计算机的多数主要生产商,还有来自大学.政府实 ...

  4. loj #2007. 「SCOI2015」国旗计划

    #2007. 「SCOI2015」国旗计划   题目描述 A 国正在开展一项伟大的计划 —— 国旗计划.这项计划的内容是边防战士手举国旗环绕边境线奔袭一圈.这项计划需要多名边防战士以接力的形式共同完成 ...

  5. CF385C Bear and Prime Numbers 数学

    题意翻译 给你一串数列a.对于一个质数p,定义函数f(p)=a数列中能被p整除的数的个数.给出m组询问l,r,询问[l,r]区间内所有素数p的f(p)之和. 题目描述 Recently, the be ...

  6. [USACO09OPEN]牛的数字游戏Cow Digit Game 博弈

    题目描述 Bessie is playing a number game against Farmer John, and she wants you to help her achieve vict ...

  7. ubuntu下vnstat监控网卡流量

    vnstat使用 vnstat 是另一个可以用来监视带宽使用量的程序.它比ipac-ng更简单易用. vnstat的一个优点是它不是一个运行的守护程序,所以它几乎不占用内存.它由 cron 任务创建, ...

  8. AD属性常量类

    参考:http://www.selfadsi.org/user-attributes.htm namespace Common { /// <summary> /// AD中的属性,没有出 ...

  9. java mybatis学习一

    1.引入maven包 和 导入 sqljdbc包 <dependency> <groupId>org.apache.ibatis</groupId> <art ...

  10. XtraFinder

    About System Integrity Protection in OS X 10.11 Apple's article . System Integrity Protection blocks ...