详解使用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图片预加载技术(详细演示)
Mar 12 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
jQuery瀑布流插件Wookmark使用实例
Apr 02 Javascript
JQuery弹出层示例可自定义
May 19 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
Require.js的基本用法详解
Jul 03 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
JS script脚本中async和defer区别详解
Jun 24 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 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数组键名技巧小结
2015/02/17 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
python&MongoDB爬取图书馆借阅记录
2016/02/05 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
python逆序打印各位数字的方法
2018/06/25 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
Django CBV类的用法详解
2019/07/26 Python
python中删除某个元素的方法解析
2019/11/05 Python
python 实现return返回多个值
2019/11/19 Python
Python类继承和多态原理解析
2020/02/05 Python
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
一套Delphi的笔试题一
2016/02/14 面试题
个人评价范文分享
2014/01/11 职场文书
学校个人对照检查材料
2014/08/26 职场文书
2015年远程教育工作总结
2015/05/20 职场文书
珍爱生命主题班会
2015/08/13 职场文书
PHP实现两种排课方式
2021/06/26 PHP
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript