React脚手架搭建及创建React项目

绝地灬酷狼 2023-07-11 11:23 33阅读 0赞

### 一、Node.js 的诞生 ###

先来聊聊 Node.js 诞生的故事，了解一下它最早的定位，以及后来定位的变化。

Node.js 是2009的时候由大神 Ryan Dahl 开发的。Ryan 的本职工作是用 C++ 写服务器，后来他总结出一个经验，一个高性能服务器应该是满足“事件驱动，非阻塞 I/O”模型的。C++ 开发起来比较麻烦，于是 Ryan 就想找一种更高级的语言，以便快速开发。

可以说有两点促成了 Nodejs 的诞生。首先第一点，Ryan 发现 JS 语言本身的特点就是事件驱动并且是非阻塞 I/O 的，跟他的思路正是绝配。第二点，Chrome 的 JS 引擎，也就是 V8 引擎是开源的，而且性能特别棒。于是 Ryan 就基于 V8 开发了 Node.js ，注意 Node.js 听名字好像是个 JS 库，其实不是的，Node.js 是 C++ 开发的，到官网 [http://nodejs.org][http_nodejs.org] 可以看到

> Node.js 是一个基于 Chrome V8 引擎的 Javascript 运行环境

所以说 Node.js 不是库，是一个运行环境，或者说是一个 JS 语言解释器。

Node.js 最初的定位是提升 Ryan 自己的日常工作效率，也就是用来写服务器代码的，但是后来没有想到的是 Node.js 在前端领域却大放异彩。

先说几句 Node.js 在服务器端的发展。Node.js 的诞生带给人们的是个大大的惊喜，传统上 Web 开发者，前端用 JS 写，但是写服务器端代码的时候还必须用另外一种语言，类似 Ruby/Java/PHP 等。但是 Node.js 出现之后，JS 前后通吃了。如果去网上搜 Node.js 的资料，很多都是用 Node.js 去写服务器代码的。

但是，Node.js 今天也成为了 Web 前端开发必不可少的基础设施。注意，Web 前端的 JS 代码最终还是运行在浏览器中的，所以运行的时候，或者说在产品环境下，不依赖于 Node.js 。但是，Node.js 诞生以后，前端大爆发，类似 React/Vuejs 这样的前端框架的开发环境变得非常强大和负责，Node.js 是这些开发环境运行的基础。

这就是关于 Node.js 诞生，以及它如何从纯后端发展到前后通吃的故事。

**Nodejs 中运行 JS 代码**

接下来，演示一下 Nodejs 中如何运行 JS 代码。

以前 JS 只能运行在浏览器中，Node.js 出现之后，不管是服务器上，还是我们自己的的笔记本上，只要安装了 Node.js 就可以运行 JS 代码了。假设，咱们已经安装好了 Node.js ，那么进入命令行，

node

执行 node 命令，就可以进入 Node.js 的交互环境。

1 + 1

执行加法操作，回车，就可以看到代码正确执行了。Ctrl-D 可以退出这个交互环境。

但是更为常见的一种执行方式，是把把代码写入到一个文件中。

app.js

console.log("hello");

然后这样来在命令行中执行

node app.js

就可以看到 hello 被打印出来了，而这样过程跟浏览器没有一毛钱关系。

另外有一点是要特别注意的。Node.js 和浏览器是不同的环境，是有着很多细小的差异的。首先，二者各自包含的全局变量不同。document 对象是用来操作页面的，所以只有浏览器环境下才可以直接使用。但是如果是要放到 Node.js 环境下运行代码，就不要使用 document 。同样的道理，Node.js 中可以直接拿来使用的 http 对象，在浏览器环境下就没有。其次，Node.js 和浏览器对 ES6 新特性的支持程度也是不同的，这一点也要注意。

关于如何在 Node.js 环境下运行 JS 代码，我们就聊到这里。

### 二、npm是个啥 ###

[https://blog.csdn.net/qq\_37696120/article/details/80507178][https_blog.csdn.net_qq_37696120_article_details_80507178]

### 三、React脚手架：create-react-app ###

React 的环境搭建，是比较繁琐的，有很多的依赖：`react`、`react-dom`、`babel`、`webpack` ... 需要很多的前置知识，很容易让人从入门到放弃。

于是就诞生了 `脚手架` 这种东西，`create-react-app` 就是一个 React 的脚手架，用它可以很方便的就创建了整个 React 的环境搭建，它解决了所有的依赖问题。

越上层的建筑，越方便的工具，也说明了我们对底层的定制性越差。不过对于新手学习的同学，把应用的东西先做起来之后，有必要再去理解底层环境的东西，也是种不错的学习的路径。

### 四、node环境安装 ###

Node.js 安装包及源码下载地址为：[https://nodejs.org/en/download/][https_nodejs.org_en_download]。下载node完成后，npm也会自行下载完成。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzI2NDcy_size_16_color_FFFFFF_t_70][]

下载后，查看版本。说明下载成功

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzI2NDcy_size_16_color_FFFFFF_t_70 1][]

### 五、安装react脚手架 ###

安装好的npm的源默认是国外的源，会因为网络原因导致执行npm操作有延时，我们可以切换npm的源为淘宝的源镜像。

执行 npm config set registry https://registry.npm.taobao.org。切换完成后，可通过 npm config get registry 查看。

安装react脚手架，cmd执行

npm i -g create-react-app

### 六.创建项目 ###

安装好 node 和 react脚手架后就可以创建项目啦，cmd切换至指定路径，执行  create-react-app rproject (rproject为自定义项目名)，最后出现 happy hacking说明创建成功。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzI2NDcy_size_16_color_FFFFFF_t_70 2][]

### 七.启动项目 ###

在项目所在路径下cmd执行 npm start。启动后会自动打开浏览器

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzI2NDcy_size_16_color_FFFFFF_t_70 3][]

### 八、antd安装 ###

antd是蚂蚁金服推出的一款很棒的react  ui库

npm install antd --save

[http_nodejs.org]: https://link.zhihu.com/?target=http%3A//nodejs.org
[https_blog.csdn.net_qq_37696120_article_details_80507178]: https://blog.csdn.net/qq_37696120/article/details/80507178
[https_nodejs.org_en_download]: https://nodejs.org/en/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzI2NDcy_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200305144644237.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzI2NDcy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzI2NDcy_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200305145938559.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzI2NDcy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzI2NDcy_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200305161234708.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzI2NDcy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzI2NDcy_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2020030516230382.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzI2NDcy,size_16,color_FFFFFF,t_70