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

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