Build Tools For React

Articles & Tutorials

Absolute imports with Create React App (hackernoon.com)
May 19, 2019
With the release of Create React App 3, we now have the ability to use absolute import paths, without ejecting.
  • David Gilbertson
Using Parcel as a Bundler for React Applications (css-tricks.com)
Apr 25, 2019
Where Parcel really shines is that it requires zero configuration to get up and running, where other bundlers often require writing a ton code just to get started.
  • Kingsley Silas
Tree-Shaking Basics for React Applications (telerik.com)
Mar 13, 2019
Tree-shaking is an important way to reduce the size of your bundle and improve performance. See how you can do it in your React apps.
  • Gift Egwuenu
Next.js 8 Webpack Memory Improvements (nextjs.org)
Feb 19, 2019
Recently Next.js 8 was introduced. The release included a massive build-time memory usage reduction. This blog post will explore how we have helped optimize webpack for the community.
How to set up & deploy your React app from scratch using Webpack and Babel (medium.freecodecamp.org)
Feb 14, 2019
This guide will cover the most simple React configuration that I’ve personally used for almost all of my React projects. By the end of this tutorial we will have our own personal boilerplate and learn some configurations from it.
  • Nathan Sebhastian
Setting A React Project From Scratch Using Babel And Webpack (blog.bitsrc.io)
Jan 10, 2019
The ultimate all-in-one guide to setting up a killer React project!
  • Anshul Goyal
What's the advantage with webpack? (blog.jakoblind.no)
Dec 19, 2018
Webpack feels like this huge and unnecessary thing that you just must learn and use if you wanna build a modern web app.
How to combine Webpack 4 and Babel 7 to create a fantastic React app (medium.freecodecamp.org)
Oct 11, 2018
I will focus on setting up webpack with react which will have .scss support along with code splitting
  • Adeel Imran
How to use ReactJS with Webpack 4, Babel 7, and Material Design (medium.freecodecamp.org)
Oct 10, 2018
For the past year and some, I have been working with React at Creative Tim. I have been using create-react-app for developing some nice…
  • Nazare Emanuel Ioan
React Code Style with ESLint + Babel + Webpack (robinwieruch.de)
Oct 09, 2018
You want to setup ESLint in your ReactJs project? But your project includes Babel and Webpack? This article will guide you through all the options with style guides such as Airbnb's style guide, the setup process for ESLint in React, and more beneficial recommendations to follow styling rules in your project.
Understanding webpack HMR beyond the docs (blog.jakoblind.no)
Oct 04, 2018
I have spent some days reading source codes and reverse engineering protocols. And I learned a lot about how HMR works.
x0: Making React Component Development Stupid Simple (compositor.io)
May 28, 2018
x0 is based on the principle of smart defaults. Rather than duplicating boilerplate code for React, Babel and webpack, x0 is a batteries-included development tool with the most common settings enabled.
  • Brent Jackson
Guide to building a React components library with Rollup and styled-jsx (medium.com)
May 14, 2018
As I was looking for ways to package my components, I found that Rollup was a great tool to get the job done neatly and quickly.
  • Tomek Mularczyk
Understanding Webpack and Babel (react.christmas)
Dec 20, 2017
Most apps require some kind of build pipeline to bundle your application into downloadable files. This article will give you a very simple overview over how to get started!
  • Kristofer Selbekk
Create a React app with zero configuration using Parcel (blog.jakoblind.no)
Dec 06, 2017
Parcel is a zero-configuration build tool that still gives you full control over the build setup. This is a recipe for how to create a React app with Parcel.
Quick guide to Webpack bundle and code splitting with React (blog.logrocket.com)
Nov 15, 2017
You’re probably here because your app has grown to the point where forcing the user to download the entire thing as a single file seems cruel and unusual.
Facebook’s Prepack — The Next Killer In The JavaScript Zone (dormoshe.io)
May 07, 2017
n this article, we will introduce Prepack, cover what Facebook wants to solve, see some cool examples and understand the current state of Prepack.
  • Dor Moshe

Video Guides & Talks

Intuitive Tooling (youtube.com)
May 02, 2019
In this talk, we'll discuss why truly intuitive tooling doesn't exist, go over some common misconceptions in the React community and learn more inclusive ways to talk about emerging frontend technologies.
  • Carolyn Stransky
Watch an Amateur Spin Up a React + Babel + Webpack + CSS Modules Project (youtube.com)
Feb 25, 2019
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.
  • Chris Coyier
