Creating the MortgageCalculator Module

In this unit, you create the MortgageCalculator module as well as the modules it depends on.

Step 1: Create the mortgage Module

1. Create a new file named mortgage.js in the js directory.

2. Move the calculatePayment() function from app.js into mortgage.js.

3. Add export in front of the function definition to make it available as part of the module public API:

   export let calculatePayment = (principal, years, rate) => {
   

Step 2: Create the AmortizationChart Module

1. Create a new file named AmortizationChart.js in the js directory.

2. Import the react module:

   import React from 'react';
   

3. Move the AmortizationChart class definition from app.js into AmortizationChart.js.

4. At the bottom of the file, export the class as the default export:

   export default AmortizationChart;
   

Step 3: Create the MortgageCalculator Module

1. Create a new file named MortgageCalculator.js in the js directory.

2. Add the following import statements at the top of the file:

   import React from 'react';
   import AmortizationChart from './AmortizationChart';
   import * as mortgage from './mortgage';
   

3. Move the MortgageCalculator class definition from app.js into MortgageCalculator.js.

4. In the render() function, change calculatePayment() to mortgage.calculatePayment()

5. At the bottom of the file, export the class as the default export:

   export default MortgageCalculator;
   

6. Open app.js and add an import statement for the MortgageCalculator module:

   import MortgageCalculator from './MortgageCalculator';
   

   app.js should now look like this:

   import React from 'react';
   import ReactDOM from 'react-dom';
   import Header from './Header';
   import MortgageCalculator from './MortgageCalculator';
       
   class App extends React.Component {
       
       render() {
           return (
               <div>
                   <Header title="React ES6 Mortgage Calculator"/>
                   <MortgageCalculator principal="200000" years="30" rate="5"/>
               </div>
           );
       }
       
   };
       
   ReactDOM.render(<App/>, document.getElementById("app"));
   

Step 3: Build and Run

1. Build the application:

   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.