【React】react学习笔记09-使用脚手架开发

时间:2023-02-26 13:18:18

安装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

  

项目启动后效果:

 【React】react学习笔记09-使用脚手架开发

项目结构与描述文件

我们使用WebStorm打开项目,脚手架生成的目录结构图如下:

【React】react学习笔记09-使用脚手架开发

其中:

node_modules是一些第三方的库

src文件夹存放我们的源代码文件

package.json则是项目的描述文件,如图描述了项目详细信息

 

调试IDE工具:

打开设置窗口(macOS :cmd + ,)

开启jax格式校验:

【React】react学习笔记09-使用脚手架开发

 React提示插件安装

 【React】react学习笔记09-使用脚手架开发

做完这几个步骤,就可以开始使用脚手架进行开发了。

Hello React