react项目搭建和react devtools安装

react项目搭建

1、下载node.js

node.js下载地址：https://nodejs.org/en/

安装成功后，进入cmd命令行，输入

node -v

出现版本号，表示安装成功

2、更改配置

如果你系统C盘太小，建议更改node模块的安装目录；同时，这样做也方便以后移植nodejs环境
1）查看当前node的配置路径（下图已更改了环境后的）

npm config ls

2）修改路径
主要修改两个环境：modules对应prefix，cache对应cache
修改全局路径和默认路径，在想要存在的目录下创建两个文件夹node_cache和node_global_modules

依次执行

npm config set prefix="D:\nodejs\node_global_modules"
npm config set cache="D:\nodejs\node_cache"

3）修改环境变量
新增一个系统变量NODE_HOME;

修改Path, 新增三个路径

4）删除C:\Users{账户}\下的.npmrc文件

5）重新打开cmd命令行，尝试安装模块create-react-app

npm install -g create-react-app

成功后，在node_global_modules文件夹下可以看到

3、搭建项目环境

本人在不更改配置的情况下，搭建项目环境
1）在win左下角菜单栏中，找到Node.js command prompt，右击以管理员身份运行
或者 按win+R快捷键，输入cmd，进入命令行窗口。
2）运行代码，-g表示安装到全局环境下，安装create-react-app模块

npm install -g create-react-app

3）运行代码，创建项目，项目名为learn-react，可自行更改，最好英文表示；如果成功创建会显示如下图

d:   //想要保存到D盘，可根据需要修改
cd little_thing //保存到D盘的little_thing文件夹下
create-react-app learn-react  //这里暂时为默认路径

PS：个人在安装过程中，出现多次创建不成功，出现如下问题

可能是因为国内npm拉取资源，拉取不到
方法一：可以通过换成淘宝的npm镜像

//换成淘宝的npm
npm config set registry https://registry.npm.taobao.org
//验证是否更换成功
npm config get registry

成功后，重新运行 # create-react-app learn-react #

方法二：清楚npm缓存
到C:\Users\（用户名）\AppData\Roaming目录下，删除npm和npm-cache文件夹，重新运行 # create-react-app learn-react #

4）运行命令，打开项目

cd learn-react//进入创建的创建的项目目录下
npm start //运行项目

在浏览器打开http://localhost:3000/ 可进行查看项目页面，命令窗口也可以看到项目的存放路径

react devtools调试工具安装

1、下载工具包

github下载链接：https://github.com/facebook/react-devtools

下载并进行解压，完成后，将文件夹react-devtools-master放到C:\Windows\System32\learn-react文件夹下

2、npm安装依赖

1）以管理员身份打开node.js command prompt，输入命令

cd learn-react
cd react-devtools-master
npm --registry https://registry.npm.taobao.org install

如果安装依赖出现报错，则按提示运行命令，比如个人安装出现以下错误，则我运行了提示命令# npm audit fix #，一直下去，直到不再报错为止


2）依赖安装成功后，打包一份扩展程序

npm run build:extension:chrome 

在react-devtools-master文件夹下会出现一个新的文件夹 react-devtools-master -> shells -> chrome -> build -> unpacked文件夹

3、谷歌浏览器安装

1）打开谷歌浏览器的 “ 扩展程序 ”，

2）打开 “ 开发者模式 ”，点击 “ 加载已解压的扩展程序 ”，

3）选中react-devtools-master -> shells -> chrome -> build -> unpacked文件夹，

4）加载devtoools成功，重启浏览器

5）可查看react栏目