In this lab, we will modularize the code by defining function components, which render UIs in HTML, in separate files. This is a step toward learning React where you have to use modules for your UI components.

Outline

1. Modularizing code

In-Class Goal

⏰Try to finish up to 1. Modularizing code

👋 Raise your hand if you need help

🙋‍♂️🙆‍♀️ Collaborate with peers

✅ Complete required items for your assignment

✅ Modularizing code

Use import and export to modularize your previous code into separate files

Previously, we wrote everything in a single Javascript file. This is not desirable as it is difficult to not only maintain but also reuse the code. In addition, in a collaborative context, it will create a lot of conflicts if more than one people have to work on the file.

Your task is to divide your code into reusable pieces.

1. Think about how your webpage is structured in a hierarchy
2. Think about what UI semantically independent components are there