1.Expanding Cards

成果如图所示:

源码
在线示例

React的函数组件中建设数据通信，咱们通常应用useState办法。它的应用形式采纳数组解构的形式，如下:

const [state,setState] = React.useState(false);//useState办法的参数能够是任意的JavaScript数据类型

解构的第一个参数是咱们定义并且拜访的数据状态，第二个参数则是当咱们须要变动数据状态时所调用的办法，其作用相似类组件中的this.setState。

更具体的应用形式参考文档 useState API。

2.与类组件相似的钩子函数，或者也能够了解为是函数组件的生命周期useEffect。它接管一个副作用函数effect作为参数，如下所示:

useEffect(() => {});//外面的箭头函数即副作用函数

以上示例只是做了一个简略的更换文档题目，事实上在这个副作用函数中，咱们能够做很多事件，详情参考文档 useEffect API。

3.React外部有本人的一套事件机制，咱们称之为合成事件。它与失常的JavaScript绑定事件很相似，然而它将事件命名形式采纳了驼峰式写法，并且它也对事件对象做了一层包装，其名为SyntheticEvent。留神，这是一种跨浏览器端的包装器，咱们如果想要应用原生的事件对象，能够应用nativeEvent属性，这在前面的示例中可能会波及到。比方咱们以上的事件绑定:

onClick={ onChangeHandler.bind(this,index) }

留神这里，咱们通常须要调用bind办法来将this绑定到该组件实例上，为什么要应用bind办法来绑定this呢，这是因为绑定事件的回调函数(如这里的:onChangeHandler),它是作为一个两头变量的，在调用该回调函数的时候this指向会失落，所以须要显示的绑定this,这也是受JavaScript本身个性所限度的。详情可参考React绑定this的起因中的解释。与之类似的是在类组件中绑定合成事件，咱们也一样须要显示的绑定this指向。

4.map办法的原理。map办法迭代一个数组，而后依据返回值来对数组项做解决，并返回解决后的数组,请留神该办法不会扭转原数组。比方:

[1,2,3].map(i => i <= 1);//返回[1]

jsx中渲染列表也正是利用了map办法的这一个性，并且咱们须要留神的是渲染列表的时候必须要指定一个key,这是为了不便DIFF算法更好的比对虚构DOM。

5.React中给标签增加类名，咱们是写成className的，这是因为class被JavaScript当做关键字。而如果咱们须要动静绑定类名，能够看到，咱们应用了模板字符串，在这里更像是写JavaScript，比方咱们能够利用三元表达式做判断。

6.React中给标签绑定style款式，咱们通常能够绑定一个对象，在React中，咱们绑定动态数据就是写一对{}花括号，而后style外面的款式咱们通常申明成对象来示意，比方:

{    background:"#fff"}

这代表它是一个款式对象，而后React会在外部去将款式对象转换成款式字符串，而后增加到DOM的style对象中。

2.Progress Steps

成果如图所示:

源码
在线示例

与第一个示例所用到的知识点很相似，相干的不用做阐明。接下来咱们来看不一样的。

父组件向子组件传递数据，咱们通常都是应用props。能够看到以上的示例，咱们裸露了4个props，即:

widthstepItemscurrentActive onClickItem

width就是设置步骤条的容器宽度，这个没什么可说的,stepItems就是步骤条的子组件，是一个数组，也能够在数组项中写jsx。而currentActive则是传入的以后是哪一步，是一个索引值，通常应该是数值。至于onClickItem则是子组件裸露给父组件的办法。

类组件的生命周期。在这个类组件当中，咱们应用到了constructor,componentDidMount,render的生命周期钩子函数。咱们能够依据语义来揣测，当一个类组件被初始化时所经验的生命周期钩子函数执行程序肯定是constructor => render => componentDidMount。从语义上来将constructor是一个构造函数，用于初始化状态，而后初始化实现之后，咱们就会渲染组件，而后才是筹备挂载组件。

额定的，咱们扩大一下，依据文档阐明，咱们能够晓得具体的生命周期。React组件生命周期蕴含3个阶段:

挂载 => 更新 => 卸载

在组件挂载之前执行的有:

constructor => static getDerivedStateFromProps => render => componentWillMount(行将过期) => componentDidMount

在组件state变更之后,也就是更新之后，执行的有:

static getDerivedStateFromProps => shouldComponentUpdate => render => getSnapshotBeforeUpdate => componentWillReceiveProps(行将过期) => componentWillUpdate(行将过期) => componentDidUpdate

在组件卸载之后，执行的有:

componentWillUnmount

