Using Babel With React

Babel allows you to use the next generation JavaScript, today. More info

Articles & Tutorials

Setting TypeScript For Modern React Projects Using Webpack And Babel (smashingmagazine.com)
May 11, 2020
This article introduces Typescript, a superscript of JavaScript that presents the static type feature for spotting common errors as developers codes, which enhances performance, hence results in robust enterprise applications. You’ll also learn how to efficiently set up TypeScript in a React Project as we build a Money Heist Episode Picker App, exploring TypeScript, React hooks such as useReducer, useContext and Reach Router.
  • Blessing Krofegha
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
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.
How to build a React project from scratch using Webpack 4 and Babel (hackernoon.com)
Jun 07, 2018
create-react-app or react-slingshot are fantastic tools if you want to just focus on React and let them take care of the configuration. But is this the way you want to learn React?
  • Sukhjinder Arora
The minimal React + Webpack 4 + Babel Setup (robinwieruch.de)
Jan 18, 2018
The article is more about teaching people how to setup their own project without a third-party boilerplate project.
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
Setting up Webpack, Babel and React from scratch, revisited (muffinman.io)
Oct 07, 2017
This is detailed step-by-step guide, as I’ll try to explain the whole process.
  • Stanko Tadić
What are NPM, Yarn, Babel, and Webpack; and how to properly use them? (medium.com)
May 10, 2017
In this article, we will try to alleviate this painful experience by explaining these technologies one by one and how they work together.
  • Gasim Gasimzada

Video Guides & Talks

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.

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.
MJS 084: Henry Zhu (devchat.tv)
Nov 07, 2018
  • Charles Max Wood
  • Henry Zhu
JSJ 321: Babel and Open Source Software with Henry Zhu (devchat.tv)
Jul 12, 2018
  • Charles Max Wood
  • Aimee Knight
  • AJ ONeal
  • Joe Eames
  • Henry Zhu
Babel with Henry Zhu (softwareengineeringdaily.com)
Jun 21, 2018
In today’s episode, Henry explains how Babel works and its various applications. He also talks about life as a full-time open source developer, where he earns a living through Patreon and OpenCollective.
  • Henry Zhu

Libraries

@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
babel-cli (babeljs.io)32333
v6.26.0
Aug 16, 2017
Babel command line
  • Henry Zhu
  • Logan Smyth
  • Brian Ng
  • Daniel Tschinder