Screencast: Creating a React and Webpack Project

Datetime:2016-08-23 00:27:59         Topic: Webpack  React          Share        Original >>
Here to See The Original Article!!!

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'd like to discuss this post further or ask any questions, please tweet me .


Put your ads here, just $200 per month.