22 Jun

Screencast: Creating a React and Webpack Project

Today I'll show you how to create a Webpack and ReactJS project complete with ES2015, JSX and Hot loading.

Last week at the London JavaScript Community Meetup I did a live coding presentation where I created a React project from scratch and configured Webpack to build my application. I also added hot loading to my development workflow and configured ES2015 and JSX support through Babel, along with building a production Webpack file too.

Today I recorded a screencast of me doing this presentation so you can view even if you weren’t able to make it to the meetup. In it I do the following:

  • Set up Webpack and the Webpack Dev Server.
  • Configure Webpack to transpile ES2015 and JSX through Babel.
  • Add the react-hot-loader plugin to enable hot reloading of React components.
  • Build a small counter application to demonstrate and take advantage of hot loading.
  • Create a production Webpack config that can bundle our application into production.

A React and Webpack Workflow from The JavaScript Playground on Vimeo.

You can find the repository containing all the code on GitHub. Feel free to fork it or raise an issue if you come across problems.

In future videos I’ll cover:

  • Testing React using Node, JSDOM and Tape
  • Clever bundling using Webpack to create multiple files
  • Quicker rebuilds with the Webpack DLL plugin
  • And whatever else you’d like to see :)

If you enjoyed this post, signup to the newsletter to be notified when there's new content, new courses and exclusive offers.

If you enjoyed this article please feel free to share it on Twitter.