Lightning Aura Components Developer Guide

Introducing Aura Components
Quick Start
Creating Components
Component Names
Create Aura Components in the Developer Console
Create Aura Components Using Salesforce CLI
Component Markup
Component Namespace
Component Bundles
Component IDs
HTML in Components
CSS in Components
Component Attributes
Using Expressions
Component Composition
Component Body
Component Facets
Controlling Access
Using Object-Oriented Development
Best Practices for Conditional Markup
Aura Component Versioning for Managed Packages
Base Components with Minimum API Version Requirements
Validations for Aura Component Code
Using Labels
Localization
Working with Lightning Base Components
Supporting Accessibility
Writing Documentation for the Component Library
Using Components
Communicating with Events
Communicating Across the DOM with Lightning Message Service
Creating Apps
Styling Apps
Developing Secure Code
Using JavaScript
Working with Salesforce Data
Testing Components
Debugging
Performance
Reference
PDF

Component Markup

Component resources contain markup and have a .cmp suffix. The markup can contain text or references to other components, and also declares metadata about the component.

Let's start with a simple "Hello, world!" example in a helloWorld.cmp component.

1<aura:component>
2    Hello, world!
3</aura:component>

This is about as simple as a component can get. The "Hello, world!" text is wrapped in the <aura:component> tags, which appear at the beginning and end of every component definition.

Components can contain most HTML tags so you can use markup, such as <div> and <span>. HTML5 tags are also supported.

1<aura:component>
2    <div class="container">
3        <!--Other HTML tags or components here-->
4    </div>
5</aura:component>

Case sensitivity should be respected as your markup interacts with JavaScript, CSS, and Apex.

Note