Translated from 日本語 • View original Hello! I'm Yoshida, a web engineer.
On the 16th of last month, I made a presentation at a large-scale React-related event called React.js meetup × React Native meetup, where 180 engineers gathered, as the top batter in the LT frame.
I will now explain in detail the announcement "Introduction of React Hot Loader" that I made at that time.
What is React Hot Loader?
Browsersync has been commonly used in traditional front-end development. Browsersync can monitor file changes and automatically reload the browser to reflect the changes.
But React Hot Loader takes that convenience a step further.
React Hot Loader is a powerful loading module that monitors file changes and instantly reflects changes in React components without browser reloads while preserving the state.
It may not be clear that you want to reflect changes to a React component while keeping the state, so check out the demo video below.
It's a simple React application that simply sets the text you type in a text box to state and displays it below it.
After typing a character in the text box in the browser on the left, modify and save the component in the editor on the right.
You will then see that the changes are reflected immediately without a browser reload. And the string under the text box remains, so the state information is preserved.
See another demo.
Now with the parent component having two child components, let's try to change the components in various ways.
state is preserved, so even if you delete a child component and restore it, you will still see what you typed in the text box.
In this way, React Hot Loader is very useful for modifying state-based processing.
This is because if you reload the browser, the content of the state will naturally disappear, so you must first follow the steps to set it to state in order to test the modified parts.
If you want to correct and check with multiple patterns, it will take extra time.
With React Hot Loader, you don't need to do that, so you can develop more quickly.
Introduce React Hot Loader
Let's actually introduce it.
As mentioned earlier, React Hot Loader is just a loading module. Therefore, it is assumed that it will be loaded and used with a build tool such as Webpack.
This is an example of combining gulp + Webpack + Browsersync.
I've listed a sample project for React Hot Loader in Git, so please clone this source.
https://github.com/endam/react-hot-loader-sample
sample1 and sample2 are the React applications used in the demo video above. The only difference is the component under the src directory, and the other settings are exactly the same.
First, go directly to the sample1 directory and install the package with npm or yarn.
react-hot-loader is also one of the packages, so install it as well. Then add a task for file monitoring + automatic updates in gulp.
As a point, you need 'webpack-dev-middleware' and 'webpack-hot-middleware' in the middleware settings of Browsersync.
You must also pass webpack-dev-middleware and webpack-hot-middleware a webpack bundle based on webpack.config.js.
The publicPath setting of webpack-dev-middleware can be the same as the output.publicPath of the webpack.config.js, so we are referring to that path.
And it is the most important webpack.config.js.
In Entry, in addition to JS, you need to set 'webpack/hot/dev-server' and 'webpack-hot-middleware/client'.
Let's not forget to configure the modules of React Hot Loader to load modules in modules.
Another thing that is easy to forget is the plugins settings. Click here 'new webpack. Please note that it will not work properly unless you set 'HotModuleReplacementPlugin()'.
Once you've set it up to this point, all you have to do is move it. Let's launch the gulp task in 'gulp watch' to make sure the React Hot Loader is working.
Practical Edition
So far, we've covered the most basic React Hot Loader setup. However, I think that this setting may not be enough for actual on-site development.
The following two cases are most likely to occur.
- I want to accommodate multiple entry points
- I want to run it in a virtual environment such as Docker or Vagrant.
Learn how to handle these cases.
Accommodating Multiple Entry Points
I will write a little special way to accommodate multiple entry points.
In this way, you need to set 'webpack-dev-middleware' and 'webpack-hot-middleware' in an array for each entry point. (I never thought it would be set for each entry point, so I was quite hooked when I researched.)
However, if there are 2 or 3 entry points, this way of writing is still fine, but if there are many entry points, it will be too redundant.
In such cases, it is recommended to have a function that dynamically generates an object for the entry configuration, for example:
Run in a virtual environment such as Docker or Vagrant
For Docker
When using Docker for Mac/Windows, the setup is simple.
For example, let's say you have a container forwarding from the host's port 3006 to the guest's port 3006.
Browsersync sets the port number 3006 for port forwarding of the Docker container.
That's all for the settings. After that, run the gulp task in the same way in the Docker container and go to the browser's 'http://localhost:{forwarding port number}' to check it.
For Vagrant (VirtualBox and Vmware)
Rather than Vagrant, if you want to create an environment with a virtual machine from the provider VirtualBox or Vmware. In this case, you need to set up a proxy.
First, install a new package called http-proxy-middleware.npm install http-proxy-middleware -D or yarn add http-proxy-middleware -D
Next, change the Browsersync settings in the gulp task.
Import 'http-proxy-middleware' to configure the proxy.
Change the {Guest OS IP address} part in the line 'const proxy = proxyMiddleware('/', {target: 'http://{Guest OS IP address}');'.
Set the generated proxy object to Browsersync's middleware.
More importantly, enable the poll option in webpack-dev-middleware's watchOption to poll.
Without this setting, VirtualBox will not detect file changes.
The contents of the practical part are summarized in Sample3.
The default setting of sample3 is based on the assumption of a Docker environment, but if you want to run it on a virtual machine such as VirtualBox, please remove the commented part in the gulpfile.babel.js and set the IP address of the guest OS.
Conclusion
I just introduced React Hot Loader around February this year, and I was glad that I introduced it because it made development smoother.
React.js meetup × not many people knew about it when it was announced at React Native meetup, so I am looking forward to seeing it gradually used in other fields in the future.
If you are using React in the field, please give it a try.
Have a good React development life!