Do I need to learn Webpack when starting with React?

16 Jul 2016

Webpack is a mess... do I really need it right now? I just want to learn some React...

Learning React can be a task in and of itself. Yet, most tutorials also put even more load on you. Instead of getting to the point, it's almost customary to teach you Webpack first.

And different options it takes. And various plugins. And a separate "production" config you aren't going to need at the moment.

This is... overwhelming. But guess what? You don't have to go that route.

Your focus, first and foremost, should be on nailing that React thing. Forget about everything else — Webpack, Redux, and a bazillion of other fancy stuff. You'll get to these when the time comes.

For the moment, though, cut straight to the meat.

There are three options you have to skip all of the Webpack-fu irrelevance:

0. Use Create-react-app

Create-react-app, or CRA, is the easiest way to get started with React.

No, really, this is all it takes:

npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

1. Use a boilerplate project for Webpack

Boilerplate projects are pre-configured Webpack setups tailored to React. All you need to go is to git clone the project and dabble your way through React, no manual setup necessary.

The actual mechanics of where app files live and how you start it vary from boilerplate to boilerplate. The app code is usually in app or src, and the whole thing is started with npm run start.

There are a lot of these, and only a few are barebones enough not to get in your way:

2. Use Brunch as your build tool

(At least while learning React)

Brunch is another build tool on the block. It's older than Webpack and was initially created as an alternative to Grunt.

It has recently caught up with where front-end dev is heading and is mostly on par with Webpack feature-wise.

What makes Brunch cool, especially when you are only getting started with JS development, is its focus on simplicity and developer happiness. It also has really-barebones starter projects for some of the most popular setups.

(Disclaimer: I contributed to Brunch, so I might have a bit of bias. Brunch may be not as advanced for full-fledged production settings, but when it comes to learning, it's the one that doesn't get in the way.)

Installed as:

npm install -g brunch

Brunch can get you started with React in 3 simple commands:

brunch new -s react my-awesome-project
cd my-awesome-project
brunch watch -s

Head over to localhost:3333 and it's there.

Now, edit in the app director to build your super special project.

Think your friends would dig this article, too?

If you need a mobile app built for your business or your idea, there's a chance I could help you with that.
Leave your email here and I will get back to you shortly.