您现在的位置:首页 >> 前端 >> 内容

脚手架搭建react项目教程

时间:2017/11/7 15:50:02 点击:

  核心提示:react和vue,angular一样也有脚手架。这大大方便了我们的开发。react的脚手架是create-react-app。脚手架下载使用npm下载create-react-app运行如下命令:n...

react和vue,angular一样也有脚手架。这大大方便了我们的开发。react的脚手架是create-react-app。

脚手架下载

使用npm下载create-react-app运行如下命令:

npm install -g create-react-app

国内npm一般下载比较慢或者是常出现下载失败的情况,我们可以指定下载的仓库:

npm install -g create-react-app --registry https://registry.npm.taobao.org

或者直接设置npm的默认仓库:

npm config set registry https://registry.npm.taobao.org 

初始化react项目

进入到项目目录下使用如下命令:

create-react-app first-app

静待几分钟,好了。我们的react项目已经生成了。

cd first-app
npm run start 

启动项目,浏览器已经打开了我们的第一个react项目。

npm run build //webpack编译打包项目

虽然我们可以编译打包了。但此时项目中并有webpack的相关配置文件。这是因为脚手架封装了webpack并默认未开放出来配置文件。
这个时候我们可以通过如下命令生成webpack的配置文件:

npm run eject

好了,熟悉的webpack配置文件终于出来了,和vue或者ng还是有点不同的。一般我们需要修改的webpack配置就是配置代理了。通过配置代理将我们本地的请求代理到远端服务器,方便我们开发。react与vue的webpack配置稍有不同。代理配置需要在package.json中配置。至此,一个初步的react项目便搭建完毕。

作者:网络 来源:qq_3320355