React框架：2、如何搭建React开发环境？

声明：本教程不收取任何费用，欢迎转载，尊重作者劳动成果，不得用于商业用途，侵权必究！！！

目录

一、简介

​1、安装 node.js环境

2、npm命令

安装官方脚手架

创建工程

进入工程目录

启动工程

二、实战操作

1、安装官方脚手架

安装后报错：

2、创建工程

（1）create-react-app my-app命令

（2）切换到mac的指定目录

（3）在目录下创建工程my-app-yyh

（4）scripts里面是要用到的命令

3、进入工程目录

4、启动工程

三、使用cnpm、nvm的情况【快速搭建环境模板】

---

一、简介

先来张成功的效果图：

1、安装 node.js环境

前提是电脑已经安装最新版的node.js环境，可以去官网下载最新的环境。

 可参考博文：Node.js的安装

 

2、npm命令

安装官方脚手架

npm install -g create-react-app

创建工程

create-react-app my-app

进入工程目录

cd my-app

启动工程

npm start

 

二、实战操作

1、安装官方脚手架

npm install -g create-react-app

这个是React官方提供的脚手架，安装可能需要花一些时间。   -g代表全局安装

安装后报错：

checkPermissions Missing write access to /usr/local/lib/node_modules

那是因为文件没有root权限,运行语句前面加上sudo

即：sudo npm install -g create-react-app

这时候让你输入密码，密码不会显示，直接enter就行了

安装结果如下图：

 

2、创建工程

（1）create-react-app my-app命令

my-app是工程的名字

创建工程的时候，会下载一些 node models组件，所以会花一些时间。

由于它的网站需要连接国外的vpn服务器，所以有可能失败。重试几次就好啦，这个大家不用担心。 

（2）切换到mac的指定目录

cd /Users/luminal/Documents/LuminalCode/Luminal_Web_H5/ReactProject

（3）在目录下创建工程my-app-yyh

create-react-app my-app-yyh

然后你可以在

/Users/luminal/Documents/LuminalCode/Luminal_Web_H5/ReactProject 目录下，

看到my-app-yyh文件夹，这就是创建后的工程

创建工程以后打开看看

package.json是Node JS的配置文件，是我们所有的命令以及它安装的组件

（4）scripts里面是要用到的命令

start 启动

build 打包操作，上线之前build才能绑定到我们的服务器上

test  单元测试

eject 是为了弹出我们的配置信息

最常见的的是：start、build命令

 

3、进入工程目录

cd 目标路径

my-app是工程的名字。我这里定义的名字my-app-yyh

进入工程目录

cd /Users/luminal/Documents/LuminalCode/Luminal_Web_H5/ReactProject/my-app-yyh

 

4、启动工程

npm run start

对代码进行编译，打开测试服务器，然后会显示下面的界面：

然后会自动打开浏览器（有点吃cpu耗性能，我的mac没感觉到！）

当我们看到这个界面的时候，就代表React环境搭建成功了！

 

三、使用cnpm、nvm的情况【快速搭建环境模板】

使用淘宝定制的 cnpm，node版本管理工具nvm

国内使用 npm 速度很慢，你可以使用淘宝定制的 cnpm 命令行工具代替默认的 npm

有关nvm的安装可参考博文：JavaEE后台环境搭建：3、通过nvm安装指定版本的node

具体命令行如下：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

$ npm config set registry https://registry.npm.taobao.org

$ cnpm install -g create-react-app

-bash: cnpm: command not found

$ nvm use v10.16.0

Now using node v10.16.0 (npm v6.9.0)

$ cnpm install -g create-react-app

$ create-react-app my-app

Creating a new React app in /Users/xxx/my-app.

。。。

Happy hacking! （ 这里创建执行完，大概2分钟的时间 ）

$ cd my-app/

$ npm start

 

上一篇文章：React框架：1、React简介

 

请别只做拿来主义者，如果觉得写的不错、对你有用，留下你的足迹：点赞 或 评论 支持下！

一直被模仿从未被超越，你们的支持是我们这些写博客博主们的动力！我们将继续分享干货！