CODEWITHSUNDEEP
javascriptreactjsreact-native
bier hier
bier hier

Reputation: 22550

How to make react hot loader working for jsx?

I just started with reactjs and trying to get hot reloading for my jsx going. I forked this app: https://github.com/gaearon/react-hot-boilerplate/tree/next.

I changed the app.js slightly to:

import React, { Component } from 'react';

export default class App extends Component {
  constructor(){
      super();
      this.state = {
        txt: 'this is the  txt',
        cat: 0
      }
    }

  render() {
    return (<div>
          {this.state.txt}
        <h1>sdfdsfdsfs, world.</h1>
        </div>

    );
  }
}

When I change the text within the h1-tag is refreshes the browser. However when I change the txt property nothing happens. How can I get this working?

Upvotes: 1

Views: 105

Answers (1)

vadersfather
vadersfather

Reputation: 9319

React-hot-loader cannot reload changes to the initial state in the constructor. This is because the constructor for the component isn't called again by react-hot-loader when something inside the component changes.

It can't hot reload changes to the initial state. Don't forget this property assignment is equivalent to setting the field inside the constructor. Even if you change the constructor, the field has already been set. Constructor doesn't run twice. So this is not supported.

Check out this issue: https://github.com/gaearon/react-transform-hmr/issues/41

Upvotes: 1

Related Questions