Create a React application from scratch (Part 3): Using ES2015 Syntax

This post is part of a beginner-level series of posts meant for people who use
ready-made tools, templates or boilerplates for React but wish to learn and understand how to build a React application from the very beginning.

All posts in this series:
Part 1: Introduction
Part 2: Initialization and the First File
Part 3: Using ES2015 Syntax
Part 4: Enforcing a Style Guide
Part 5: Setting up an Express Server
Part 6: Using a Module Bundler
Part 7: Setting up React and Best Practices
Part 8: Setting up Redux
Part 9: Setting up React Router
Part 10: TDD and Setting up Jest

The better syntax

ES2015 is a significant update to the language and provides an immense amount of useful features. If you are still not used to ES2015 syntax until today, then shame on you.

Support for new features of ES2015 is continuously increasing in modern browsers and other environments such as Node.js but the sad truth is that not all of the new features are supported and support for a single feature may vary across different browsers, but do not despair my friend — there is a solution.

The transpiler

ES2015 is essentially just syntactic sugar which means that we can use a tool to convert code written in ES2015 syntax to plain ES5 syntax which is supported by all browsers. The transpiler we are looking for is called Babel.

Babel is a heavenly sent magical tool that allows using the better version of JavaScript, today. We are going to use it to transpile our ES2015 code to normal JavaScript.

Install Babel to the project as a dependency:

$ npm install --save babel-core babel-cli

Babel is not going to work right out of the box, you will need to configure it and tell it which features you want to enable. You can configure Babel in many different ways, one of them is using a .babelrc file.

Create the .babelrc file on the root directory of the project and modify its content to match the following:

{
    "presets": [],
    "plugins": []
}

In order to tell Babel to compile ES2015 code to normal ES5, we are going to install the ES2015 preset then add it to the presets list.

Another useful preset is stage-0, we are going to add it to enable newer features like Object rest spread transform and Dynamic import.

$ npm install --save babel-preset-es2015 babel-preset-stage-0

Now, let us update the .babelrc file to include both presets:

{
    "presets": ["es2015", "stage-0"],
    "plugins": []
}

Modify the contents of index.js file and use some ES2015 code:

/**
 * index.js
 */
const logSomething = options => ({
  ...options,
  anotherOption: 'Hello!'
});
const options = logSomething({ one: '1', two: '2' });
console.log(options);

Run the following command in the terminal:

$ npx babel-node index.js

You should see the following output:

{ one: ‘1’, two: ‘2’, anotherOption: ‘Hello!’ }

If you have Node.js v8.1.4 (that is what I have) or below and try to npm start now, you will get a syntax error about an unexpected token. This error does not occur with Node.js v8.5.0 or later, in fact, you might not even need to use Babel at all with the latest version of Node.

Considering that your Node.js version might be 8.1.4 or lower, change the ‘start’ script in package.json file to use babel-node instead of node.

{
  ...
  "scripts": {
    "start": "babel-node ./index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  ...
}

If you run npm start again, everything should work just fine so let us keep going.

Now that we have support for ES2015 syntax for our server-side, let us adopt a code style guide to ensure a clean and maintainable codebase. See you on the next part of this series.

Conclusion

ES2015 is the present and the future and it provides an immense amount of useful features and you must learn it if you have not already.

ES2015 is not fully supported yet but the support is increasing and you can use Babel to convert ES2015 syntax to normal JavaScript to ensure cross-browser compatibility.

Was this article useful? Please click the Clap button below, or follow me for more.

Thanks for reading! If you have any feedback, leave a comment below.

Go to Part 4: Enforcing a Style Guide