react(ant-design demo运行和 安装react devtools)

Node 安装

建议使用win10系统

进入官网http://nodejs.cn/ 下载nodejs(win7可能无法安装最新版选择一个支持的版本)

Powershell为win10自带 win7没有可以选择cmd (macos 自行百度)

npm 设置淘宝镜像

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

yarn 安装

npm install -g yarn

yarn –version

下载ant-design

Gitee 搜索ant-design

进入下载

解压后

导入webstorm 或者 其他编译器

这里使用的是vscode

Cd 到项目根目录 终端输入如下命令

yarn add antd

成功之后 然后选择 yarn run start(此过程会很卡 耐心等待)

 

卡在这里是正常现象(注意:此时电脑会很卡,不要任何操作)

漫长等待之后出现两个成功

使用 http://localhost:8001 访问demo首页

react-devtools

接下来安装插件react-devtools浏览器插件

搜索react-devtools下载

解压后导入编译器cd 到根目录

运行

yarn install

yarn run build:extension:chrome

找到项目目录下\react-devtools-3\shells\chrome\build

浏览器输入chrome://extensions(谷歌内核)

把unpacked文件夹拖入浏览器

成功后可以看到插件

重新启动一个react项目

可以看到

F12(笔记本使用fn+f12 或者 直接f12)

可以看到

 

右侧有react独特的props和state 等信息