Lightning components are reusable components that are created using the combination of HTML, JavaScript, CSS and are designed for being used in the Lightning Experience and Salesforce mobile apps. Because of its reusability, we can use the same lightning component multiple times and in multiple places
We can use lightning components to build elements, such as forms, lists, buttons, and many more. You can also use them to integrate with external APIs and services which allow us to build powerful apps that can connect to data and services outside of Salesforce.
Ways to Create Lightning Components in Salesforce:
We can create lightning components using two programming models(i.e. Aura Components and Lightning Web Components).
Create Lightning Component using Lightning Web Component programming model.
Lightning Web Component is a new programming model that is used for creating Lightning components. These components are reusable and custom HTML components built using HTML and modern JavaScript. Lightning Web Component co-exists and interoperates with the original Aura component programming model for delivering exceptional performance. These components are available in Enterprise, Performance, Unlimited, and Developer editions of Salesforce.
To create Lightning component using the Lightning Web Component programming model, follow these steps:
Step-1: First, set up your Salesforce DX environment and create a Salesforce DX project. You can check our blog post “How To Setup Salesforce DX Environment And Create A Scratch Org?” to set up your Salesforce DX environment and create a project.
Step-2: Then, run the following command to create a new lightning component.
sfdx force:lightning:component:create --type lwc -n <component-name> -d force-app/main/default/lwcStep-3: Thereafter, customize the content of the HTML and JavaScript files if necessary and then Save them.
Step-4: For deploying the component, right-click on the “lwc” folder and then select the “SFDX: Deploy Source to Org” option from the dialog box.
Step-5: Following this, you can see the result of the deployment in the “Output” tab of the terminal.
Create Lightning component using Aura Component programming model.
Aura Components are the independent and reusable elements of an app. They represent a reusable section of the User Interface(UI). The aura component model provides a set of prebuilt components also known as base lightning components. The components can contain HTML, CSS, JavaScript, and other web-enabled codes.
To create Lightning component using the Lightning Aura programming model, follow these steps:
Step-1: First, log in to your Salesforce account.
Step-2: From the top-right corner of the page, click the gear icon and select the “Developer Console” from the dropdown. This will open the Developer Console in a new window.
Step-3: Now, click the “File” menu from the navigation bar and select “New“. And then choose “Lightning Component” from the dropdown.
Step-4: Further, provide a name for your lightning component and configure the component. Configuring the component is optional.
Step-5: Then click the “Submit” button to create the lightning component. A new Lightning component file will be created with a .cmp extension.
In the component file, there are some default codes for the component. You can replace that code with your own code. Since you are finished writing your component, save the files. Now, you can use the lightning component in a Lightning page or app by dragging and dropping it.
Please contact us at manish@bay20.com or call us at +91-8800519180 for any support related to Salesforce. You can also visit the Salesforce development page to check the services we offer.
