Set up a killer React dev environment quickly with hjs-webpack

[00:00] The hjs web package from npm is a great way to get a React dev environment set up really quickly, with things like hot reloading and support for ES6 and ES7 syntax. We've got an empty directory here, and we're going to initialize a package json with our default values.

[00:18] Then, install the hjs web package from npm. In the real world, this is actually going to take probably about a minute. Because there are lots of dependencies. But thanks to the magic of editing, we're going to have it go ahead and finish right about now.

[00:36] Now that we have everything installed, we're going to go ahead and make a couple of directories. Just a source directory and a public directory for our output. Then, we're going to make a couple of files here. We've got our app...whoop. Looks like I misnamed that app js and webpack config files here.

[00:56] Now, we can go and look at these files. If we look at our package.json file, you can see that hjs webpack installed a lot of dependencies for us. That's everything that we're going to need to make all of these great features work.

[01:10] But one thing to note is that a lot of those are installed as peer dependencies. If you're using npm 3, you're going to need to install those separately. We're also going to add some npm run scripts here.

[01:22] Our npm start script is going to start the webpack dev server. That's going to be what we use while we're actively writing code and working.

[01:31] Then, we've got a build script that will just run webpack to bundle everything. We've even got a deploy script in here, you can build it, and then, publish to something like Surge. If we now open up our webpack config file, we are going to paste in this code that utilizes hjs webpack.

[01:50] We assign that to a variable cog get config. Then, we call that and pass in some basic configuration options. In this case, we're going to give it our in file, the file where we want it to start. That's our main entry file, source app js.

[02:07] We're going to give it an out directory to build into, and we're going to tell it to clear that build directory before each build. This is the absolute simplest configuration you can have for hjs webpack. There are several other options and lots of customizations available if you need them. For right now, this is all we need.

[02:26] If we go over here to our app js file, we'll go ahead and add a component file. We'll call it food js. We're going to import React, and you can see we're using the ES6 import syntax here. We're also going to import the component property from React.

[02:47] Then, we can go ahead and create our class, again, another ES6 feature. Our class extends the React component class, and we're going to define a simple render method here that says, "Hello." Then, we will export our class as the default export.

[03:04] Now, we can go over to our app js file and import React again. We will also import our component file that we just created. The last step is just to render that component directly into the document body. If we save this and go start our development server with npm start, you'll see webpack start up and get everything running.

[03:31] It tells us our bundle's valid, and we can now go check it out. We do in fact get, "Hello." A big benefit of this setup is that it gives you things like LiveReload. Let's test that out. If we change that text, it's going to update right there in the browser for us. We can see that it is updating right in place, with us doing nothing but just saving the file.

[03:55] To demonstrate that this is actually a hot reload setup rather than just a LiveReload, where it just refreshes the browser, we're going to add a little bit of code here to demonstrate that. We're going to paste in a constructor that initializes our state to be an object with a count property. Which is set to zero.

[04:16] Then, we're going to set up a interval that calls our tick function once every second. That tick function is going to increase that count variable by one so that we can see all this stuff.

[04:30] We do need to update our render method here, so we'll have this actually return a div. Then, we'll put our static message back in there. We'll also render out the count by saying, "Count is..." then, rendering out that state variable.

[04:48] We'll get rid of the semicolon, save that. We'll go over here and give this a fresh start now that we've changed things. We can see that our count is in fact increasing as time goes on, and now, we can go and change our text here. We don't lose that count.

[05:05] We know that it's not refreshing the page because that count is just continuing to increase, rather than resetting like it would if we restarted the entire app. One other thing I wanted to show is that you still can customize your Babel config and other things, even though you're using hjs webpack to speed things along.

[05:26] To do that, we're going to get rid of this bind and use this awesome ES7 bind syntax. Which is amazingly helpful, but it's only supported if you set Babel to stage 0We're going to edit our package.json and add a Babel config, and tell it to use stage 0Adding this Babel cue to your package json is the same thing as adding a .babelrc file to your project. This just allows us to avoid creating that file. If we set that up, and if we restart the app, we can see things are working. We know that that Babel config is being respected.

[06:04] We've got our ES7 syntax, we've got our hot reloading. We can update things in place and get a nice hot-reloaded app that doesn't lose state...