Possible to use React Hot Loader?

[mattfordham]

Hi there!

Desipte the link in the React on Rails Doctrine to React Hot Loader, it seems this project is using the deprecated React Transform HMR project.

Has anyone had success implementing React Hot Loader yet and/or have an example of implementation? Specifically, I am getting hung up on where/how to use the module.hot.accept stuff.

Thanks!

[mattfordham]

FWIW, I think I figured it out a good way to do this...

import React from 'react';
import ReactOnRails from 'react-on-rails';
import { AppContainer } from 'react-hot-loader';

import HelloWorld from './HelloWorld';

const App = (props, _railsContext) => {
  if (module.hot) {
    module.hot.accept('./HelloWorld', () => {
      ReactOnRails.reactOnRailsPageLoaded();
    });
  }

  return (
    <AppContainer>
      <HelloWorld {...props} />
    </AppContainer>
  );
};

ReactOnRails.register({ App });

This seems to work, although I havn't tested thoroughly. I'm not sure if this is an appropriate usage of ReactOnRails.reactOnRailsPageLoaded();. Can anyone confirm the approach?

BTW, I am using Webpack 2 and React Hot Loader 3 for the above.

[justin808]

@mattfordham Can you help me with a PR with these updates? I'd be glad to give you help!

[mattfordham]

Yeah, I'd love to try! Won't be immediately, but will put on the list ;)

[justin808]

This is related: shakacode/react_on_rails#742

[Judahmeek]

Also shakacode/react_on_rails#332. I've been exploring this problem domain and I don't think ReactOnRails.reactOnRailsPageLoaded() is the best choice since it rerenders all registered components regardless of the scope of the hot update.

[justin808]

@Judahmeek @mattfordham FWIW, the hot loader seems to work GREAT if you are not using CSS modules.

[Judahmeek]

@justin, what about flexbox?

[mongjong59]

@mattfordham
React Hot Loader works great with React on Rails. But you shouldn't use ReactOnRails.reactOnRailsPageLoaded() as at least it won't work with Redux out of the box. You just need something like ReactDOM.render(element, document.getElementById(domNodeId)) in your root component. You can check out my minimal demo here for more details.

@justin808 I don't have any issue by far with React Hot Loader when using CSS modules or even react-css-modules. It works perfect.

[justin808]

We need to update this repo for the current version of hot reloading.

Take a look at this issue: shakacode/react_on_rails#772

[justin808]

See shakacode/react_on_rails#865 for an example of what needs to be done! Any volunteers for this?