Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:
- Transform syntax
- Polyfill features that are missing in your target environment (through @babel/polyfill)
- Source code transformations (codemods)
// Babel Input: ES2015 arrow function
[1, 2, 3].map((n) => n + 1);// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {return n + 1;
});
JSX and React
Babel can convert JSX syntax! Check out our React preset to get started. Use it together with the babel-sublime package to bring syntax highlighting to a whole new level. You can install this preset with
npm install –save-dev @babel/preset-react
and add @babel/preset-react to your Babel configuration.
export default React.createClass({
getInitialState() {
return { num: this.getRandomNumber() };
},
getRandomNumber() {
return Math.ceil(Math.random() * 6);
},
render() {
return <div>
Your dice roll:
{this.state.num}
</div>;
}
});
