Using ES6 & ES* With React

Babel is not part of React. In fact, Babel’s purpose isn’t even that of a JSX transformer. Babel is a JavaScript compiler first. It takes ES* code and transforms it to run in browsers that don’t support ES* code. As of today, Babel mostly takes ES6 and ES7 code and transforms it into ES5 code. When doing these ECMAScript transformations it is trivial to also transform JSX expressions into React.createElement() calls. This is what we examined in the previous section.

Given that Babel is the mechanism for transforming JSX, it allows you to write code that will run in future versions of ES*.

In the HTML page below the familiar HelloMessage component has been rewritten to take advantage of ES6 classes. Not only is Babel transforming the JSX syntax, it is also transforming ES6 class syntax to ES5 syntax which can then be parsed by ES5 browser engines.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <script src="https://fb.me/react-15.2.0.js"></script>
  5.         <script src="https://fb.me/react-dom-15.2.0.js"></script>
  6.         <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  7.     </head>
  8. <body>
  9.     <div id="app"></div>
  10.     <script type="text/babel">
  12.         class HelloMessage extends React.Component { //notice use of React.Component
  13.             render(){
  14.                 return <div>Hello {this.props.name}</div>;
  15.             }
  16.         };
  18.         ReactDOM.render(<HelloMessage name="John" />, document.getElementById('app'));
  20.         /*** PREVIOUSLY ***/
  21.         /* var HelloMessage = React.createClass({
  22.          *    render: function() {
  23.          *        return <div>Hello {this.props.name}</div>;
  24.          *    }
  25.          * });
  26.          *
  27.          * ReactDOM.render(<HelloMessage name="John" />, document.getElementById('app'));
  28.          */
  29.     </script>
  30. </body>
  31. </html>

In the above HTML document Babel is taking in:

  1. class HelloMessage extends React.Component {
  2.     render(){
  3.         return <div>Hello {this.props.name}</div>;
  4.     }
  5. };
  7. ReactDOM.render(<HelloMessage name="John" />, document.getElementById('app'));

And transforming it to this:

  1. "use strict";
  3. var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
  5. var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
  7. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  9. function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
  11. var HelloMessage = (function (_React$Component) {
  12.     _inherits(HelloMessage, _React$Component);
  14.     function HelloMessage() {
  15.         _classCallCheck(this, HelloMessage);
  17.         _get(Object.getPrototypeOf(HelloMessage.prototype), "constructor", this).apply(this, arguments);
  18.     }
  20.     _createClass(HelloMessage, [{
  21.         key: "render",
  22.         value: function render() {
  23.             return React.createElement(
  24.                 "div",
  25.                 null,
  26.                 "Hello ",
  27.                 this.props.name
  28.             );
  29.         }
  30.     }]);
  32.     return HelloMessage;
  33. })(React.Component);
  35. ;
  37. ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), document.getElementById('app'));

Most ES6 features with a few caveats can be used when writing JavaScript that is transformed by Babel 5.8.23 (i.e., https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js).

Notes

  • Obviously one can could still use Babel for it’s intended purpose (i.e., compiling newer JavaScript code to older JavaScript code) without using JSX. However, most people using React are taking advantage of Babel for both unsupported ES* features and JSX transforming.
  • Learn more about Babel by reading the Babel handbook.