从零开始学ReactJS

前言

随著现代化网页（Modern WVeb）开发专业和复杂性的提升以及对用户体验越来越高的要求下，网页开发已从过去的 Web Develpoer 一夫当关，转向专业分工，更加细分成网页前端（Web Front End）、网页后端（Web Back End）等职位。此外，由于跨平台丶跨浏览器的需求日益增加，技术变化更迭快速，市场上对于前端工程师（Web Front End Engineer）的需求也与日俱增，前端工程的（Front End Engineering）所要面对的挑战也越来越多。

前端工程范畴

事实上，在目前的业界，前端工程的定位光谱非常广泛，有聚焦在网页设计（Web Design），也有专注在软件工程（Software Engineering）的部份，本书则是将前端工程定位在软件工程的范畴。而 HTML、CSS 和 JavaScript 是前端工程最重要的技术基础。过去一段时间，我们所认为的前端工程主要专注在浏览器平台，但现在的 Web 平台已经不再局限于桌面浏览器，而是必须面对更多的跨平台、跨浏览器的应用开发场景 ，其中包含∶

1.网页浏览 器（Web Browser），一般的网页应用程序开发

2.通过 CLI 指令去操作的 Headless 浏览器（Headless Application）。例如∶ phantomJS、CasperJS 等

3.运作在 WebView 浏览器核心（WebView Application）的应用。例如∶ Apache Cordova丶Electron丶NW.js 等行动丶桌面应用程序开发

4.原生应用程序（Native Application），通过 Web 技术撰写原生应用程序。例如∶ React Native丶Native Script 等

过去几年，前端开发就像经历了文艺复兴（Rinascimento）的年代，开始了各种框架丶套件百花齐放的时代。虽然现在有更多好用工具可以协助开发 ，但前端工程师似乎并没有变得比较轻松。以往若能妥善运用 jQuery 等函数库就可以应付大部分前端工程师的工作，但现在前端招聘广告上不仅要求精通 HTML、CSS 和 JavaScript，还要对于还要对于 Backbone丶Ember丶Angular丶React、Vue 等 JavaScript 框架或函数库有一定程度的了解。

在众多 JavaScript 框架或函数库中，React 是 Facebook推出的开源 JavaScript Library，它的出现让许多革新性的 Web 观念开始流行起来，例如∶Virtual DOM、 Web Component、更直觉的定义式 UI设计、更优雅地实现 Server Rendering等。接下来本书将通过介绍 React 生态系（ecosystem）带领读者入门 React 的世界，让读者可以从零开始慎的动手用 React 开发跨平台应用程序。

React 生态系（Ecosystem）入门简介

根据 React 官方网站 的说明∶ React 是一个专注于 UI（View）的 JavaScript 函数库（Library）。自从Facebook于 2013年开源 React 这个函数库后，相关的生态系开始蓬勃发展。事实上，通过学习 React 生态系（ecosystem）的过程中，可以让我们顺便学习现代化 Web 开发的重要观念（例如∶模块化、ES6+丶Webpack、 Babel丶ESLint丶函数式程序设计等），成为更好的开发者 。

ReactJS

ReactJS 是 Facebook 推出的 JavaScript 函数库，若以 MVC 框架来看，React 定位是在 View 的范畴。在 ReactJS 0.14 版之后，ReactJS 更把原先处理 DOM的部分独立出去（react-dom），让 ReactJS 核心更单纯，也更符合 React 所倡导的 Learn once，write everywhere 的理念。事实上，ReactJS 本身的 API 相对单纯，但由于整个生态系非常庞大，因此学习 React 却是一条漫长的道路。此外，当你想把 React 应用在你的应用程序时，你通常必须学习整个 React Stack 才能充分发挥 React 的最大优势。

JSX

