Lightning Components is a UI framework for developing web apps for mobile and desktop devices. It’s a modern framework for building single-page applications with dynamic, responsive user interfaces for Lightning Platform.
To create Component: Open Developer console, Goto New > Lightning Component. Give name and description for your component and your component is created.
It contains the html like code of a component along with some lightning tags. The component code is written in <aura:component> tag. Whenever your start building your component, you start by writing your component design.
This style resource contains the custom style classes that you are going to use in your component.
It contains the basic documentation of your components so that is easy to understand for someone who is using your application. The documentation you create will be available at the lightning component library. To view the documentation of your component you have to link your org to component library.
It contains code that you want to execute before or after rendering of your component elements. You can make calls to your helper methods also in renderer. The rendering behavior can be of four types i.e. Render, AfterRender, Rerender and Unrender.
Render:- render() function is called when the component is being initialized. This function returns an array of DOM nodes.Use render function to modify DOM or to modify component markup.
AfterRender:- afterRender() function is called by the framework after the render() function.AfterRender function allows us to further change an already rendered component. The afterRender() function enables you to interact with the DOM tree after the framework’s rendering service has inserted DOM elements.
Renderer:- Rerender function will be called when a component’s value changes due to user action like a button click or some other event like component/application event. Rerender function updates component upon rerendering of the component.
Unrender:- Framework fires an unrender event when a component is deleted.The base unrender() function deletes all the DOM nodes rendered by a component’s render() function. It is called by the framework when a component is being destroyed. Customize this behavior by overriding unrender() in your component’s renderer. This can be useful when you are working with third-party libraries that are not native to the framework.
Design resource is used to create attributes that you want to use at the design time i.e. while using the Lightning App builder tool. When you are using your components on a record detail page you have the option to set some of attributes of your components to customize their behaviour. These attributes are specified in the design component.
Svg resource basically contains the svg icon for your component so that when you view your component at design time(in Lightning App Builder) your component appears with the icon specified in the svg component.
If you're ready to find out more about how SimplusLabs can help energize your workers, your customers, and your business with a different experience, let's talk.