Decompose the App in Components
- Decompose your app into components
- Learn the order in which to build the components
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.
Here is what your final app will look like.
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.
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)
- Button (Lightning Global Component)
How? By dividing the app into components
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.
- App (this is the wrapper component)
We won’t check any of your setup. Click Verify Step to proceed to the next step in the project.