I have a doubt: according to this table there is already full support by Chrome and Firefox for ECMAScript6, but it still throws a compilation error with code made in React that has not been compiled by Babel. What is this about? Shouldn't browsers now be able to interpret JSX and forget about compilation in Babel? What is needed to be able to directly write code and have it natively interpreted?
From already thank you very much!
React can be used without babel. As an example:
In fact, if you look at the table you added to your question, support for ES6 is much better in current browsers than it can currently deliver
babel-core-js
. Now, if you plan to use React with JSX you are going to need Babel, but first of all a clarification:JSX is not part of ECMAScript6 nor will it be in future versions, because it is not a specification , but rather a language that ends up being transpiled (not compiled) to JS. It is as if the browsers also support Coffeescript, Typescript, Elm or any new fashionable language that comes out, being that in the end all of these end up being transpiled to JS.
Going back, ReactJS can be used with traditional JS (as in the example I attached), however if you plan to use it with JSX (which is actually much more friendly and less verbose than with traditional JS) you will need a transpiler. There are other projects that have tried to address this, however babel is your best option at the moment. TypeScript comes with support for JSX as well, where in theory Babel shouldn't be needed, however you would need libraries that convert that TS code to JS.
In summary and answering your question in the title. Babel is not "required", but it does make your life easier if you plan to use JSX or give minimal support to older browsers in case you want to use ES6 syntax in your code.
We use Babel because it is much easier for programming in React. If you don't want to use Babel, you need to write React.createElement or React._________.
If you use Babel, you just need to write JSX in React and its Code Editor can highlight the verbs.
For example, without babel:
with babel:
It's easier? The second. That's because Facebook (The group was created by React) says "I recommend that you use Babel with React and with your editor so the JSX code can be "Highlighted" - in English: "We recommend using the “Babel” language definition for your editor of choice so that both ES6 and JSX code is properly highlighted."