P03:React开发环境搭建

古城微笑少年丶 2023-10-06 20:43 10阅读 0赞

通过之前两篇文章的理论学习，本篇文章开始终于可以进入操作环节了，其实我呢早已经迫不及待了。

讲理论就像仿佛认识一个美女，缺点只能让你看，剩下啥都做不了一样。

了解我的小伙伴都知道，我一定不是这种性格。接下来就让我们一起动手，把React的开发环境搭建好。在搭建React开发环境前需要你安装 `Node`，如果你已经安装了可以省略这些步骤。

#### React16基础 ####

*  安装Node.js
 *  脚手架的安装
 *  创建第一个 React 项目

## 安装Node.js ##

使用React.js是可以用最原始的`<Script>`标签进行引入的，但是这实在是太`low`了，工作中也不会有这种形式进行引入。

所以在学习的时候，我们就采用脚手架形式的安装。

这就需要我们安装`Node.js`，用里边的`npm`来进行安装。

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

Node中文网址：nodejs.cn

需要你注意的是，一定要正确下载对应版本，版本下载错误，可是没有办法使用的哦。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网页，并正常显示图标后，说明我们的环境已经全部搭建完成了。

![在这里插入图片描述][cd48b718db18465e918f45403dfb3490.gif_pic_center]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

[cd48b718db18465e918f45403dfb3490.gif_pic_center]: https://img-blog.csdnimg.cn/cd48b718db18465e918f45403dfb3490.gif#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/664ee28d86fa4033b22806a0af8aeb84.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16