另还有错误处理的生命周期，也就是在渲染过程，生命周期，或子组件的构造函数产生谬误时，会执行的钩子函数:

static getDerivedFromStateError => componentDidCatch

这外面有些生命周期咱们并没有用到，有些则是简直涵盖了咱们后续的所有示例，所以咱们肯定要牢记组件的生命周期的程序。

然而就这个示例而言，咱们学会的应该是如何封装一个组件。

3.Rotating Navigation Animation

成果如图所示:

源码
在线示例

一些雷同同后面示例雷同的知识点自不必说，咱们来看不一样的知识点。

1.模块组合导出

//components目录下的index.js文件export { default as Content } from './Content';export { default as LeftMenu } from './LeftMenu';export { default as NavList } from "./NavList";

能够看到，咱们能够将组件如下面那样导出，而后咱们就能够独自引入一个js文件，再引入相干的组件即可应用。如下:

import { Content, NavList, LeftMenu } from './components/index';

2.react组件如何渲染html字符串

react提供了一个dangerouslySetInnerHTML属性，这个属性的属性值是一个以__html作为属性，值是html字符串的对象，而后，咱们就能够将html字符串渲染成实在的DOM元素。如下所示:

<p dangerouslySetInnerHTML={{ __html:"<span>测试代码</span>" }}></p>//<p><span>测试代码</span></p>

4.hidden-search-widget

成果如图所示:

源码
在线示例

本示例同样的与后面的示例有一样的知识点，相干的不会做阐明，只会做不同的知识点介绍，后续的同理。

1.判断数据的类型。利用对象原型链上的toString办法，咱们能够失去一个字符串值，这个字符串值的格局相似[object Object]这样，也就是说咱们能够通过这个字符串值来判断一个数据的类型。例如:

const getType = v => Object.prototype.toString.call(v).slice(8,-1).toLowerCase();const isArray = v => getType(v) === "array";isArray([1,2,3]);//trueisArray("");//false

这里咱们应该晓得Object.prototype.toString.call(v)返回的就是相似[object Object]这样的值。所以咱们通过截取开始索引为8,完结索引为该字符串长度减1，也就是这里的-1,咱们就能够获取到第二个值Object,而后再调用toLowerCase()办法来将全副字母转换成小写，而后，咱们就能够晓得数据的类型了。比方这里的判断是否是数组，那么只须要判断该值是否等于"array"即可。

2.React.createRef API

有时候，咱们恰好须要操作一些原生DOM元素的API，例如这个示例的输入框的关注焦点事件。这时候这个API就有了用武之地，咱们相当于应用这个API创立一个与DOM元素通信的桥梁，通过这个拜访这个API的实例的current属性，咱们就能够拜访到相应的DOM元素。

更具体的能够参考文档createRef API。

3.如何封装一个input组件。

这个示例也教会了咱们如何封装一个input组件。

5.Blurry Loading

成果如图所示:

源码
在线示例

在componentDidMount生命周期中创立定时器以及在componentWillUnmount中革除定时器。
类组件中的this.setState更新状态。该办法接管2个参数,第一个参数则是咱们的react状态，它能够是一个函数，也能够是一个对象。第二个参数则是一个回调函数。谈到这里，可能就会提到一个问题，那就是setState到底是异步还是同步? 答案如下:

答:react中的setState在合成事件和钩子函数中是"异步"的，而在原生事件和setTimeout中则是同步的。

之所以是"异步"，并不代表在react外部中是"异步"代码实现的，事实上，它依然是同步执行的一个过程。

只是合成事件和钩子函数的调用程序在更新之前，导致在合成函数和钩子函数中没法立刻拿到更新后的值，所以就造成了所谓的"异步"。

事实上，咱们能够通过制订第二个参数即callback(回调函数)来获取到更新后的值。

react.js对setState的源码实现也不是很简单，它将传入的参数作为值增加到updater也就是更新器的一个定义好的队列（即:enqueueSetState）中。

react中的批量更新优化也是建设在合成事件和钩子函数(也就是"异步")之上的，在原生事件和setTimeout中则不会进行批量更新。

比方在"异步"中对同一个值进行屡次setState,根据批量更新则会对其进行策略笼罩，而如果是对不同的多个值setState,则会利用批量更新策略对其进行合并而后批量更新。

更具体的能够参考文档 setState 。

除此之外，这里也有一个十分重要的工具函数(这在js的实现中也提及过)，如下所示:

const scale = (n,inMin,inMax,outerMin,outerMax) => (n - inMin) * (outerMax - outerMin) / (inMax - inMin) + outerMin;

