前言

开始学习

欢迎来到《React 从入门到入坑到出门左转》。

本教程是从最简单的说起,让大家学会如何使用 react 框架,然后逐渐深入,结合 Ant Design 讲解如何开发多个复杂组件,多个复杂页面和实际生产的大型应用。

通过学习这么教程,希望帮助读者达到下面几个目标:

  • 掌握 React 技术栈
  • 掌握 Ant Design 组件库和周边工具
  • 了解互联网公司实际的前端开发模式和流程
  • 了解前端开发技术的实现原理
  • 提升实际开发能力和就业竞争力,能够承担真实业务

学习本教程,你最终会得到一个可以运行的示例项目,该项目所有代码可以在 https://github.com/ruizhengyun/react-umi-learn.git 中拿到。但是还是推荐你按照章节的顺序,一步一步地自己搭建出整个示例项目。

前置知识

学习这本教程之前,需要你了解前端开发的基本知识,理解网页的原理,会使用 HTML + CSS + JavaScript 写简单的网页。

教程会大量使用 JavaScript 最新语法标准 ES6,所以也需要了解 ES6。如果你对这方面不熟悉,也没有关系,后面在附录里面,准备了 ES6 语法简介,可以开始学习之前,先读一下这个附录。

另外,教程使用的是命令行开发,会用到 Node。你不需要对 Node 有很深的了解,但是需要会在命令行下执行 Node 脚本。所以,请确认你的开发环境已经安装了 Node。

React 介绍

React 是 Facebook 公司推出的一套前端开发框架,是目前全世界最流行的前端框架。它的核心理念是将网页应用看成一个组件构成的状态机(state machine),状态的变化导致了 UI 的变化。

React 是一个采用声明式,高效而且灵活的用来构建用户界面的一个较为简单的框架。本身的 API 并不多,但是要用好它,必须使用其他的配套工具,所以人们常说学习 React 并不是学习一个框架,而是学习一整套 React 技术栈。

Ant Design 介绍

https://ant.design

我们不是说好讲《React 从入门到入坑到出门左转》么,怎么又扯到 Ant Design 组件库了?我想说的是,学是为了用。出门左转就是为了用,而组件库就是实践。

Ant Design 是一个组件库。那么,组件(component)到底是什么东西?

如果你经常浏览各种网站,就会发现不管网页的主题是什么,通常都会使用一些重复出现的构件,比如日历、表格、表单、菜单、卡片、导航栏等等。这些构件的功能和外观都很类似,只是在一些细节的地方,根据需要做了定制。它们就叫做组件,一张完整的网页,可以看做是不同功能的组件的集合。

很早就有人设想,如果能够把常用的组件都封装好,提供给开发者,那么网页开发就会变得非常简单,只要把不同的组件像搭积木那样组合起来,就能做出一张网页。

但是,由于浏览器和 JavaScript 对组件的支持一直不完善,这个想法实行起来困难重重。很长一段时间,组件库几乎没有进展。

2014年,React 框架发布,为组件提出了一套可行的解决方案。从此,可以用于实际开发的组件库才变成了现实。

Ant Design 就是基于 React 实现的一套组件库。它是由蚂蚁金服体验技术部开发的,最早是在2015年发布的,到现在已经发布了三个大版本,目前一共封装了50多个组件。它在国内得到广泛使用,可能是使用量最大的 React 组件库,在国际上也有一定的知名度。

它的功能完备,使用简单。你会发现使用 Ant Design,可以很快做出一张网页,真的就像搭积木一样。

值得一提的是,Ant Design 不仅包括组件,也包括一套设计规范和理念。组件库可以看做是 Ant Design 设计规范的 React 实现。Ant Design 想要带给用户,不仅仅是功能,还包括漂亮的外观和良好的体验。

umi 介绍

https://umijs.org/zh/

React 组件使用的是 JSX 语法和很多新的 ES6 语法,浏览器不支持。另外,不同的组件脚本必须打包在一起,浏览器才能加载。

因此,React 应用有一个构建过程,将源码编译为生产环境代码。这个步骤对于新手来说是比较麻烦的,因为有很多配置的细节,而且包括很多重复的环节,每个项目都必须做一次,也是很烦人的。

因此,我们开发了一个工具 umi,封装了编译步骤,包括了很多开发时的有用工具。只要你写好 React 代码,接下来 umi 就会把它处理为生产代码。

umi 也是蚂蚁金服体验技术部推出的工具。本课程采用 umi 和 Ant Design 配套使用。

results matching ""

    No results matching ""