正常操作，正常分析，大家好，我是D1N910。

在大约两年前，我购买了 腾讯课堂【NEXT】一线大厂 React 实践宝典 这门课。

​因为我一直基本上是使用Vue来进行前端页面的开发，但是一直没有时间去实践看完。

两年没去看了，真的很惭愧，时间，唉，过得真快啊。

为了在这门课过期之前看完，所以我要抓紧时间学完了。

本系列的专栏记录了我学习 一线大厂React实践宝典  的笔记。

下面的内容版权归属是  腾讯课堂【NEXT】一线大厂 React 实践宝典 这门课，当然，如果我微不足道的笔记也算是我自己的版权，那么也是有我的小小一份，你可以用来学习 React。但是如果你用来商业化盈利，请先获得  腾讯课堂【NEXT】一线大厂 React 实践宝典 制作方的许可。

BTW，作为挖坑狂魔，如果这篇专栏没有更新，那么当我没说过。

* 注意，在此之前，你需要安装好 node、npm，以下内容都是认为你已经安装好了。

课程引言

天下大势，分久必合，合久必分。

目前前端，就从主流框架而言，有 React、Vue、Angular，本系列主要讲述的是React。

首先从 React 的起源讲起。

React的起源

• Facebook 在假设 Instagram 的时候，发现原有MV*框架太难维护

• 工程师自己开发了一套专注展示层（ View ）的框架，并提出了 Flux 架构

• 表现优异，获得关注，2013 年 5 月开源

起源的契机，就是为了替代原有的 MV* 框架，用以构建中大型的项目，专注于视图层面。

React带来的变革

对于老师来说

• 2015-2015，探索 React 在业务中的可能性，PC 试验田

• 2016年，遇到和 FaceBook 一样的问题，项目庞杂难开发，进行全面 React 改造，项目可维护性大大提高

• 2017年，直接在浏览器端进行页面渲染的话，体验不是很好，所以主要页面采用 React 服务端渲染技术，为亿万级用户带来极致体验

• 2018，React 与 TypeScript 强强联合，结构更加清晰

用了 React，项目有了质的飞跃。

未来？

会更加便捷，在接下来的几年内都不会过时，无论什么时候学习都不算晚。

本小结 课程引言 END

React基本开发环境

搭建工程化React开发环境

第零部：搭建环境

为什么需要工程化开发环境

起初，我们的web开发比较简单，有一个功能加一个功能即可。

后来随着工程越来越复杂，参与的人越来越多。

需要一套工程化的开发方式，使得项目更加易于维护。

工程化是一套统一的流程、规范和开发方式，它可以对不同人之间的开发方式进行一个约束。

从而给项目开发管理和多人协作带来了很大的方便。

这很重要，所以学习 React 就要从工程化开发环境开始讲起，搭建起一套 React 工程化开发环境。

之后会在这个搭建好的 React 环境上进行学习。

搭建工程化 React 开发环境

工程化（过程可重复，自动化，适合大规模多人协作，可维护性好）

设计图纸；准备材料；制作零件；组装零件

非工程化（维护性差，缺乏标准流程，难以重复）

直接上手做；检查是否满足需求；修修补补直到满足需求

在工程化前端开发中

设计图纸 - npm init 生成或拷贝现成的package.json

准备材料 - npm install 安装依赖包

制作零件 - 开发各个代码模块

组装零件 - 配置并运行打包工具、编译工具等

第一步 设计图纸（生成package.json）

这里的图纸指的是 package.json。

可以用下面两种方式

（1）自己设计项目图纸 npm init

（2）套用现成的设计图纸 复制 package.json 到项目根目录

下面演示的是如何用 npm init 设计项目图纸。

创建一个空文件夹，名字我这里叫“d1n910-learn-react-init”

在这个空文件夹下，运行 npm init 命令，运行后，就会开始 package.json 这个文件的配置。

内容如下：

没问题的话，输入 yes 即可，随后我们能够看到生成的 package.json，后继我们可以通过这个文件，对我们的 React 项目进行包的管理。

第二步 准备材料（安装依赖包）

如何安装？

和刚刚生成 package.json 一样，也是有两种方法。

1、自己设计项目图纸

npm install --save xxx

npm install --save-dev xxx

npm install -g xxx

2、套用现成的设计图纸

npm install 依照现成的依赖列表安装

npm install --save 的作用是可以 安装并写入 运行依赖，我们不仅可以安装包，还可以把安装的包记录在刚刚的 package.json 文件中

npm install --save-dev 的作用是可以 安装并写入 开发依赖

依赖有两种：

（1）运行依赖 ，项目想要运行用的依赖

（2）开发依赖，开发这个项目时用到的依赖，和项目实际运行没有太大的关系，比如eslint

npm install -g

这个命名是全局安装，不会安装到当前根目录的 node_modules 下，而是安装到系统目录下，我们一般用来安装全局的命令行工具，比如 webpack。

第三步 安装需要的包

React 工程化开发环境构成：

webpack（包括各种 loader[加载器] 和 插件）

babel（包括各种preset，用来转换我们使用的高级js语法，用来编译成低版本浏览器能够执行的代码，这样解决兼容性问题）

