Moving from ES5 to ES6 functions in React

< Back to TOC

Here’s another short chapter, in which we’ll update our existing app with some arrow functions (ES6 style) instead of “regular” functions (ES5 style).

There’s no special reason to do this, other than to demonstrate the fact that both are equally acceptable and that both simply work. Actually, the ES6 syntax is the preferred way to do things in React, although both flavors of syntax work.

Keeping an open mind and understanding that there are many ways of doing the same thing in React is something that you might need getting used to, and so, consider this short chapter a practice in showcasing this fact and driving it home.

Table of contents

1. Updating our functional components from ES5 to ES6
2. What Babel does with our ES6 function components

Updating our functional components from ES5 to ES6

Let’s go to the App.js file, and locate the line that reads function App() {.

We’ll update it as follows:

const App = () => {

Everything else remains unchanged in the App.js file, and our app is still running smoothly.

Let’s now update the other two components as well.

In Jumbotron.js, let’s update from:

function Jumbotron () {

to:

const Jumbotron = () => {

Finally, in Footer.js, let’s update from:

function Footer() {

to:

const Footer = () => {

Great, we’ve updated all our functions from ES5 to ES6.

Now, let’s go to the Babel website and see how this gets transpiled.

What Babel does with our ES6 function components

Here’s the full contents of the Footer.js file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const Footer = () => {
    return (
      <div className="container">
        <footer className="py-3 my-4">
          <ul className="nav justify-content-center border-bottom pb-3 mb-3">
            <li className="nav-item">
                <a href="#" className="nav-link px-2 text-muted">
                Home</a></li>
            <li className="nav-item">
                <a href="#" className="nav-link px-2 text-muted">
                Features</a></li>
            <li className="nav-item">
                <a href="#" className="nav-link px-2 text-muted">
                Pricing</a></li>
            <li className="nav-item">
                <a href="#" className="nav-link px-2 text-muted">
                FAQs</a></li>
            <li className="nav-item">
                <a href="#" className="nav-link px-2 text-muted">
                About</a></li>
          </ul>
          <p className="text-center text-muted">© 2021 Company, Inc</p>
        </footer>
      </div>
    );
  }

export default Footer;

We’ll paste this file into Babeljs.io.

Here’s the output:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

const Footer = () => {
  return /*#__PURE__*/React.createElement("div", {
    class: "container"
  }, /*#__PURE__*/React.createElement("footer", {
    class: "py-3 my-4"
  }, /*#__PURE__*/React.createElement("ul", {
    class: "nav justify-content-center border-bottom pb-3 mb-3"
  }, /*#__PURE__*/React.createElement("li", {
    class: "nav-item"
  }, /*#__PURE__*/React.createElement("a", {
    href: "#",
    class: "nav-link px-2 text-muted"
  }, "Home")), /*#__PURE__*/React.createElement("li", {
    class: "nav-item"
  }, /*#__PURE__*/React.createElement("a", {
    href: "#",
    class: "nav-link px-2 text-muted"
  }, "Features")), /*#__PURE__*/React.createElement("li", {
    class: "nav-item"
  }, /*#__PURE__*/React.createElement("a", {
    href: "#",
    class: "nav-link px-2 text-muted"
  }, "Pricing")), /*#__PURE__*/React.createElement("li", {
    class: "nav-item"
  }, /*#__PURE__*/React.createElement("a", {
    href: "#",
    class: "nav-link px-2 text-muted"
  }, "FAQs")), /*#__PURE__*/React.createElement("li", {
    class: "nav-item"
  }, /*#__PURE__*/React.createElement("a", {
    href: "#",
    class: "nav-link px-2 text-muted"
  }, "About"))), /*#__PURE__*/React.createElement("p", {
    class: "text-center text-muted"
  }, "\xA9 2021 Company, Inc")));
};

var _default = Footer;
exports.default = _default;

Inspecting the output, we can see the code transpile to an earlier version of JavaScript, namely ES5.

Here’s a screenshot of the above transpilation in the browser.

Obviously, since we’re developing our React app using the create-react-app with all the presets taken care of automatically, this Babel transpilation is happening on the fly.

To prove this, let’s go back to the browser and inspect the contents of our app in developer tools.

There’s a lot more happening in the file in the above screenshot, but the specific section above was chosen because it shows the similar setup as what we’ve had in the Babeljs-transpiled file - which proves the fact that Babel indeed works behind the scenes in our local React app too.

< Prev lesson Next lesson >