Building React Applications with Babel, ECMAScript 6 and Modules

With the deprecation of the React tools, the availability of ECMAScript 6 features (natively or through transpilers), and the emergence of Babel as both the React tools replacement and the ECMAScript 6 transpiler of choice, I thought I’d share a simple reference application built with this new stack. In this article, I’ll share three versions of a Mortgage Calculator application written with React and built with Babel:

1. Version 1: React with ECMAScript 5
2. Version 2: React with ECMAScript 6
3. Version 3: React with ECMAScript 6 and Modules

Running the Hosted Version

Click here to run the hosted version of the application.

Setting Up Your Environment

To run the application on your own system, clone this repository or download and unzip this file.

Version 1: React with ECMAScript 5

To run this version:

1. In your code editor, open package.json in the react-mortgage-calc/version1 directory, and examine the project dependencies: babel is the only dependency. Open a command prompt, navigate to the react-mortgage-calc/version1 directory, and type the following command to install Babel:

   npm install
   

2. Back in package.json, look at the scripts section and notice that a script named build-app is defined to build the project with Babel. On the command line, make sure you are in the react-mortgage-calc/version1 directory, and type the following command to run the build script:

   npm run build-app
   

   The application is built using Babel as the JSX transformer.

3. In a browser, open index.html in react-mortgage-calc/version1 and test the application.

Code Walkthrough:

In your code editor, open app.js in the react-mortgage-calc/version1 directory. This is a basic implementation of a React app. Variables are declared in the global namespace: we’ll fix that in version 3.

Version 2: React with ECMAScript 6

To run this version:

1. Open a command prompt, navigate to the react-mortgage-calc/version2 directory, and type the following command to install Babel:

   npm install
   

2. On the command line, make sure you are in the react-mortgage-calc/version2 directory, and type the following command to build the application:

   npm run build-app
   

   The application is built using Babel as the JSX transformer and as the ES6 transpiler.

3. In a browser, open index.html in react-mortgage-calc/version2 and test the application.

Code Walkthrough:

In your code editor, open app.js in the react-mortgage-calc/version2 directory. The code has been modified to use ECMAScript 6 features. For example:

1. New let block-scoped variables:

   let monthlyRate = rate / 100 / 12;
   

   Instead of traditional var function-scoped variables:

   var monthlyRate = rate / 100 / 12;
   

2. Object literals

   return {monthlyPayment, amortization};
   

   as a shorthand for:

   return {monthlyPayment: monthlyPayment, amortization: amortization};
   

3. Object destructuring

   let {monthlyPayment, amortization} = 
       calculatePayment(principal, years, rate);
   

   as a shorthand for:

   var payment = calculatePayment(principal, years, rate);
   var monthlyPayment = payment.monthlyPayment;
   var amortization = payment.amortization;
   

4. Object Literals (functions):

   React.createClass({
       render() {
           return (<header>
               <h1>{this.props.title}</h1>
           </header>);
       }
   });
   

   as a shorthand for:

   React.createClass({
       render: function() {
           return (<header>
               <h1>{this.props.title}</h1>
           </header>);
       }
   });
   

5. Arrow functions

   var calculatePayment = (principal, years, rate) => {}
   

   instead of:

   var calculatePayment = function(principal, years, rate) {}
   

   In the AmortizationChart component, also look at the implementation of map() using the concise and elegant arrow function notation (without {} and return) that you can use when the function implementation consists of a single return statement:

   let items = this.props.data.map((year, index) => <tr></tr>);
   

Version 3: React with ECMAScript 6 Modules

To run this version:

1. In your code editor, open package.json in the react-mortgage-calc/version3 directory, and examine the project dependencies. Notice that browserify and babelify were added to the devDependencies. Browserify was added to support modules in the transpiled ES5 implementation (Webpack is another popular choice). Babelify adds Babel support to Browserify. Now that we are working with modules, we’ll also load React as a module, hence the new React dependency in package.json. Open a command prompt, navigate to the react-mortgage-calc/version3 directory, and type the following command to install the project dependencies (react, babel, browserify, babelify):

   npm install
   

2. Back in package.json, look at the scripts section and notice that a script named build-modular-app is defined to build the project with Browserify and Babel (through the Babelify transform). On the command line, make sure you are in the react-mortgage-calc/version3 directory, and type the following command to run the build script:

   npm run build-modular-app
   

3. In a browser, open index.html in react-mortgage-calc/version3 and test the application.

Code Walkthrough:

• The business logic for a mortgage is encapsulated in modules/mortgage.js
• The UI logic for the Header is now encapsulated in modules/Header.js
• The UI logic for the MortgageCalculator is now encapsulated in modules/MortgageCalculator.js
• The UI logic for the AmortizationChart is now encapsulated in modules/AmortizationChart.js
• Notice the export or export default syntax in the modules, and the import syntax to “require” a module.