react-hot-loader 的配置【局部刷新】--{create-react-app}
安装
1.安装create-react-app
npm install -g create-react-app
2.创建项目
create-react-app my-app
配置
1.弹出配置文件
npm run eject
2.安装React Hot Loader
npm install --save-dev react-hot-loader@next
3.添加babel插件
1
2
3
4
|
"plugins": [
"react-hot-loader/babel"
]
|
最终package.json里的babel配置如下:
1
2
3
4
5
6
7
8
9
10
|
"babel": {
"presets": [
"react-app",
"stage-1"
],
"plugins": [
"react-hot-loader/babel"
]
},
|
4. webpack.config.dev.js 添加如下入口
'react-hot-loader/patch'
5. 修改index.js入口文件
import { AppContainer } from 'react-hot-loader'; const render = (Component) => {
ReactDOM.render(
<AppContainer>
<Component/>
</AppContainer>,
document.getElementById('root')
);
};
render(App); // 模块热替换的 API
if (module.hot) {
module.hot.accept('./App', () => {
render(App)
});
}
react-hot-loader 的配置【局部刷新】--{create-react-app}的更多相关文章
- React Native 让组件做到局部刷新
利用RN的状态机机制,我们可以通过this.setState({optional:...})来控制界面的刷新,但是一定会触发render方法,那如何保证不调用render方法从而做到界面的局部刷新呢? ...
- [React] Use the Fragment Short Syntax in Create React App 2.0
create-react-app version 2.0 added a lot of new features. One of the new features is upgrading to Ba ...
- [React] {svg, css module, sass} support in Create React App 2.0
create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr ...
- React实现局部刷新
[项目结构] 流程: 入口文件 -> 路由 -> layout -> Analysi/Monitor/Workspace 1.入口文件 -> src/index.js 2.组件 ...
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- react+webpack开发环境配置
react是目前非常热门的前端框架,提倡组件化开发.所谓的组件,简单理解,就是一个独立的页面部件(包括页面模版,样式,逻辑等),它是一个独立的整体. webpack,是一个模块打包工具,其主要功能,就 ...
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- React+ES6+Webpack环境配置
转自http://www.cnblogs.com/chenziyu-blog/p/5675086.html 参考http://www.tuicool.com/articles/BrAVv2y Reac ...
- React环境配置(第一个React项目)
使用Webpack构建React项目 1. 使用NPM配置React环境 NPM及React安装自行百度 首先创建一个文件夹,the_first_React 进入到创建好的目录,npm init,然后 ...
随机推荐
- 不使用脚手架的 vue 应用
工作中的项目不止有页面繁多的模块化项目,还会只有一两个页面的类似于填写信息参与活动的活动页.这个时候,就可以回归以前的三剑客模式,在 index.html 里引用 vue.js 进行开发. 关键点: ...
- 【mac】【php】mac php开机重启
homebrew.mxcl.php71.plist <?xml version="1.0" encoding="UTF-8"?> <!DO ...
- HTTPS的请求与响应
HTTP和HTTPS HTTP协议(HyperText Transfer Protocol,超文本传输协议):是一种发布和接收 HTML页面的方法. HTTPS(Hypertext Transfer ...
- Python之code对象与pyc文件(二)
上一节:Python之code对象与pyc文件(一) 创建pyc文件的具体过程 前面我们提到,Python在通过import或from xxx import xxx时会对module进行动态加载,如果 ...
- C++异常安全的赋值运算符重载 【微软面试100题 第五十五题】
题目要求: 类CMyString的声明如下: class CMyString { public: CMyString(char *pData=NULL); CMyString(const CMyStr ...
- bat 中的特殊符号输出问题
系统关键字(感叹号!)冲突 由于是自动化部署,因此需要使用到循环,这里就不可避免的用到了延迟变量(setlocal enabledelayedexpansion) 有关延迟变量的知识,大家可以通过这篇 ...
- PHP smarty模版引擎基本安装
环境: PHP5.2 以上版本 先去官网下载smarty模版引擎的库文件到你的电脑或服务器上 smarty官方网站库文件下载地址: https://www.smarty.net/download 下 ...
- TensorFlow笔记——
主要依赖包 protocal buffer 处理结构化数据的工具:序列化(结构化数据->数据流) + 还原(数据流->结构化数据) protocol buffer与XML和JSON的区别: ...
- 关于windows系统DPI增大导致字体变大的原因分析
最近再学习WPF开发,其中提到一个特性“分辨率无关性”,主要功能就是实现开发的桌面程序在不同分辨率的电脑上显示时,会根据系统的DPI自动进行UI的缩放,从而不会导致应用程序的失真. 这个里面就提到了个 ...
- DS博客作业-05--树
1.本周学习总结 1.1思维导图 1.2学习体会 1.课堂上的知识也很难听懂,打代码就更难听懂了,真的需要不断练习代码. 2.在学习本章的内容中,一开始只是理解了概念,在真正做题中,一点思路都没有 ...