安装

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}的更多相关文章

  1. React Native 让组件做到局部刷新

    利用RN的状态机机制,我们可以通过this.setState({optional:...})来控制界面的刷新,但是一定会触发render方法,那如何保证不调用render方法从而做到界面的局部刷新呢? ...

  2. [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 ...

  3. [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  ...

  4. React实现局部刷新

    [项目结构] 流程: 入口文件 -> 路由 -> layout -> Analysi/Monitor/Workspace 1.入口文件 -> src/index.js 2.组件 ...

  5. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  6. react+webpack开发环境配置

    react是目前非常热门的前端框架,提倡组件化开发.所谓的组件,简单理解,就是一个独立的页面部件(包括页面模版,样式,逻辑等),它是一个独立的整体. webpack,是一个模块打包工具,其主要功能,就 ...

  7. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  8. React+ES6+Webpack环境配置

    转自http://www.cnblogs.com/chenziyu-blog/p/5675086.html 参考http://www.tuicool.com/articles/BrAVv2y Reac ...

  9. React环境配置(第一个React项目)

    使用Webpack构建React项目 1. 使用NPM配置React环境 NPM及React安装自行百度 首先创建一个文件夹,the_first_React 进入到创建好的目录,npm init,然后 ...

随机推荐

  1. 【python】python环境搭建

    本文主要用于记录python环境的搭建一些不常用的命令,其他的安装步骤在其他大师可以找到就不详细列出了.(注:以下操作都是在Ubuntu14.04LTS版本) 一.环境查询相关 1.查询当前pytho ...

  2. angular5 HttpInterceptor使用

    HttpInterceptor接口是ng的http请求拦截器,当需要拦截http请求,可以实现该接口. 1.创建HttpInterceptor 的实现类,并使用@Injectable()注解 @Inj ...

  3. Python学习笔记:PyInstaller(exe程序打包)

    PyInstaller可以将Python程序打包成一个exe程序来独立运行,用户使用时只需要执行这个exe文件即可,不需要在机器上再安装Python及其他包就可运行了.另外,PyInstaller相较 ...

  4. golang(go语言)调试和查看gc信息,以及gc信息解析

    这里记录一下调试golang gc的方法 启用gc打印: # GODEBUG=gctrace=1 go run ./main.go 程序启动后gc将打印如下信息: gc 65 @16.996s 0%: ...

  5. Linux学习-灾难复原的考虑

    硬件损毁,且具有完整备份的数据时 由于是硬件损毁,所以我们不需要考虑系统软件的不稳定问题,所以可以直接将完整的系统复原回去 即可. 由于软件的问题产生的被攻破资安事件 由于系统的损毁是因为被攻击,此时 ...

  6. 排序 sort函数

    sort函数见下表: 函数名 功能描述 sort 对给定区间所有元素进行排序 stable_sort 对给定区间所有元素进行稳定排序 partial_sort 对给定区间所有元素部分排序 partia ...

  7. Android开发——Android 6.0权限管理机制详解

    .Android 6.0运行时主动请求权限 3.1  检测和申请权限 下面的例子介绍上面列出的读写SD卡的使用例子,可以使用以下的方式解决: public boolean isGrantExterna ...

  8. Python虚拟机之if控制流(一)

    Python虚拟机中的if控制流 在所有的编程语言中,if控制流是最简单也是最常用的控制流语句.下面,我们来分析一下在Python虚拟机中对if控制流的实现 # cat demo.py a = 1 i ...

  9. java8新特性:接口的默认方法与静态方法

    接口中一共可以定义三种方法: 1.抽象方法,也就是需要实现者必须实现的方法,最常见的那种 2.默认方法,不需要实现者实现 3.静态方法,不需要实现者实现 默认方法: 允许在已有的接口中添加新方法,而同 ...

  10. Objective-C中的一些特殊的数据类型

    nil nil和C语言的NULL相同,在objc/objc.h中定义.nil表示一个Objctive-C对象,这个对象的指针指向空(没有东西就是空). Nil  首字母大写的Nil和nil有一点不一样 ...