这个工具函数的作用就是将一个范畴数字映射到另一个数字范畴。比方说，将1 ~ 100的数字范畴映射到0 ~ 1之间。
详情。

6.Scroll Animation

成果如图所示:

源码
在线示例

1.动静组件

咱们通过props传递一个值用来确定组件名。这里以Title组件为例，如下所示:

import React from "react";const TitleComponent = (props) => {    let TagName = `h${ props.level }`;    return (        <React.Fragment>            <TagName>{ props.children }</TagName>        </React.Fragment>    )}export default TitleComponent;

尽管外围代码非常简略，这里须要留神，React组件须要首字母大写，这算是一个约定的规定，其次咱们通过props传递一个level用来确定咱们应用的是h1~h6哪个来做标签，事实上这里咱们应该对level做一个限度，只允许值为1~6。

2.Fragment元素

这个元素相似于一个占位符节点，咱们晓得，当两个元素并列在一个React组件中，是不被容许的，React组件须要提供一个根节点，但有时候，咱们不须要一个理论的元素作为根节点包裹它们，所以咱们就能够应用Fragment元素来包裹它们。该元素还有一个简写<></>,事实上在Vue2.x中也有这个限度，这是受虚构DOM DIFF算法所限度的。

更具体的能够见文档Fragment。

3.函数防抖

export const throttle = (fn, time = 1000) => {    let done = false;    return (...args) => {        if (!done) {            fn.call(this, ...args);            done = true;        }        setTimeout(() => {            done = false;        }, time)    }}

函数防抖与节流可参考这篇文章。

4.监听滚动事件，事实上这里的实现原理同JavaScript实现版本统一，只不过略微转换一下思维即可。

7. Split Landing Page

成果如图所示:

源码
在线示例

这个示例波及到的知识点后面的示例都提及过，所以这里不用赘述。

8.Form Wave

成果如图所示:

源码
在线示例

setState更新对象，如果state是一个对象，咱们有2种形式来更新。
1.1 利用Object.assign办法来更新。
1.2 间接笼罩整个对象。

以上2种形式伪代码如下:

//  第1种形式const loginInfo = Object.assign({},this.state.loginInfo,{   [key]:updateValue})this.setState({   loginInfo});// 第2种形式let { loginInfo } = this.state;loginInfo[key] = updateValue;this.setState({ loginInfo });

9.Sound Board

成果如图所示:

源码
在线示例

这个示例波及到的知识点后面的示例都提及过，所以这里不用赘述。

10. Dad Jokes

成果如图所示:

源码
在线示例

Suspense组件的应用。该组件能够指定一个加载指示器组件，用来实现组件的懒加载。更具体的文档见 Suspense 。
接口申请通常都是在componentDidMount钩子函数中实现的。因为不能间接在该钩子函数中更改状态(react.js会给出一个正告)。所以咱们须要让接口申请变成异步。

11. Event Keycodes

成果如图所示:

源码
在线示例

这个示例波及到的知识点后面的示例都提及过，所以这里不用赘述。

12. Faq Collapse

成果如图所示:

源码
在线示例

这个示例波及到的知识点后面的示例都提及过，所以这里不用赘述。

13. Random Choice Picker

成果如图所示:

源码
在线示例

这个示例波及到的知识点后面的示例都提及过，所以这里不用赘述。

14. Animated Navigation

成果如图所示:

源码
在线示例

这个示例波及到的知识点后面的示例都提及过，所以这里不用赘述。

15. Incrementing Counter

成果如图所示:

源码
在线示例

react.js如何更新数组的某一项？在这里我是更新整个数组的，或者这不是一种好的形式。也心愿有大佬能提供思路。我的代码如下:

