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.

<aura:component>
    Hello, world!
</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.

<aura:component>
    <div class="container">
        <!--Other HTML tags or components here-->
    </div>
</aura:component>
Note

Note

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

Use the Developer Console to create components.

Component Naming Rules

A component name must follow these naming rules:

  • Must begin with a letter
  • Must contain only alphanumeric or underscore characters
  • Must be unique in the namespace
  • Can’t include whitespace
  • Can’t end with an underscore
  • Can’t contain two consecutive underscores