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
This is the React version of the plain JavaScript Mortgage Calculator built in the ECMAScript 6 Tutorial I shared recently. Take a look at the tutorial if you are interested in the plain version, or if you want to learn more about the ES6 features used in the application.

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.

This repository includes a directory for each version of the app. Each directory has its own package.json to work like the root directory of a normal project. This structure was chosen for simplicity and to avoid dependencies and prerequisites.

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.
There are different approaches to install and run Babel. For example, you could also install Babel globally and run it from the command line. Refer to the Using Babel documentation for more information.

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.

13 Responses to Building React Applications with Babel, ECMAScript 6 and Modules

  1. Ron Heiney July 29, 2015 at 6:12 pm #

    Would you be able to shed light on flux and server side rendering in a subsequent article. Feel like we are getting closer to the flex days, but without the flash problems.

  2. mitsubishi klima September 19, 2015 at 4:49 pm #

    Thanks a lot. this is great.

  3. forma imalatı November 17, 2015 at 7:36 am #

    kalite,fiyat uygunlugu ve imalattan..http://jonsunsport.com/futbol-takim-formalari.html

  4. alamindah November 19, 2015 at 6:37 am #

    Thanks for the tutorial, very help us

  5. noahpark November 19, 2015 at 6:39 am #

    This is very really nice apps how you make it ?..
    excellent app!

  6. sohbet odalari December 8, 2015 at 3:20 pm #

    thanks you admin bey

  7. CIIT Noida April 21, 2018 at 2:39 am #

    This article is very helpfull. I was looking for this info and it will help me on my business. thanks a lot

    Hadoop Training Institute in Noida

  8. CIIT Noida April 25, 2018 at 2:41 am #

    Thanks for sharing this amazing information

    Best B.Tech College in Noida

  9. gtacheat code March 18, 2020 at 1:08 pm #

    Thank you for some other informative blog. Where else could I get that type of information written in such an ideal means? I have a mission that I’m just now working on, and I have been at the lookout for such information. Today I find another great article that includes latest World Edit Commands . And click here for another great article gta san andreas cheats ps2 .

  10. yuvaraj singh November 23, 2020 at 6:13 am #

    Informative content , Great work
    To crack scrum master interview : Scrum Master Interview Questions

  11. yuvaraj singh December 18, 2020 at 12:28 am #

    Thanks for sharing this informative content ,
    Read this blog to know about : Definition of done

  12. yuvaraj singh December 22, 2020 at 7:03 am #

    Thanks for sharing this informative content , Great work
    Leanpitch provides online training in Product management during this lockdown period everyone can use it wisely.
    Product management certification

Trackbacks/Pingbacks

  1. Mortgage Calculator Reveals Big Savings - September 11, 2015

    […] and paying less interest, without financially hurting yourself – isn't that worth exploring further? Having agreed on a monthly payment schedule with your mortgage lender doesn't necessarily set that … The mortgage calculator will quickly show that you don't have to pay large sums of additional cash […]

Leave a Reply

css.php