快速安装create-react-app进行react项目开发

在create-react-app这个脚手架出来之前,大家都是用webpack + es6来结合react来开发项目的,不过这样需要自己配置一大堆东西,对刚接触react的同学比较麻烦,有了create-react-app之后再进行react开发就变得非常方便。

安装也非常方便,一句话就可以:

npx create-react-app  my-app  

安装成功之后就会这样的提示

然后再输入下面两行代码

cd my-app //调到myapp文件夹下

npm start //启动服务 

然后会自动跳到浏览器

找到本地myapp文件,就可以在里面编写代码了

create-react-app内部依赖了webpack,还加入了EsList的功能让你的代码更好。create-react-app除了方便使用外,还有另外两大优点:

1.线上编译命令

  create-react-app能将你的应用编译出在线上生产环境运行的代码,编译出来的文件很小,且文件名还带hash值也方便做cache,而且它还提供一个服务器,让我们在本地也能看到线上生产环境类似的效果.

npm run build

它会通过Gzip压缩,将代码压缩得很小

运行下面两条命令可以查看线上效果,编译的文件会放到build目录下

 npm install -g serve

 serve -s build

 

2.方便api开发

在实际开发环境中,react应用可能和api服务可能没在同一端口,比如react应用跑在3000端口,api服务可能跑在3001端口,只需要在package.json文件中加个配置项就可以了

"proxy": "http://localhost:3001/"

 

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值