less / sass （用来方便写前端 css 样式，这里只做使用，不做探讨，有兴趣的同学可以自己去查看相关内）

核心

react、

react-dom

配置如下

上面的内容 和我们刚刚说的 React 环境构成的关系是

less / sass 对应 "less": "^3.0.4",

react 对应 "react": "^16.4.0"

react-dom 对应 "react-dom": "^16.4.0"

因为它们是项目运行时要用到的，所以放到了 dependencies 里

babel、webpack 放到了 devDependencies 中

"babel": "^6.23.0",

"babel-core": "^6.26.3",

"babel-loader": "^7.1.4",

"babel-polyfill": "^6.26.0",

"babel-preset-env": "^1.7.0",

"babel-preset-react": "^6.24.1",

"css-loader": "^0.28.11",

"html-webpack-plugin": "^3.2.0",

"less-loader": "^4.1.0",

"style-loader": "^0.21.0",

"webpack": "^4.9.1",

"webpack-cli": "^2.1.4",

"webpack-dev-middleware": "^3.1.3",

"webpack-dev-server": "^3.1.4",

"webpack-hot-middleware": "^2.22.2"

第四步 组装零件（配置并运行打包工具、编译工具等）

包安装好后，都会放到一个叫 node_modules 的文件夹下，组装零件需要针对我们的零件写对应的内容。

babel 配置

babel 是用来将我们书写的 JavaScript 高级语法转换成 低版本浏览器能够执行的代码的工具。

在根目录下新建一个文件  .babelrc ，这文件用以存储 babel 的配置，我们可以写下面这个简单的配置，说明 babel 会对 es6 的语法和 react 的代码进行转换。

webpack 配置

webpack是一个很方便的打包工具，还可以开启开发时候的本地服务器，还可以支持代码热更新。

在项目的根目录下创建一个文件 webpack.config.js

内容如下

entry: {

path: path.join(__dirname, './src/index')

}

代表 webpack 将会从  './src/index' 开始加载，把它相关的模块像树一样一层一层加载进来。

output: {

path: path.join(__dirname, './dist'),

filename: '[name].min.js'

}

代表打包后输出的文件放到 './dist'  里，文件压缩的名称叫 xxx.min.js

代表打包文件将采用的规则。在我们的 src 文件下，一般只有 .js 和 .jsx 文件，所以正则表达式是 /\.jsx?$/，然后采用 babel-loader 来进行资源加载，其中我们不会管 /node_modules/ 下的内容（exClude），因为这些一般都是编译好的。

【小广告：什么？还不会正则表达式？快去看我之前的专栏啦】

然后我们要解析 .less 文件，这里的loader用感叹号的意思是，先是用 less-loader 转换，转换好后传给 css-loader 转换，然后传给 style-loader，然后再打包再一起。

plugins 表示我们现在安装的一些插件。这里用到的插件 HtmlWebpackPlugin 是可以把我们生成的js文件注入到 html 文件内。

第最后一步 尝试运行 webpack 打包命令

在开始试运行 webpack 之前，你需要现在你的工程中添加下面几个文件，你现在还不知道这几个文件的具体作用，不过下面马上就知道了。

根目录下新建 index.html 文件

内容

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover" />

<title>D1n910 learn React Demo</title>

</head>

<body>

<div id="app"></div>

   <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

   <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

</body>

</html>

src 文件夹下 新建 index.js 文件

在确定全局安装好了 webpack 和 webpack-cli 后，命令分别是 

npm install webpack -g 和 npm install webpack-cli -g

在命令行中执行

webpack 

可以发现最终 dist 文件夹下有我们要的文件，index.html 也有引入我们要打包进来的index.min.js 代码

执行后也能够正确得到结果

现在尝试把我们的 index.js 里的内容，写成 ES6 的箭头函数的写法

再次进行webpack构建，发现原来的箭头函数，已经被babel转换好了。

本小节 搭建React工程化开发环境 END

本小节Github 项目地址（所以后面除非特殊情况，不然我就不会贴一大堆代码啦）

https://github.com/D1N910/learn-react/tree/master/Chapter1/demo-1-basic-env

开始你的 React 之旅

首先我们用html实现一个 Hello React，可以看到下面的例子中是由 样式 + 内容 组成的 模版 。

这三个在 React 中怎么表示呢？

在 src文件夹下 新建一个 index.less

新建一个 index.js，为了使用 React，所以要写上对应的引入方法。

Hello 是定义的组件。ReactDom.render()是挂载方法，第一个参数是要挂载的组件，第二个参数是要挂载上去的对象。

在 package.json 文件的 scripts 添加一个启动本地服务器的命令

保存后，在命令行 （注意你的位置要在你的对应package.json的目录）中输入 npm start。

会有显示

 Project is running at http://localhost:8080/

其中后面的 http://localhost:8080/ 对应的是项目地址，在浏览器中打开即可查看效果。

打开控制台，也能够看到我们的代码正常跑动了。

现在来讲解下我们刚刚的代码

引入 babel-polyfill，可以转换高版本的代码，为了兼容性考虑。

引入 React 和 ReactDOM 对应在的代码。

