DEV Community

loading...
Cover image for Add Hot Reload to React Rails 6

Add Hot Reload to React Rails 6

nodefiend profile image chowderhead ・1 min read

Photo Cred : Moritz Jager

Assumptions

  • Your running Rails 6
  • You have a React Component Entry Point
  • You have webpack installed in your Rails Repo

Install Dependencies:

yarn add react-hot-loader
Enter fullscreen mode Exit fullscreen mode

Configure Plugins

babel.config.js

...
plugins: [
      'react-hot-loader/babel',
]
...
Enter fullscreen mode Exit fullscreen mode

Modify Root Component

app.js


import React from "react"
import { hot } from 'react-hot-loader'

class App extends React.Component {
  render () {
    return (
      <React.Fragment>
        <Main/>
      </React.Fragment>
    );
  }
}

export default hot(App);

Enter fullscreen mode Exit fullscreen mode

Thats it!

Now we just need to import hot into our base/root component and wrap our export in it.

make sure your running the rails server -p 3000 and also ./bin/webpack-dev-server in another window

This is literally all i needed to do to get hot reloading working for my project.

leave a comment below if you have any issues , and we can try and figure it out!

Discussion (2)

Collapse
jetsondavis profile image
Jeff Davidson • Edited

Doesn't work?! I get this error in browser and nothing renders:

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

Collapse
nodefiend profile image
chowderhead Author

Sorry for the late response Jeff!! can you link the code for the component you have between the <React.Fragments>

Forem Open with the Forem app