P03:React开发环境搭建

通过之前两篇文章的理论学习，本篇文章开始终于可以进入操作环节了，其实我呢早已经迫不及待了。讲理论就放佛认识一个美女，缺点只能让你看，剩下啥都做不了一样。了解我的小伙伴都知道，我一定不是这种性格。接下来就让我们一起动手，把 React 的开发环境搭建好。在搭建 React 开发环境前需要你安装 Node，如果你已经安装了可以省略这些步骤。

安装 Node.js

使用React.js是可以用最原始的<Script>标签进行引入的，但是这实在是太 low 了，工作中也不会有这种形式进行引入。所以在学习的时候，我们就采用脚手架形式的安装。这就需要我们安装Node.js，用里边的npm来进行安装。

安装 Node 只需要进入 Node 网站，进行响应版本的下载，然后进行双击安装就可以了。

Node 中文网址：nodejs (建议你在这里下载，速度会快很多)

需要你注意的是，一定要正确下载对应版本，版本下载错误，可是没有办法使用的哦。

Node.js 安装好以后，如果是 Windows 系统，可以使用 Win+R打开运行，然后输入cmd，打开终端（或者叫命令行工具）。

输入代码：

node -v

如果正确出现版本号，说明 Node 安装成功了，需要说明的是，你的版本号可能跟我文章中的有所不同，这无关紧要。

然后再输入代码:

npm -v

如果正确出现版本号，说明 npm 也是没问题的，这时候我们的Node.js安装就算完成了。

脚手架的安装

Node 安装好之后，你就可以使用 npm 命令来安装脚手架工具了，方法很简单，只要打开终端，然后输入下面的命令就可以了。

npm install -g create-react-app

create-react-app是 React 官方出的脚手架工具，其实有很多第三方的脚手架工具，也有很多优秀的。但是作为初学者为了减少踩坑，所以我们使用官方的脚手架。

创建第一个 React 项目

脚手架安装好以后，就可以创建项目了，我们在D 盘创建一个ReactDemo文件夹，然后进入这个文件夹，创建新的 React 项目。

D:  //进入 D 盘
mkdir ReactDemo  //创建 ReactDemo 文件夹
create-react-app demo01   //用脚手架创建 React 项目
cd demo01   //等创建完成后，进入项目目录
npm start   //预览项目，如果能正常打开，说明项目创建成功

其实这些操作只需要再终端中输入就可以了。等到浏览器可以打开 React 网页，并正常显示图标后，说明我们的环境已经全部搭建完成了。

总结

从本文开始码云笔记希望你能跟着我动手作一作，因为你不动手永远学不会。码云笔记没有任何别的目的，真心希望你可以学会。动手把环境搭建好，否则下节你就没办法练习了。