Welcome to Code By Code guides of SFDCFacts. These guides will be focusing on explaining the topics in detail with an example and project implementation. What makes these guides unique is that there will be code involved in each and every step with a proper explanation along with video tutorials and quizes.
In this chapter, we will start with the basics of Lightning Framework. First, we will see the meaning of all 8 files within in a Component bundle and in the end, we will develop our first ever Aura Component.
Lightning Framework is written on top of open-source Aura Framework which is a component based framework like Angular or React. With Visualforce, to create applications, you had to create multiple pages and the user was being redirected to all those different pages while interacting with the application, but with Lightning Framework, you can create single-page applications and create a better user experience.
You can create components which can be used within other components to increase code reusability. These components can fire events which can be handled by other components on the same page. It support responsive design which means your desktop, mobile and tablet will use the same codebase but will display the components based on screen size.
You can run or deploy your Aura Components at multiple places within the Salesforce ecosystem or outside of it.
1. Markup File – This is an XML based file with .cmp extension which contains the markup or visual of your component. This is the only required resource in the component bundle.
4. Stylesheet File – This file is being used to write custom CSS styles for the component.
5. Document File – Contains description, sample code or reference to your component.
7. Design File – XML based file which enables you to design a form that enables business user to set value attributes in your component using Lightning App Builder.
8. SVG File – Custom icon resource file.
To create a new lightning component, you can either use a Salesforce IDE like eclipse, VS Code or you can directly create it from Developer Console by selecting File -> New -> Lightning Component. Give your component a name like “HelloWorld” and optionally you can select any component configuration(interfaces), we will discuss these in detail later on.
Write this code in component:
To see the output, you can create a standalone Lightning Application which will invoke this component. In developer console, click File -> New -> Lightning Application. Give your application a name and write below code:
**In this guide, we will be developing Lightning Components from Developer Console.
Lightning Component Development Day1 - Basic of Lightning Framework, Component Bundle, App Builder
Lightning Framework Basics and Component Bundle