Updated: Jul 27, 2020
The above JSX code is converted to the following code snippet by Babel.
JSX code converted to JS
ES6 Arrow function
The above ES6 Arrow function is converted to the following by Babel
ES6 Arrow function converted to ES5 compatible function
However, with most modern browsers have already implemented nearly all features of es6 and with the latest version of NodeJs completely supporting es6, the requirement for Babel is reduced greatly.
However, writing code in React without Babel will make development very difficult. The only way to accomplish this is to use React API’s like React.createElement instead of JSX.
Babel is invaluable when the support of older browsers like IE10 & IE 11 etc is required. Babel also helps perform large scale refactors within the applications by code-mods (or code modifications) where old versions of a piece of code can be changed across the application during the build process instead of manually changing the code throughout the application which increases the possibility of errors.