The Modal Component

While we’ll take a deeper dive into components in upcoming lessons by building our own, the following walk-through will give us a basic understanding of what LiveView components are, how they are used to organize LiveViews, and what role they play in LiveView change management. We’ll understand them as yet another LiveView feature we can use to write simple, organized code that handles complex single-page activities. With that understanding, we’ll be prepared to build our own components in the following lessons.

Layer architecture of the generated code

We’ll begin with a quick look at how the generated component code is organized into layers that compartmentalize presentation and state. This figure shows how the pieces fit together: