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

 

一、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 可以看到

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

 

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

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

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

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

四、node环境安装

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

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

五、安装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说明创建成功。

七.启动项目

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

八、antd安装

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

npm install antd --save