详解使用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 相关文章推荐
比较简单的异步加载JS文件的代码
Jul 18 Javascript
Prototype 工具函数 学习
Jul 23 Javascript
jQuery 学习入门篇附实例代码
Mar 16 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
Aug 16 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
读jQuery之八 包装事件对象
Jun 21 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
js事件绑定快捷键以ctrl+k为例
Sep 30 Javascript
JS交换变量的方法
Jan 21 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 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配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
详解React服务端渲染从入门到精通
2019/03/28 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
python计算书页码的统计数字问题实例
2014/09/26 Python
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
Django卸载之后重新安装的方法
2017/03/15 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
Whistles官网:英国女装品牌
2020/08/14 全球购物
Android面试题附答案
2014/12/08 面试题
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
团组织推优材料
2014/12/29 职场文书
项目安全员岗位职责
2015/02/15 职场文书
人口与计划生育责任书
2015/05/09 职场文书
小学三年级作文之写景
2019/11/05 职场文书
Go gorilla/sessions库安装使用
2022/08/14 Golang