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
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.)
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.