详解使用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 相关文章推荐
基于jQuery的history历史记录插件
Dec 11 Javascript
js去除空格的12种实用方法
Nov 08 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
canvas实现十二星座星空图
Feb 14 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
vuejs实现标签选项卡动态更改css样式的方法
May 31 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
vue项目接口域名动态获取操作
Aug 13 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 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
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
python如何为创建大量实例节省内存
2018/03/20 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
python实现简单图片物体标注工具
2019/03/18 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
PHP笔试题
2012/02/22 面试题
社团成立邀请函
2014/01/08 职场文书
初中科学教学反思
2014/01/21 职场文书
旅游市场营销方案
2014/03/09 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
活动总结结尾怎么写
2014/08/30 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
个人党性分析材料
2014/12/19 职场文书
介绍信的格式
2015/01/30 职场文书
红旗渠导游词
2015/02/09 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书
pytorch 中nn.Dropout的使用说明
2021/05/20 Python
浅谈MySQL user权限表
2021/06/18 MySQL
MySQL 十大常用字符串函数详解
2021/06/30 MySQL
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