【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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值