Using and writing custom babel macros with create-react-app v2 (youtube.com)
Sep 27, 2018
The last beta of create-react-app v2 has been published. Let's see how you can use babel-plugin-macros in a create-react-app app and how to write your own.
10k or Bust: The Delicate Power of Webpack and Babel (youtube.com)
Sep 21, 2018
Your app is bigger and slower than it needs to be. Without rewriting app code we can squeeze more performance out of your code by tweaking Webpack and Babel. These tools are immensely powerful but it’s a delicate dance to get them to play nice. This talk is full of tips and tricks to get you there.
Build your own babel presets (youtube.com)
Apr 07, 2018
Asking folks to keep with your config is can be hard, presets are the solution.
Never Bundle React Again (youtube.com)
Feb 13, 2018
One result of the runaway success of Webpack is the rise of multi-megabyte megabundles. Many of the React apps we write don’t make use of widespread platform improvements like CDNs, caching, and HTTP/2. But we could if we just knew how. In this lightning talk, I show you a quick trick to slash your React bundle sizes and improve your TTI.

Courses & Video Series

Webpack for React Applications (lynda.com)
Aug 03, 2018
Discover how to optimize your web applications using the webpack JavaScript module bundler
  • Alexandru Toea
Hands-on Webpack for React Development (packtpub.com)
Jul 27, 2018
Build React-based applications and add features to them using Webpack
  • Rohan Almeida

Podcast Episodes

The Future of JavaScript Tooling with Sebastian McKenzie (undefined.fm)
Feb 12, 2019
Sebastian McKenzie is a Software Engineer at Facebook and the creator of Babel and Yarn. He joins us on The Undefined to chat about the ups and downs of open source software, what it's like to work at Facebook, and a brand new toolchain he's working on that blurs the lines between JavaScript transpiler, bundler, and framework.
RRU 002: Webpack the Good Parts with Juho Vepsäläinen (devchat.tv)
Mar 13, 2018
In this episode of React Round Up, the panel discusses Webpack the good parts with Juho Vepsäläinen. He talks a lot about the book he has written on Webpack, which helps people understand Webpack and how to work with it. They also discuss the advantages to using Webpack and discuss how you can use it in your coding to your benefit.

Libraries

webpack (webpack.js.org)47190
v4.32.2
May 23, 2019
A bundler for javascript and friends
  • Tobias Koppers
  • Sean Larkin
@babel/parser (babeljs.io)32333
v7.4.5
May 21, 2019
A JavaScript parser
  • Henry Zhu
  • Logan Smyth
  • Brian Ng
  • Daniel Tschinder
@babel/core (babeljs.io)32347
v7.4.5
May 21, 2019
Babel compiler core
  • Henry Zhu
  • Logan Smyth
  • Brian Ng
  • Daniel Tschinder
rollup (rollupjs.org)15132
v1.12.3
May 19, 2019
Next-generation ES module bundler.
  • Rich Harris
  • Lukas Taegert-Atkinson
  • Guy Bedford
react-on-lambda (github.com)120
v0.4.4
Apr 14, 2019
A JavaScript library for building React applications in more functional way. Alternative to JSX.
  • Sultan Arziev
haul (callstack.github.io)2846
v1.0.0-rc.15
Mar 27, 2019
Haul is a command line tool for developing React Native apps, powered by Webpack
parcel-bundler (parceljs.org)30444
v1.12.3
Mar 21, 2019
Blazing fast, zero configuration web application bundler
  • Devon Govett
  • Jasper De Moor
radium (formidable.com)6872
v0.25.1
Dec 17, 2018
Radium is a set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS.
@compositor/x0 (compositor.io)1591
v6.0.7
Oct 20, 2018
Document & develop React components without breaking a sweat.
  • Brent Jackson
  • John Otander
  • Miguel Palau
prepack (prepack.io)13383
v0.2.54
Oct 08, 2018
A JavaScript bundle optimizer
  • Herman Venter
  • Nikolai Tillmann
  • Dominic Gannaway
  • Facebook
nwb (github.com)4278
v0.23.0
Aug 03, 2018
A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it).
  • Jonny Buchanan
@neutrinojs/react (neutrinojs.org)3007
v8.3.0
Jun 27, 2018
A Neutrino preset that supports building React web applications.
  • Eli Perelman
  • Ed Morley
babel-cli (babeljs.io)32333
v6.26.0
Aug 16, 2017
Babel command line
  • Henry Zhu
  • Logan Smyth
  • Brian Ng
  • Daniel Tschinder