转载请注明出处，未经同意，不可修改文章内容。
🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。
涉及面试题：
1. 什么是 React？
2. React 的主要特点是什么？
3. React 的优点是什么？
4. React 的局限性是什么？
5. 什么是 CRA 及其好处？
6. React 和 Angular 有什么不同？
7. 与 Vue.js 相比，React 有哪些优势？
[编号：react_01]
1 简介
1.1 React 初认识
React16 和之后的版本，我们称之为“React Fiber”，其性能和便捷度上都得到了大幅提升。在 React 的使用中，我们会看到全球范围内的开发者解决同一个问题时的不同方案。
所以，学习 React 可以让我们快速地了解前端技术在全球范围内的发展情况。
React 有很多相关的技术点：
- React JS：可以用 React 的语法来编写一些网页的交互效果；
- React Native：可以让我们借用 React 的语法来编写原生的 APP 应用；
- React VR / React 360：可以在 React 的语法基础上，去开发一些 VR / 全景应用。
本专栏，我们主要学习 React JS 部分。
React JS 是 Facebook 在 2013 年 5 月开源推出的一款前端框架，其带来了一种全新的“函数式”编程风格，是全球范围内使用人数最多的一款前端框架。它也拥有全球范围内最健全的文档和完善的社区。
1.2 React.js 🆚 Vue.js
-
React.js 相对于 Vue.js，其灵活性更大一些。所以在处理一些非常复杂的业务时，React.js 的技术方案会有更多的选择。而 Vue.js 提供了更丰富的 API，实现功能会更简单。但也因其 API 多，所以灵活性就有所限制。
-
所以，一般在复杂度高的项目上采用 React.js。而做一些面向用户端的、复杂度不是很高的项目时，用 Vue.js。
-
若你要问“具体该学哪款，该用哪款”？我只能说，都学学，哪款驾驭的好用哪款，团队项目需要哪款就用哪款。
2 React 开发环境准备
使用 React 编码，我们有两种方式：
-
❌（不推荐）使用
<script>标签引入.js文件来使用 React。这是比较古老的编码方式——如果我们的项目比较大，我们会对项目的 JS 文件进行拆分，然后页面上就需要通过<script>标签加载很多拆分出来的 JS 文件。这样的话，页面性能会很低，可维护性也很差。 -
✔️（推荐）使用“脚手架”工具来编码。
2.1 什么是“脚手架工具”？
“脚手架”实质上是前端开发过程中的一个辅助工具，它会自动帮我们构建一个大型项目的开发流程和目录。它允许我们以一定的方式去实现 JS 文件的相互引用，让我们更方便的对项目进行管理。
但是，我们在“脚手架”里边写的代码实际上并不能直接运行。我们需要“脚手架工具”帮我们做代码的“编译”，编译出来的代码才可以被浏览器识别、运行。
我们一般会使用 GRUNT、Gulp、Webpack 等工具来帮助我们编写“脚手架”，但这部分内容知识点很多、很杂，后边有机会我们专门用一系列的文章来讲解 Webpack。
仅对 React 学习而言，我们不必太过关心“脚手架工具”的底层实现，只需要知道如何使用即可。
用 React.js 产生的“脚手架工具”非常多，甚至有的公司内部都有自己定制的“脚手架工具”。在初学 React.js 的时候，我们推荐使用 React 官方提供的“脚手架工具”——Create-react-app。
由于是官方提供的“脚手架工具”，其“健壮性”无需怀疑。同时，它的使用很简单，可定制性很强，调试代码也非常方便。如果你没有非常深厚的 Webpack 配置功底，使你能够驾驭更复杂的“脚手架工具”的话，那么使用 Create-react-app 无疑是一个最佳的选择。
2.2 利用“脚手架工具”搭建项目开发目录
- 按图示打开 React 官网并操作：
- 然后，按文档提示依次输入命令行，并等待项目目录的自动创建：
cd Desktop
npx create-react-app jianshu-test
- 成功后，我们可以看到桌面上多出了一个
jianshu-test文件夹：
- 按照提示，依次输入命令行。“脚手架工具”会自动给我们打开
localhost:3000的网页，这也表示创建项目开发目录成功：
cd jianshu-test
npm start
祝好，qdywxs ♥ you！