不过为了我们的文件大小、节省带宽考虑，我们的 React 使用了 cdn 的引入方式。

所以我们可以在之前的webpack配置的外部扩展（externals）配置选项中排除这两个依赖。这样我们就不会直接把 React 和 ReactDOM 打包到我们项目中去了。

 本小节 开始你的 React 之旅 END

JSX 语法

什么是 JSX

jsx 语法类似 HTML 标签，可以让我们更好地定义 React 组件，让我们的代码结构更加清晰，能让我们很好很快上手 React。

JSX 语法

jsx 的 “ x ”  代表的是拓展的意思。

上一小节，我们使用了 return <h1>Hello React</h1>，其实就是使用了 JSX 了。而从JSX 到 HTML 概括来说，分下面三个步骤。

（1）JSX 提供类似于 HTML 标签的写法，方便开发者便携

（2）Babel 将 JSX 语法编译为 React 的API

（3）React 将 ReactAPI 中生成的组件渲染为 HTML 元素

先看 （1），现在将我们上一节的 return 的 JSX 改造一下

进过 （2）的 babel 的转换，会变成这样

上面是我自己打的，实际转换压缩后的代码如下

最后通过 （3）的React的执行，就完成转换到 HTMl 代码的部分。

JSX语法四大原则

1、最外层只能有一个标签包裹

    反例

     结合我们上面说的 babel 转换方法，如果我们这边写成了多个，那么会造成 babel 不知道如何转换的情况。

    两种解决方案：

    （1）使用一个标签包裹，比如 <div>

    （2） 在 React Fragment in v16.2 版本下，使用简便的版本 <> </> 进行包裹。不过这个

2、标签一定要闭合

    这个就不用解释了

3、没有子节点的标签可以写成自闭合的单标签

    比如 img 标签

4、属性使用小驼峰命名法

    比如我们绑定点击点击事件的属性是 onclick，在 React 中要写成 onClick；比如 class 属性应该使用 className 替代。（小驼峰的意思就是拼接单词，第一个单词首字母不大写，后面跟着的单词的首字母大写。对应的还有大驼峰，就是第一个单词的首字母也大写）

本小节仓库地址：https://github.com/D1N910/learn-react/tree/master/Chapter1/demo-3-jsx

混合 JavaScript 与 JSX

在之前我们已经能够用 JSX 写一些简单的静态页面，但是实际上我们遇到的会复杂得多。

首先来了解一下 React.createElement(type, [props], [...children])

  以 React.createElement('p', { color: 'red' }, 'This is my firest React app.') 为例

type（必填）： 'p' 代表 HTML 标签，或 React 组件类，或 React.Fragment

[props]（可选）：代表属性对象，可以为空对象

[children]（可选）： 'This is my firest React app.' ，就是子元素，可以为空，可以是 React 元素，可以是 React 元素数组。

上面这些都可以和 Javascript 语句混合使用，下面列举的常见的使用方法

React.createElement

传递的参数用 {} 包裹

props

利用一对花括号代表此处是一块 JS 代码，给 style 赋值一个 Object

children

这里我们构建了一个复杂类型，最后插入到children数组中。需要注意的是，元素插入参数，要保持使用一对花括号。

React7 下这种数组渲染需要带 key 以提高性能。如果不带，浏览器也会报错。

条件渲染

使用场景

场景一、满足某个条件才渲染，比如 VIP 用户展示特殊标记。

解决方案：使用 &&

场景二、 根据某个条件是否成立，渲染两种不同的元素，比如登录用户展示欢迎页，未登录用户展示登录提示

解决方案：使用三元运算符 ?:

场景三、更加复杂的条件，比如管理员，VIP 用户，普通用户展示不同界面

解决方案：声明变量，使用 if-else 判断并赋值

场景一

这时候，this.props.name 是 undefined的

给 UserInfo 组件传入 props 值 name，设置为 D1n910，结果就变成了 “欢迎 D1n910!”

场景二

使用 ?: 三元操作符，有传入name，name为真

去掉name，name 为假

场景三

定义更加复杂的内容。下面的 🌰 主要说的是判断用户身份。

传入为 admin 时

未传入时

循环渲染

使用场景

渲染一系列结构相同的元素，比如一个所有用户的列表

普通渲染列表

（1）构建数组型变量

（2）Array.map

这个函数方法本身和上面一样，会返回一个数组，这也是较为常用的渲染方法之一

打开控制台，会发现之前也有发现过的报错，这边的意思是希望我们给这种数组渲染的元素，有key值来进行区分。

这个 key 传入的是代表数据的唯一值，比如这边我们可以传入元素本身，现在我们就发现没有报错了。

本小节仓库地址 https://github.com/D1N910/learn-react/tree/master/Chapter1/demo-4-mix-jsx-with-react

本节结束，本节本身会有一个项目练习制作，叫 React 博客项目开发环境搭建，这边想要自己规划设计一个好上手的项目，就不放出来啦。大家现在可以尝试实践上面的内容，开始一个自己的小博客的搭建。

本文 END，未完待续，学习进度 2/9

五一还有 剩下两天半！ 加油加油