安装npm
Npm(Node Package Manager) 是node的包管理工具,每个包都是一个模块,所以也可以说npm是node的模块管理工具。
网络上已经有很多的资料,安装过程比较简单,这里不做介绍。
通过npm安装React脚手架
命令如下:
#查看库所在的目录 zxdeMacBook-Pro:~ zhangxu$ npm root -g /Users/zhangxu/.nvm/versions/node/v10.14.1/lib/node_modules zxdeMacBook-Pro:~ zhangxu$ cd /Users/zhangxu/.nvm/versions/node/v10.14.1/lib/node_modules zxdeMacBook-Pro:node_modules zhangxu$ ls @ali jscodeshift npm #下载脚手架 zxdeMacBook-Pro:node_modules zhangxu$ npm install -g create-react-app /Users/zhangxu/.nvm/versions/node/v10.14.1/bin/create-react-app -> /Users/zhangxu/.nvm/versions/node/v10.14.1/lib/node_modules/create-react-app/index.js + create-react-app@3.0.1 added 91 packages from 45 contributors in 23.138s #进入存放项目的目录,创建一个新项目 zxdeMacBook-Pro:node_modules zhangxu$ cd /Users/zhangxu/Workspace/ zxdeMacBook-Pro:node_modules zhangxu$ create-react-app helloreact #进入项目目录,然后启动 zxdeMacBook-Pro:node_modules zhangxu$ cd helloreact zxdeMacBook-Pro:hello_react zhangxu$ npm start
项目启动后效果:
项目结构与描述文件
我们使用WebStorm打开项目,脚手架生成的目录结构图如下:
其中:
node_modules是一些第三方的库
src文件夹存放我们的源代码文件
package.json则是项目的描述文件,如图描述了项目详细信息
调试IDE工具:
打开设置窗口(macOS :cmd + ,)
开启jax格式校验:
React提示插件安装
做完这几个步骤,就可以开始使用脚手架进行开发了。
Hello React