Skip to main content

React + Antd

IOT平台的前端采用React框架，因此首先需要学习如何使用React。已经掌握React的同学可以跳过本课程。

官方资料​

React​

React 是一个用于构建用户界面的 JavaScript 库。你可以在以下资料文档中系统地学习 React。React 版本需要是 >=16.8.0。

React官方文档​

这是官方提供的React文档，是学习React的正规途径。从体验React的理念到深入使用API和Hooks等特性，初学者可以仅学习核心概念章节。

React Hook官方文档​

我们重点强调了React的Hook特性，请您着重学习React的Hook功能特性。使用Hook来开发React组件是IOT平台建议的组件开发方式。(PS: 未来React官方可能会剔除其他的组件开发方式，也就是基于Class的组件开发方式)

我们为什么建议使用 Hooks 来开发组件?​

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。它是React未来最主流的开发组件方式，同时Vue3也借鉴了Hook的实现方式。有关Hook的优势及给我们带来的好处，可以参考这篇文章我们为什么要拥抱React Hook。

Antd​

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

我们可以使用html和css来制作组件，但是现代浏览器应用中有很多常见的组件使用html+css无法直接开发出来，因此我们需要用到已经开发好的UI组件库，方便我们开发复杂的应用组件。React的UI组件库有很多，其中使用最广泛的是蚂蚁金服开发的Antd组件库。

Antd官方组件文档(v4版本)​

学习antd的途径非常简单，就是查看其官方组件文档。你不必熟记每个组件的使用方法和属性，只需要对组件库有整体的了解就行。在实际开发中，我们可以随时查看这个组件文档学习其组件的使用方法。

其他资料​

浅析React&Vue两大流行框架优缺点​

目前主流的UI框架只有Vue和React，该文章分析了两个框架的优缺点，可以通过框架的对比更加深入地理解React的设计思想。如果你有Vue的开发经验，强烈建议学习一下该文章，能够更顺利地转向React开发。

听说你还不懂React Hook？​

从Vue和React的对比中不难看出，Vue3的设计思路更多地借鉴了React Hook特性。可以说Hook是未来前端UI框架的主流设计方法，建议任何从事前端开发的人员都能够更深入地理解和使用Hook。这篇文章通俗易懂地讲解了Hook的由来和使用，是学习Hook的必读文章。

React Hook + TS 购物车实战​

这是一个实战型的Hook使用实例，可以帮助你更深入地理解和使用Hook，避免踩坑。

深入进阶​

如果你想了解React更深入的知识，建议学习以下文档

React技术揭秘​

这个链接深入解析了React的开发和演进原理，带领读者一点点分析React的源码。

深入 React Hook 系统的原理​

创建自己的React​

这是一个英文文档，以实例代码的方式一步步地打造一个自己的React框架，是深入理解React的最佳途径。

课程任务​

通过本章节的学习，你应该能够完成一个包含简单逻辑的React组件。请完成一个包含以下交互逻辑的组件，并在线运行你的组件。

任务目标​

  • 创建一个表单，包含一个数字输入框
  • 创建两个按钮：增加和减少
  • 一个数字显示的文本组件，初始显示数字可以由props传入，默认为0
  • 每隔一秒钟数字加1
  • 点击增加按钮：增加数字输入框中的数字，例如输入框中填写5，数字显示10，点击增加变为15；点击减少按钮为减少逻辑
  • 使用Hook方式实现
  • 使用ES6语法编写