trailhead

Decompose the App in Components

What You’ll Do

  • Decompose your app into components
  • Learn the order in which to build the components

Introduction

In this project, you learn how to use the Salesforce Lightning Design System (SLDS) CSS framework in Lightning Components. Using SLDS in Lightning Components makes your app look modern, responsive, and similar to Lightning Experience.

You’ll create an Accounts app that shows a list of accounts and a corresponding “Delete” button. Along the way, you’ll learn how to create simple reusable Lightning components, interact with the server to get a list of accounts, and also pass data to a JavaScript controller when the button is clicked.

Here is what your final app will look like.

Preview of the final rendered version of the AllAccounts app

My Domain Is Already On in Your Trailhead Playground

Do not attempt to turn on My Domain, or change its settings, in your Trailhead Playground. By default, My Domain is already active in every Trailhead Playground.

In your production org, My Domain lets you create a subdomain unique to your organization. With My Domain, you replace the instance URL that Salesforce assigns you, such as https://na17.lightning.force.com, with your chosen subdomain, for example, https://mydomainname.lightning.force.com.

My Domain is required to create custom Lightning components and set up single sign-on (SSO) in an org. To learn more about My Domain, check out this knowledge article. To learn how to activate it in your production org, see the User Authentication module.

Step 1: Decompose the App

The first step in building an app in SLDS is to divide it into smaller components. In our app, we have the following components:

  • The app (it’s also a component but with an .app extension)
  • List
  • Button (Lightning Global Component)

How? By dividing the app into components

Preview of the AllAccounts app, which contains the AccountList component

Step 2: Order the Component Development

The general idea is to build a shell or dummy app that wraps all the components. That way, you can test other components inside it. You start by building the smallest and the innermost components first and then build the outermost components later.

We’ll build the components in the following order.

  1. App (this is the wrapper component)
  2. List
  3. List item JavaScript interactions (for the delete button)

We won’t check any of your setup. Click Verify Step to proceed to the next step in the project.

retargeting