Build Tools For React

Articles & Tutorials

Working with Fusebox and React (css-tricks.com)
Nov 08, 2019
If you are searching for an alternative bundler to webpack, you might want to take a look at FuseBox. It builds on what webpack offers — code-splitting, hot module reloading, dynamic imports, etc. — but code-splitting in FuseBox requires zero configuration by default.
  • Kingsley Silas
Maintain Control: A Guide to Webpack and React, Pt. 1 (toptal.com)
Nov 05, 2019
If you want to maintain a greater degree of control over your build process, then you might choose to invest in a custom Webpack configuration. As you’ll learn from this Webpack tutorial, this task is not very complicated, and the knowledge might even be useful when troubleshooting other people’s configurations.
  • Michael Pontus
Read a File in Create React App (starikov.dev)
Oct 29, 2019
Imagine you have a text file on your computer. It could be JSON, CSV, markdown or any other format. And now you want to create a React app to make the information in that file more presentable and maybe somewhat interactive.
  • Herman Starikov
React-Imported-Component v6 (itnext.io)
Oct 08, 2019
React-imported-component v6 is the first code-splitting library with exposed hooks API, as well as the first Create-React-App compatible one, thanks to the babel macros support.
  • Anton Korzunov
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

Don't build that app! (youtube.com)
Jul 11, 2019
React apps without a build step; no node_modules, no webpack, no babel, no worries. Scalable architecture for free using the platform.
  • Luke Jackson
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

Complete Intro to React, v5 (frontendmasters.com)
Jun 04, 2019
Learn to build real-world applications using modern React! Much more than an intro, you’ll start from the ground up, getting all the way to using the latest features in React, including hooks, effects, context, and portals.
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

rollup (rollupjs.org)15132
v1.19.4
Aug 07, 2019
Next-generation ES module bundler.
  • Rich Harris
  • Lukas Taegert-Atkinson
  • Guy Bedford
react-on-lambda (github.com)120
v0.6.1
Aug 04, 2019
A JavaScript library for building React applications in more functional way. Alternative to JSX.
  • Sultan Arziev
webpack (webpack.js.org)47190
v4.39.1
Aug 02, 2019
A bundler for javascript and friends
  • Tobias Koppers
  • Sean Larkin
@babel/parser (babeljs.io)32333
v7.5.5
Jul 18, 2019
A JavaScript parser
  • Henry Zhu
  • Logan Smyth
  • Brian Ng
  • Daniel Tschinder
@babel/core (babeljs.io)32347
v7.5.5
Jul 18, 2019
Babel compiler core
  • Henry Zhu
  • Logan Smyth
  • Brian Ng
  • Daniel Tschinder
radium (formidable.com)6872
v0.25.2
Jun 08, 2019
Radium is a set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS.
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
@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