# 知识点 React 简介和环境搭建 node & npm 基本使用 React SPA 简单实践 --- # React 是什么？对前端有所了解的同学，想必都或多或少听到过 React 这个名字。 > React 是由 Facebook 公司发起的一个**开源前端框架**。 > - React 在诞生之初，就是对传统前端开发的一种颠覆。 > - 经过若干年的发展，React 已经成为了目前世界上最流行的前端框架，可能没有之一。 React 并不是像 `jQuery` 那样的 JavaScript 框架，也不是像 `Bootstrap` 那样的 UI 框架。 - React 是一套**基于组件化思想**的，使用 JavaScript 语言的，用来构建**前端交互式 UI 的框架**。 - 这样的说法听起来会有一些抽象，下面我们将从零开始，完成一个 React 测试页面的搭建，通过这个过程，相信大家会对 React 形成自己的理解。 **React，Vue.js 和 Angular.js** 是目前主流的三大前端框架。 - 很多互联网公司在招聘前端工程师时都会在招聘条件里写上要求掌握这三个框架当中的至少一种。 --- # 基于 node 的支撑环境在使用 React 之前，我们首先需要**安装基于 node 的支撑环境**。 - node 是一个**基于 Chrome JS 引擎的 JS 运行环境**， - node 可以用来做很多事情，包括**脚本开发，服务器端开发**等等在本教程中，我们只需要 node 作为一个**工具**。 - React 的开发工具大部分是基于 node 的。 - 在 node 的帮助下我们开发 React 应用会简单很多。 React 是一个**纯前端框架** - 实际上我们也可以直接在网页端引入**React 的 JS**，就像引用 jQuery 一样。 - 不过现在并不推荐这种方式了。**基于 node 的工具**要好用很多。 --- 打开终端，输入如下命令**查看 node 的版本**： ``` node --version v10.16.3 ``` > 注意：如果你使用的 node 版本高于 12，可能无法正常进行本实验。 > - 为顺利完成实验，请使用版本号小于等于 12 的 node。 --- # 安装 create-react-app 在安装好 node 环境之后，我们就可以通过 `npm` 来安装各种工具和依赖了。 - npm 全称是 node package manager，即 node 的包管理工具，它的地位类似于 Ubuntu 中的 apt-get。 - 后面很多地方我们都会使用 npm 来安装需要的包。在安装依赖之前，我们先把 npm 升级到最新版本，在终端中输入： ``` npm install -g npm ``` 等待脚本执行完成之后，使用 `npm --version` 查看 npm 的版本，本教程书写时，最新的 npm 版本是： ``` 6.14.8 ``` 然后我们使用 npm 安装 `create-react-app` > 它是 Facebook 官方的一个用来简化 React 开发的工具。在命令行中输入： ``` npm install -g create-react-app@4 ``` 等待安装完成之后，在命令行中输入 `create-react-app`， - 将看到它的简要帮助文档，说明工具已经成功安装上了。 ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1117915-20210429-1619664246504) --- # 创建 React 工程在工具准备完成之后，我们就可以使用它来创建我们的 React 工程了。进入 /home/shiyanlou/Code 目录，在终端中输入 `create-react-app cloud-disk-app`。 - 由于 npm 的限制，名字不能使用大写，命名惯例是**小写字母加分隔符**。 > 然后会经过一个有点长的等待过程，在这个过程中工具会创建好工程目录，把所有需要的依赖都下载下来。等待操作完成之后，进入工程目录 `cd cloud-disk-app` - 然后输入 `npm start`，等待一会儿，会看到类似下面这样的输出： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1117915-20210429-1619665356618) --- 到这里我们已经完成了一个 React 工程的初始化工作。 - 为了保证我们的环境一致，我们这里强行刷新一下使用的 React 的版本，在 `cloud-disk-app` 目录下，执行： ``` npm install --save react@17.0.1 react-dom@17.0.1 ``` 注意：所有 `npm install --save` 的操作，都应该在 `cloud-disk-app` 目录下 - 这个目录下的 `package.json` 文件存储着**本项目有关的依赖**。 - 这里 `--save` 参数的意义就是把**依赖添加到 package.json** 当中。 --- # 第一个 React 页面创建好的 React 项目 `cloud-disk-app` 的目录看起来是这样的 ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1117915-20210429-1619665553153) ``` - public - index.html - ... - src - App.js - App.css - index.js - index.css - ... - package.json - README.md ``` --- 主要的代码文件都存放在 `src` 目录里。 - 修改 src/App.js 文件： ``` import React, { Component } from 'react'; import './App.css'; class App extends Component { render() { return (

Hello React

); } } export default App; ``` 现在浏览器展示的页面已经变成了这样： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1117915-20210429-1619665698563) 这就是一个最简单的 React 页面。 > 对于 React 不了解的同学，可能会有一种蒙在鼓里的感觉。下面我们分析一下代码里做了些什么，以及 React 做了些什么。 1. 首先我们声明了一个名叫 `App` 的**类**，它**继承自 React 的 `Component` 类**。 - `Component`，即**组件**，是 React 当中最重要的概念，React 的页面都是**基于组件组织**的。 - 组件简单说就是一种**可以重用的 UI 部件**。 > 就像机械零件一样，React 开发就是通过**组装各种不同的组件**，最终完成**整个 App 的搭建**。 - 这个 App 就是我们的**根组件**，即**最外层的组件**。 --- 2. 所有的组件必须实现 `render` 方法，render 方法**返回的是这个组件的内容**。在 App 这个类的 render 方法当中，可以看到我们直接使用了**标准的 HTML 语法** - 书写了一个简单的

，这种 **JavaScript 和 HTML 结合**的写法，被称为 JSX。 - JSX 本质上是 JavaScript 语言的一种扩展，方便我们更容易地编写 React 组件。 - React 会把 JSX 编译成纯 JavaScript 代码，然后在浏览器中执行。熟悉 Java 的同学可能会联想到 JSP 和 Servlet 的关系。 > JSP 是使用标准的 HTML 语法加上 JSP 扩展进行编写，最后会编译成纯 Java 代码执行。 # 那 App 这个组件又是如何和最终出现的网页关联起来的呢？我们看到和 App.js 在同一级目录下，有一个 index.js，它看起来像是这样子： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1117915-20210429-1619665984060) - `ReactDOM.render` 顾名思义就是把一个 **React 组件渲染到一个 HTML 节点**上 - 这里渲染的是一个 **id 为 root 的节点** 那 root 又在哪里呢？ - 打开 public 目录下的 `index.html，在这个 HTML 中你可以找到真正的 root 节点。它是一个空节点，它的所有内容都将由 React 渲染： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1117915-20210429-1619666088594) ```

``` 现在整个 React 页面的流程渲染终于真相大白了。 - 在我们修改代码的时候，`React Development Server` 监控到代码的改动，将我们写的 JSX 代码编译成 JS 代码 - 然后通过 **HTML 当中的 root 节点**，使用 **JS 渲染到网页**中 - 最终呈现到浏览器里。实际上 React 内部做的事情非常多，这里我们只是简单的介绍了一下它的流程。 - 最终生成的网页中，root 节点仍然是空的，同时可以看到引入了一个 `bundle.js` 文件： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1117915-20210429-1619666234544) 这个文件就是 React 将我们的代码经过一系列**处理完成之后的最终结果** - 这个文件非常大，里面的内容我们也不需要关心。大家只需要对 React 的基本原理和流程有所了解就可以了

“基于 React + Flask 打造私人专属网盘”实验报告