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?

Improve this question
3
  • if you target electron or explicitly chrome; then you can work directly with es6. You'll still need a module loader through. Commented Jun 25, 2016 at 18:11
  • The best explanation I've seen of why pretty much everyone should start using Babel for everything immediately: codemix.com/blog/why-babel-matters Commented Jan 21, 2017 at 8: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, Commented Feb 1, 2018 at 23:07

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

what about <script type='module' src='your.js'></script> ? I already tried it and it allows to use import/export in your.js and browsers do import/export modules.
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.
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.

Improve this answer

3 Comments

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
While informative, this is a great non-answer to the question. He asked how to use ES6 without Babel. Not whether he should.
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.
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.

Improve this answer

3 Comments

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 :)
Do we have to use Babel in 2021. Please can you advise.
@DulithaKumarasiri not sure

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.