Tutorial: [Salesforce] Creating a custom Lightning component

You need a developer console. The Lightning Framework is a JavaScript-based user interface component framework. Component-based means components are reusable. Lightning Framework, which is JavaScript-based, is case sensitive. Consider the following example:

helloWorld HelloWorld

Here, helloWorld has h in lower case and W in upper case, and HelloWorld has the initials in upper case. Both will work on Visualforce Framework, but not in the Lightning Framework as it is case-sensitive. Coming to the naming convention, the camel case naming convention is followed in the Lightning Framework. For markup, the HTML style of commenting is followed. If you want to comment on any logic in the controllers, you can use (//) for a single line, (/*) and (*/) for multiple line comments.

1. Switch to the Developer Console, as you are in the Lightning Experience environment. There are no issues whatsoever whether you're in Salesforce Classic or Lightning Experience; you only require the Developer Console:

   
   

2. In the File menu, click on New. You can choose any development case, such as Visualforce Page, and Visualforce Component. Apart from these, you have Lightning Application, Lightning Component, and more. Time to create Lightning Component:

   
   

3. Provide a name for your component. As you can see in the following screenshot, you also have some optional configurations that help the user to use these Lightning Components, such as Lightning Tab, Lightning Page, and Lightning Record Page, Lightning Communities Page, Lightning Quick Action. As per your requirements, you can choose any of these options or you can configure it later. You can also provide a description, as shown in the following screenshot, and then click on Submit:

   
   

4. In the following screenshot, the first component is <aura:component>. The aura is a standard namespace, under which some standard aura components are available. So, <aura:component> is the outermost component, which means it should be the first component in a Lightning component. On the right-hand side of the following screenshot, you have a Lightning resource bundle:

   
   

You now have a component that is a user interface, which is a markup. In the following highlighted code snippet, what you 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.

You are taking a variable with a name, and also a type, which is String. Optionally, you 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, you 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 has a variable and you are referencing that variable here. By default, you are giving the variable a value as "Enter Name" . After that, you are giving inputText, allowing the user to get a value.

You can also take one more attribute if you want to execute some functionality or a controller job, but for now you 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, you’ve 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 you have developed through the Lightning App Builder, so this component should be visible in the Lightning App Builder. You have created a Lightning component that observes case sensitivity, camel case naming convention, and commenting. So, you need to use this component in the Lightning pages, through the Lightning App Builder.s

If you found this article interesting and want to learn more about Salesforce Lightning, you can checkout Salesforce Lightning Cookbook. Packed with numerous hands-on and practical recipes, Salesforce Lightning Cookbook is a must-read for Salesforce developers, admins, sales consultants, and sales managers.