资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

如何使用create-react-app快速构建React开发环境-创新互联

这篇文章给大家分享的是有关如何使用create-react-app快速构建React开发环境的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

创新互联建站长期为1000+客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为浮山企业提供专业的成都网站制作、做网站,浮山网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。

常用的脚手架

  1. react-boilerplate

  2. react-redux-starter-kit

  3. create-react-app(git上关注量大)

使用 create-react-app 快速构建 React 开发环境

create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。

create-react-app 自动创建的项目是基于 Webpack + ES6 。

执行以下命令创建项目:

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

tips:

如果使用 npm 速度很慢,你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org

如何编译less

1.暴露出配置文件

npm run eject

2.安装less-loader 和less

npm install less-loader less --save-dev

3.修改webpack 配置

修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件

test: /\.css$/ 改为 /\.(css|less)$/

在这个test的下面找到use,添加loader

{
  loader: require.resolve('less-loader') // compiles Less to CSS
}

好了 重新运行项目 less已经编译了

项目结构

src目录

src目录用来存放我们自己的代码,可以在src下面创建子目录,只有src根目录下的文件会被webpack编译,所以必须把文件放在src根目录下,否则不会识别。

public目录

只有public目录下的文件才会被public/index.html引用

tip:public和src下的index.html文件必须存在不能改名

常用命令

1启动命令

npm start

2编译打包命令。在生产环境中编译代码,并放在build目录中能够正确的打包代码,并且优化,压缩,使用hash重命名文件

npm run build

3.文件修改后测试

npm test

4.结构命令。暴露出webpck的配置命令,原本在脚手架中,配置项是不可见的,需要修改才执行这个命令(这是一个单项命令,一旦结构,不可逆。)

npm run eject

5.https运行

set HTTPS=true&&npm start

6.线上编译

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

只需一行命令:

npm run build

7.api开发

只需要在package.json文件中,加一个配置项就可以了。

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

8.ajax?
替代用fetch

npm install whatwg-fetch
import 'whatwg-fetch'
fetch('/power-mnjy-mobile/intf/h6/user/login?mobile=13000000001&pwd=a111111&ignoreCsrfToken=true')
  .then(res => res.json())
  .then((data) => {
   this.setState({ value:data });
  });

调试工具react developer tools(https://github.com/facebook/react-devtools)

在chrome中添加扩展程序react developer tools,记得重启浏览器(重启 重启 重启,重要的事情说三遍),在chrome的开发工具里面会出现react选项。

感谢各位的阅读!关于“如何使用create-react-app快速构建React开发环境”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


本文题目:如何使用create-react-app快速构建React开发环境-创新互联
分享网址:http://cdkjz.cn/article/ceccph.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220