Using ECMAScript 6 Features

Step 1: Use New ECMAScript 6 Features

1. Open js/app.js in your favorite code editor

2. Replace all var definitions with let

3. Replace all React.createClass() definitions with the new ECMAScript 6 class syntax. For example:

   class Header extends React.Component {
       
   };
   

4. Modify all class functions to use the ECMAScript 6 syntax for class function definitions. Use the render() function below as an example:

   class Header extends React.Component {
       
       render() {
           return (
               <header>
                   <h1>{this.props.title}</h1>
               </header>
           )
       }
       
   };
   

5. In MortgageCalculator, replace getInitialState() with a constructor implemented as follows:

   constructor(props) {
       super(props);
       this.state = {
           principal: this.props.principal,
           years: this.props.years,
           rate: this.props.rate
       };
   }
   

6. In the render() function of the MortgageCalculator class, bind the call to the change event handlers as follows:

    <input type="text" value={this.state.principal} 
           onChange={this.principalChange.bind(this)}/>
   

7. Replace all remaining function() definitions with arrow functions

8. Use Object Destructuring syntax when appropriate

Step 2: Build and Run

1. Build the app:

    npm run webpack
   

2. Open index.html in your browser and test the application

Solution

The final code for this step is available in this branch.