29

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 browser Chrome (latest stable version) supports almost all the ES6 features...

If I can use ES6 without Babel, how I should do it?

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
user3463521
  • 572
  • 2
  • 7
  • 16
  • if you target electron or explicitly chrome; then you can work directly with es6. You'll still need a module loader through. – Meirion Hughes Jun 25 '16 at 18:11
  • The best explanation I've seen of why pretty much everyone should start using Babel for everything immediately: http://codemix.com/blog/why-babel-matters – odigity Jan 21 '17 at 08:31
  • If you are targeting modern browsers with react, technically you only need babel to transpile JSX. While big players lneed to ensure backwards compatibility for many browsers, depending on your target audience, you can save dev time (and money) and only program for modern browsers. Native ES6 is going to be faster than transpiled code. As to how to use ES6...just use it as you would before you transpiled, – Dani Feb 01 '18 at 23:07

3 Answers3

20

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.

skywinder
  • 21,291
  • 15
  • 93
  • 123
Scott Henshaw
  • 201
  • 2
  • 4
  • 2
    what about ? I already tried it and it allows to use import/export in your.js and browsers do import/export modules. – Oleh Dec 26 '17 at 14:31
  • 2
    Absolutely, as of October 2017 Google and Firefox support the native use of the standards based 'import { moduleName } from 'filename.js';' syntax. Beatiful thing with ECMAScript right now is how fast its evolving. Shims and transpilers are on borrowed time - exception being the generation of final deployable apps. – Scott Henshaw Jan 24 '18 at 09:05
19

If you want to:

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

Pawel
  • 16,093
  • 5
  • 70
  • 73
Kerumen
  • 4,193
  • 2
  • 19
  • 33
  • 7
    comparing JSX to native ES6 features is misleading. If your browser supports ES6, it can do modules, require, async, etc. I feel like your anwser is feeding into the misinformation that you NEED a transpiler to use ES6 – Dani Feb 01 '18 at 23:00
  • 4
    While informative, this is a great **non-answer** to the question. He asked *how* to use ES6 without Babel. Not *whether* he should. – Sensei James Feb 04 '18 at 23:04
  • 4
    No, he asked if he really needs babel to use ES6 in React. I answered (2 years ago) that he needs it, especially for the jsx. – Kerumen Feb 18 '18 at 22:07
8

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.

Dylan
  • 1,372
  • 11
  • 13
  • 3
    There is transform-react-jsx babel plugin that allows to transform JSX only ( to React.createElement() ) and keep the rest of code untouched. This would be the way to use ES6 with React in browser. But yes its still babel plugin :) – Oleh Dec 26 '17 at 14:28
  • Do we have to use Babel in 2021. Please can you advise. – Dulitha K Aug 19 '21 at 14:06
  • @DulithaKumarasiri not sure – Dylan Oct 22 '21 at 12:35