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:
- Version 1: React with ECMAScript 5
- Version 2: React with ECMAScript 6
- 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:
- 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
- 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.
- 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:
- Open a command prompt, navigate to the react-mortgage-calc/version2 directory, and type the following command to install Babel:
npm install
- 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.
- 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:
- New let block-scoped variables:
let monthlyRate = rate / 100 / 12;
Instead of traditional var function-scoped variables:
var monthlyRate = rate / 100 / 12;
- Object literals
return {monthlyPayment, amortization};
as a shorthand for:
return {monthlyPayment: monthlyPayment, amortization: amortization};
- 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;
- 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>); } });
- 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:
- 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
- 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
- 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.
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.
Thanks a lot. this is great.
kalite,fiyat uygunlugu ve imalattan..http://jonsunsport.com/futbol-takim-formalari.html
Thanks for the tutorial, very help us
This is very really nice apps how you make it ?..
excellent app!
thanks you admin bey
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
Thanks for sharing this amazing information
Best B.Tech College in Noida
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 .
Informative content , Great work
To crack scrum master interview : Scrum Master Interview Questions
Thanks for sharing this informative content ,
Read this blog to know about : Definition of done
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