Modular components

Modular components

Express Summary: Transform static cards into reusable components with customizable properties to improve maintainability and code organization.

Problem: Hard-to-maintain code

With our current structure, we already have several elements that make the application difficult to maintain. If we were to create a larger application, the code would quickly become unreadable. The solution: create reusable components.

What is a component?

Components are small objects that we can reuse multiple times in our application. For example, a card can become a component that we instantiate as many times as necessary.

1. Create the Card component

Creation steps

1. Right-click in the explorer
2. Select Component
3. Name the component "Card"
4. Go to the main page and copy a complete card (right-click � Copy)
5. Return to the Card component and paste the card

Clean up the main page

1. Return to the main page
2. Delete the two cards created previously
3. Instead, add a new block
4. Transform this block into a Card component via the selector

2. Add properties to the component

Problem: identical cards

Currently, all our cards display the same content. To customize them, we need to add properties.

Create a "title" property

1. Go to the Card component
2. Create a new property:
   • Name: title
   • Type: string
3. Double-click on the card title text
4. Replace the text with a variable: {title}
5. Close the braces

Configure the property

1. A property field appears in the inspector
2. Click on the "title variable" field
3. Link it to the title property

Set a default value

By default, the property is empty. To avoid empty titles:

1. In the component, set a default value (e.g., "Hello")
2. This value will be displayed if no property is defined

3. Use the component with different properties

Customize each instance

1. Return to the main page
2. Select the first Card component
3. In the properties, set title: "To Do"
4. Duplicate the component (Ctrl+C / Ctrl+V)
5. Select the second component
6. Set title: "In Progress"

4. Create the CreateButton component

Factor out the add button

1. Create a new component "CreateButton"
2. Copy the button block from the main page
3. Paste into the CreateButton component
4. Delete the old button from the main page
5. Add the CreateButton component in its place

Advantages of this approach

• Easier maintenance: modifying a component updates all its instances
• More readable code: clear and organized structure
• Reusability: a component can be used anywhere in the application
• Customization: each instance can have its own properties

Preparation for the next episode

In the next episode, we'll see how to make cards even more modular by managing internal elements (tasks) that will be arrays of objects rather than simple string properties.

Coming next: Advanced property management and object arrays in components.