week09.md

第9周

第一个 ReactJS 应用

搭建实践环境

• 代码编辑器：Visual Studio Code
• 语言运行环境：Node.js
• 包管理器：npm
• 浏览器：Chrome

npm 的镜像设置

为了更快捷、稳定地完成实践，避免下载不稳定的情况发生，我们一般采用淘宝提供的 npm 镜像源。有两种配置方式可以选择。

直接修改 npm 默认 registry

npm config set registry https://registry.npm.taobao.org

使用 cnpm 命令替代 npm 命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

了解工具链

运行时环境：Node.js

Node.js 为我们提供了无需浏览器的 JavaScript 运行时环境，它的面世，彻底改变了 JavaScript 的地位。原先，JavaScript 只是一门服务于浏览器用户交互的“玩具语言”，而现在，它也可以操作文件I/O，甚至构建后端服务。

我们所使用的 Webpack、Babel 等工具都是用 JavaScript 编写的。

包管理器：npm

不要重复造轮子。

很多现代语言都将软件包管理作为生态构成中的重要一环。比如 Rust 的 cargo，默认与编译器一同发行。Python 中的 pip，是众多职业开发者提前下班的唯一希望。Julia 也将包管理作为语言的一个原生功能。

常用命令

• 在当前目录下新建一个 Node.JS 软件包
  npm init
• 安装 Node.JS 软件包
  npm install
  • -g 全域安装
  • --save 安装发布时依赖
  • --save-dev 安装开发时依赖

编译器：Babel

JavaScript 的新标准开始逐渐吸取现代编程语言的精华，大幅度改进了语法格式，写起来更一致、更简明、更高效。然而，并不是所有的运行时环境（包括老版本的浏览器、老版本的 Node.js 等）都能支持最新的 JS 语法标准。

Babel 可以将新标准编写的代码编译为兼容旧标准的代码，确保你永远可以以最新的 JS 语法标准编写代码。

打包器：Webpack

良好的软件工程实践告诉我们，我们最好不要把所有功能的实现都塞进一个源文件里。但是用户通过浏览器访问 JavaScript 应用时，我们又希望尽量减少不必要的 HTTP 请求。只要获知一个“入口”文件，Webpack 就能够自动分析依赖关系，并将需要的所有源代码打包成少量文件。

React

React 是由 Facebook 开发的一个编写用户界面的 JavaScript 库。其三大主要特色为

• 声明式　语义功能对应关系十分明确、直接
• 组件化　拆分、重用相对便捷
• 普适性　React Native 的存在，以及现有的 JS 跨平台应用方案（如 Electron），使得代码在不同平台上发布时所需进行的改动十分少。

React Router

传统的网站一般由多个网页构成，每一次点击链接，我们的浏览器都会向服务端请求链接所指向的 URL，获取相应的资源。

但近几年最为流行的单页应用（SPA），以及被视为下一代主流的渐进式 Web 应用（PWA）中，每一次 URL 的改变都不一定对应着一个请求，资源大多数时候已经在本地了，没有展现出来。

React Router 的核心部分是路由功能库，当截获到目标 URL 的请求时进行匹配，当开发网页应用时，一般使用与之配套的 react-router-dom，这个库为功能库提供了对应的 DOM 绑定。当 URL 改变时，Route 组件会改变对应渲染的内容，比如更改其组件等。

有一篇很到位的梳理文章：初探 React Router 4.0。

Redux

对于大型应用，一个小组件（比如按钮）的相应操作可能影响多个其他组件的内容。为了让错综复杂的触发关系便于梳理，Facebook 推出了 Flux 的概念（应用架构的概念），同时也推出了一个原版实现。

后来 Redux 被广泛认为是 Flux 概念的一个比原生实现更优的实现，也是目前使用最为广泛的实现。

当我们遇到组件间通信（除数据从父组件流向子组件外）时，我们一般都会采用 Flux 的流程。