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


Posted in Javascript onMay 16, 2018

最近在折腾react开发,总结一个react环境搭建的教程,写得比较细碎,基本上就是自己的搭建步骤了,希望能够帮助到有需要的小伙伴。

常用的脚手架

  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/h5/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选项。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 仿关机效果的图片层
Dec 26 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
js随机生成26个大小写字母
Feb 12 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 Javascript
seajs下require书写约定实例分析
May 16 #Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 #Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 #Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 #Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 #Javascript
浅谈如何通过node.js对数据进行MD5加密
May 16 #Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 #jQuery
You might like
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
Yii框架安装简明教程
2020/05/15 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
用原生js做单页应用
2017/01/17 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
vue多次循环操作示例
2019/02/08 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
Python heapq使用详解及实例代码
2017/01/25 Python
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
python实现机器人卡牌
2019/10/06 Python
学习Python列表的基础知识汇总
2020/03/10 Python
python调用私有属性的方法总结
2020/07/24 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
python Timer 类使用介绍
2020/12/28 Python
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
优秀辅导员事迹材料
2014/02/16 职场文书
文艺晚会主持词
2014/03/24 职场文书
2014年党支部工作总结
2014/11/13 职场文书
2014年民政工作总结
2014/11/26 职场文书
师德师风事迹材料
2014/12/20 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
银行求职信范文
2019/05/13 职场文书
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL