Now, we have a component that is a user interface, that is, a markup. In the following highlighted code snippet, what we are doing is simply taking <aura:attribute…>. So, one of the features of this Lightning Framework is that you can declare the variables within the markup itself by using aura:attribute. We are taking a variable with a name, and also a type, which is String. Optionally, we can also assign the default value if the variable is not assigned with any value. You can also optionally give the following description:

<aura:component >
  <aura:attribute name="enterName" type="String" default="" 
 description="" />
</aura:component>

In the following highlighted code snippet, we are taking ui, that is, user interface. ui is a standard namespace, under which UI components are placed. We are taking ui:outputText, so much so that we are bending the expression here and will provide the value as v.enterName. Here, v stands for a view; on the markup, this component have has a variable and you are referencing that variable here. By default, we are giving the variable a value as "Enter Name". After that, we are giving inputText, allowing the user to get a value. We can also take one more attribute if we want to execute  some functionality or a controller job, but for now we are keeping it blank, <ui: inputText />. After that, add a button with the label as Submit, and finally save your component:

<aura:component >
    <aura:attribute name="enterName" type="String" default="Enter    
     Name"/>
    <ui:outputText value="{!v.enterName}" />
    <ui:inputText  />
    <ui:button label="Submit" />
</aura:component>

If there are any syntactical errors, it is going to throw them, or else it is saved to the server. So, we have followed the camel case naming style for naming the components. The following highlighted code snippet is for commenting single or multiple line comments. Save your component again, or you can use the shortcut Ctrl + S. Now, the component is saved and created:

<aura:component >
    <!-- for the label of the Name -->
    <aura:attribute name="enterName" type="String" default="Enter    
     Name"/>
    <ui:outputText value="{!v.enterName}" />
    <ui:inputText  />
    <ui:button label="Submit" />
</aura:component>

We need to use it in the Lightning pages we have developed through the Lightning App Builder, so this component should be visible in the Lightning App Builder. We have created a Lightning component that observes case sensitivity, camel case naming convention, and commenting. So, we need to use this component in the Lightning pages, through the Lightning App Builder.