Component is where you do actual UI design for the module that is being developed. Lightning has its own set of tags which are called aura tags. When you create a component with above steps you see salesforce created a default tag for lightning component.
<aura:component >
// User Interface Code Here.
</aura:component>
Salesforce supports HTML tags and CSS styling. Other than standard HTML and CSS, it has its own set of tags and designs as per modern lightning design, they are called Salesforce Lightning Design System (SLDS) tags. The Lightning Design System enables you to build rich enterprise experiences and custom applications with the patterns and established best practices that are native to Salesforce.
Search different tags as per requirement from Lightning Design System official website.
You can also declare attributes to hold static and dynamic values from both client and server side data.
Attributed can be declared as mentioned below.
Syntax:
<aura:attribute name="a_Attribute_Name" type="Data_Type" default="Optional_Default_Value_As_Per_Data_Type"/>Every HTML tag has its own set of attributes, and so does <aura:attribute > tag.
| Attribute Name | Type | Description |
| access | String | Optional. Indicates whether the attribute can be used outside of its own namespace. Possible values are public (default), and global, and private. |
| name | String | Required. The name of the attribute. For example, if you set <aura:attribute name=”isTrue” type=”Boolean” /> on a component called aura:newCmp, you can set this attribute when you instantiate the component; for example,<aura:newCmp isTrue=”false” />. |
| type | String | Required. The type of the attribute. For a list of basic types supported, see Basic Types. |
| default | String | Optional. The default value for the attribute, which can be overwritten as needed. When setting a default value, expressions using the $Label, $Locale, and $Browser global value providers are supported. Alternatively, to set a dynamic default, use an init event. See Invoking Actions on Component Initialization. |
| required | Boolean | Optional. Determines if the attribute is required. The default is false. |
| description | String | Optional. A summary of the attribute and its usage. |
Examples:
<aura:attribute name="a_String" type="String" />
<aura:attribute name="a_Number" type="Integer" />
<aura:attribute name="l_Strings" type="String[]" />
<aura:attribute name="l_SObject" type="SObject[]" />
<aura:attribute name="l_Accounts" type="Accounts[]" />
These attributes can be used in components as show below.
{!v.a_String}
{!v.a_Number}Here ‘v’ represents view, which is the set of component attributes, and a_String and a_Number are attributes of the component.
Note:
Components are saved in lightning bundle with .cmp extention. For instance if the name of component bundle is My_Lightning_Component, then Component will be My_Lightning_Component.cmp.
Akhil Kulkarni 