#170: Watch an Amateur Spin Up a React + Babel + Webpack + CSS Modules Project

Avatar of Chris Coyier
Chris Coyier on

Learn Development at Frontend Masters

Download Video
(Only MVP Supporters can download original high-quality recordings for offline viewing.)

Fair warning! This isn’t a speedy, straightforward, expert-driven plow-through of how to set up these technologies. Although, by the end, we do successfully get it all going. This is about documenting the real-world experience of doing this kind of work. Some things work easily, some don’t. Sometimes it’s my fault. Sometimes the docs are unclear. Sometimes changes have happened under our feet. We have to battle through it all.

We’ve got a little plan here. What we want to do is spin up a local project that uses:

  1. React: Let’s say we’re building a SPA and strongly desire to work with a components model.
  2. ReactDOM – We’re building for the web.
  3. Webpack: We want a dev server, hot module reloading, and a way to bundle our dependencies in a production-worthy way.
  4. Babel: We may not need much future JavaScript compile-down, but we do need JSX, and Babel is what compiles it.
  5. CSS Modules: We want to write some isolated component-specific CSS and this is a nice way to do it where our styles remain in stylesheets.

Fortunately, as I was planning to do this video, I found the article “How to Create a React app from scratch using Webpack 4” by Linh Nguyen My. 12.5K claps on Medium! Wow! I added a slew of claps to it too, because it seems to be the one tutorial out there that actually covers this super popular combination of friends in an approachable way that actually works.

That’s not to say everything goes easily and smoothly! I run into loads of little troubles along the way. Some of it is me fat-fingering things. Some of it is mysterious errors that pop up when we run commands that I barely understand. Some of it seems to be missing documentation about features. Nevertheless, we get it all sorted out in the end and have a working project!