Do I really need Babel or other transpilers to use ES6 with React?

Question

Do I really need Babel or other transpilers to use ES6 in React?

I was looking at the chart https://kangax.github.io/compat-table/es6/

Seems like my current

Answer 1

If you want to:

• use modules (with require() or import ...)
• use JSX
• support a lot of browsers
• use more advanced features (async/await), some still in proposals (decorators, class properties..)

You must use Babel to be sure that everyone will be able to run your code, else you can develop without it.

Answer 2

Absolutely can and do use ES6 W/O babel. All major browsers support the vast majority of features natively (see CanIUse.com), in fact, the only major feature not supported is the import/export of modules.

For these, you still have to manually import your modules in the correct order using script tags in the HTML. Client-side only (Node needs the modules).

However, be aware that this is fine for dev but in production, you'll need to concatenate and minimize all the JS into one module anyway so using a Babel/Webpack or Babel/Browserify style toolchain may ultimately be where you end up.

Answer 3

Without babel you get the compatibility of the chart you linked to. But keep in mind if you want to use JSX you'll want to use babel to transpile that.