事实上，JSX 并非一种全新的语言，而是一种语法糖（Syntatic Sugar），一种语法类似XML 的 ECMAScript 语法扩充。在 JSX 中 HTML 和组建这些元素标签的程序码有紧密的关系，这和过去我们强调 HTML、JavaScript 分离的观念有很大不同。当然，你可以选择不要在 React 使用 JSX，不过相信我，当你真正开始编写 React 元件（Component）时，你会很庆幸有 JSX 真好。

NPM

NPM（Node Package Manager）是 Node.js 下的主流包管理工具。在 NPM上有非常多的包，可以让你不用再重造轮子，更可以让你可以轻松用指令管理不同的包。由于 NPM 主要是基于 CommonJS的规范，通常必须搭配 Browserify 这样的工具才能在前端使用 NPM 的模块。然而因 NPM 是基于 Nested Dependency Tree，不同的包有可能会在引入依赖时会引入相同但不同版本的包，造成档案大小过大的情形。这和另一个包管理工具 Bower 专注在前端包且使用 Flat Dependency Tree （让使用者决定相依的包版本）是比较不同的地方。

ES6+

ES6+ 系指ES6（ES2015）和ES7 的联集，在 ES6+新的标准当中引入许多新的特性和功能，弥补了过去 JavaScript 被诟病的一些特性。由于未来 React 将以支持 ES6+ 为主，因此直接学习ES6+ 用法是相对好的选择，本书的所有范例也将会以 ES6+编写。

Babel

由于并非所有浏览器都支持ES6+语法，所以通过 Babel 这个 JavaScript 编译器（可以想成是翻译机）可以让你的ES6+ 、JSX 等程序码转换成浏览器可以看的懂得语法。通常会在数据夹的 root 位置加入 .babelrc 进行转译规则 preset 和引用外挂（plugin）的设定。

JavaScript 模块化开发

随著 Web 应用程序的复杂性提高，JavaScript 模块化开发已经成为必然的趋势，以下简单介绍 JavaScript 模块化的相关规范。事实上，在一开始没有官方定义的标准时出现了各种社群自行定义的规范和实践 。

1.CDN-Based

也就是最传统的 <script> 引入方式，然而使用这种方式虽然简单方便，但在开发实际中大型应用程序时会产生许多弊端 ∶

o 全局作用域容易造成变数污染和冲突

o 文件只能依照 <script> 顺序载入，不具弹性

o 在大型专案中各种资源和版本难以维护

o 必须由开发者自行判断模块和函数库之间的依赖关系

2. AMD

Asynchronous Module Definition 简称 AMD，为非同步载入模块的规范，其在定义时模块时即需定义依赖的模块。AMD 常用于浏览器端，其最著名的实践为 RequireJS基本格式 ∶

define(id?, dependencies?, factory);

3. CommonJS

CommonJS 规范是一种同步模块载入的规范。以 Node.js 其遵守 CommonJS规范，使用 require 进行模块同步载入，并通过

exports 、 module.exports 来输出模块。主要实现为 Node.js 服务器端的同步载入和浏览器端的 BrOWserify 。

4. CMD

CMD 全称为 Common Module Definition，其规范和 AMD 类似，但相对简洁，却又保持和 CommonJS 的兼容性。其最大特色为∶依赖就近，延迟执行。主要实现为∶ Sea.js。

5.UMD

Universal Module Definition 是为了要兼容 CommonJS 和 AMD所设计的规范，希望让模块能跨平台执行。

6. ES6 Module

ECMAScript6 的标准中定义了 JavaScript 的模块化方式，让 JavaScript 在开发大型复杂应用程序时上更为方便且易于管理，亦可以取代过去 AMD、 CommonJS 等规范，成为通用于浏览器端和服务器端的模块化解决方案。但目前浏览器和 Node 在 ES6 模块支持度还不完整，大部分情况需要通过 Babe转译器进行转译。

【下载地址】

链接: https://pan.baidu.com/s/11ikONzi5aN5dCcOBb2s6Dw

提取码: f1h7