startCounter() {    const counterList = [...this.state.counterList];    // https://stackoverflow.com/questions/29537299/react-how-to-update-state-item1-in-state-using-setstate    // https://stackoverflow.com/questions/26253351/correct-modification-of-state-arrays-in-react-js    counterList.forEach(counter => {      const updateCounter = () => {          const value = counter.value;          const increment = value / 100;          if (counter.initValue < value) {            counter.initValue = Math.ceil(counter.initValue + increment);            // use setTimeout or setInterval ?            counter.timer = setTimeout(updateCounter, 60);          } else {            counter.initValue = value;            clearTimeout(counter.timer);          }          // update the array,maybe it's not a best way,is there any other way?          this.setState({ counterList });      }      updateCounter();    })}

16. Drink Water

成果如图所示:

源码
在线示例

这里踩了一个坑，如果应用new Array().fill()来初始化状态，会导致意想不到的渲染成果。所以这里间接初始化了所有的数组项。

详见源码。

17. movie-app

成果如图所示:

源码
在线示例

这个示例波及到的知识点后面的示例都提及过，所以这里不用赘述。

18. background-slider

成果如图所示:

源码
在线示例

这个示例波及到的知识点后面的示例都提及过，所以这里不用赘述。

19. theme-clock

成果如图所示:

源码
在线示例

中英文切换是通过定义一个对象来实现的。其它的没什么好说的，都是后面提及过的知识点。

20. button-ripple-effect

成果如图所示:

源码
在线示例

能够通过调用函数来渲染一个组件。

21. drawing-app

成果如图所示:

源码
在线示例

在react.js中应用ew-color-picker。
这里踩了一个坑，也就是说必须要设置线条的款式。

this.ctx.lineCap = "round";

否则线条的款式不对劲，尽管我也没有搞清楚这外面的起因。毕竟js版本的实现也没有须要显示的设置这个线条的款式。

22. drag-n-drop

成果如图所示:

源码
在线示例

这里也踩了一个坑，详见源码正文。

23. content-placeholder

成果如图所示:

源码
在线示例

一些判断react组件的工具函数。如下:

import React from "react";export function isString(value){    return typeof value === "string";}export function isClassComponent(component) {    return typeof component === 'function' && !!component.prototype.isReactComponent;}export function isFunctionComponent(component) {    return typeof component === 'function' && String(component).indexOf('return React.createElement') > -1;}export function isReactComponent(component) {    return isClassComponent(component) || isFunctionComponent(component);}export function isElement(element) {    return React.isValidElement(element);}export function isDOMTypeElement(element) {    return isElement(element) && typeof element.type === 'string';}export function isCompositeTypeElement(element) {    return isElement(element) && typeof element.type === 'function';}

如何封装一个卡片组件。

24. kinetic-loader

成果如图所示:

源码
在线示例

这个示例波及到的知识点后面的示例都提及过，所以这里不用赘述。

25. sticky-navbar

成果如图所示:

源码
在线示例

这个示例波及到的知识点除了一个工具函数，其它的知识点后面的示例都提及过，所以这里不用赘述。

export function marked(template){    return template.replace(/.+?[\s]/g,v => `<p>${v}</p>`);}

这个工具函数的作用就是匹配以空格完结的任意字符，而后替换成p标签包裹这些内容。

26. double-slider

成果如图所示:

源码
在线示例

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

27. toast-notification

成果如图所示:

源码
在线示例

能够利用ReactDOM.render来封装一个函数调用的toast组件。
ReactDOM.unmountComponentAtNode API的用法这个办法会将从DOM中卸载组件，包含事件处理器和state。详见文档。
getDerivedStateFromProps 动态函数。详见文档。

28. github-profiles

成果如图所示:

源码
在线示例

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

29. double-click-heart

成果如图所示:

源码
在线示例

从合成事件对象中读取原生的事件对象。即nativeEvent属性。

30. auto-text-effect

成果如图所示:

源码
在线示例

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

31. password generator

成果如图所示:

源码
在线示例

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

32. good-cheap-fast

成果如图所示:

源码
在线示例

如何封装一个switch组件，即开关小组件。

33. notes-app

成果如图所示:

源码
在线示例

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

34. animated-countdown

成果如图所示:

源码
在线示例

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

35. image-carousel

成果如图所示:

源码
在线示例

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

36. hover board

成果如图所示:

源码
在线示例

react.js合成事件中的setState是同步的，所以这里应用原生的监听事件来实现。详见源码。

37. pokedex

成果如图所示:

源码
在线示例

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

38. mobile-tab-navigation

成果如图所示:

源码
在线示例

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

39. password-strength-background

成果如图所示:

源码
在线示例

照着文档一步步将tailwindcss增加到create-react-app脚手架中。

40. 3D-background-boxes

成果如图所示:

源码
在线示例

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

41. Verify Your Account

成果如图所示:

源码
在线示例

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

42. live-user-filter

成果如图所示:

源码
在线示例

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

43. feedback-ui-design

成果如图所示:

源码
在线示例

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

44. custom-range-slider

成果如图所示:

源码
在线示例

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

45. netflix-mobile-navigation

成果如图所示:

源码
在线示例

为如何实现一个递归组件提供了思路。

46. quiz-app

成果如图所示:

源码
在线示例

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

47. testimonial-box-switcher

成果如图所示:

源码
在线示例

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

48. random-image-feed

成果如图所示:

源码
在线示例

实现一个繁难版本的预览图片。

49. todo-list

成果如图所示:

源码
在线示例

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

50. insect-catch-game

成果如图所示:

源码
在线示例

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。