Using Modules

In this unit, you externalize the Application Header in an ECMAScript 6 module.

Step 1: Create the Header Module

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

2. Import the react module:

   import React from 'react';
   

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

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

   export default Header;
   

Step 2: Use the Header Module

1. In app.js make sure you removed the Header class definition

2. Add an import statement at the top of the file to import the newly created Header module:

   import Header from './Header';
   

Step 3: 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.