LWC - Basic Concepts

Hirday Lamba
A free video tutorial from Hirday Lamba
Salesforce Certified Architect
4.5 instructor rating • 10 courses • 48,014 students

Lecture description

In this video, you will learn basic concepts of LWC like using files (HTML, JS, Meta) and property binding.

Learn more from the full course

Introduction - Salesforce Lightning Web Components

Learn with a Real Time Project Tasks

01:02:50 of on-demand video • Updated April 2019

  • Build Lightning web components and use them to develop custom business requirements.
English [Auto] In this lecture we're going to look at all the basic concepts of lightning web component. Whenever you're going to create a WC you will require a team by its estimate by JavaScript file and configuration by So now let's look into our example where we're going to create very first lightning web component which is going to display the current date and time to do that less jumping to a visual studio like over here a Visual Studio and if I click on any WC say create lightning web component I'll give a name got it Date Time now S.F. The X has created three files for me first trials each team in five seconds yes. And third is top five let's talk about this team will find anything that you write in steam and has to include it into the template deck template that roared back which is being used in late me web component. So anything on your user interface has to be included in the template that if I look into the yes it has imported the lightning element from the WC library also we have an export default class because whatever we're going to write over here we want it to be exported out of this lightning web component. So we have an export over here. Now if you go back to our presentation the estimate file again is the UI component with a tag of template JavaScript file has caught a WC with import lightning element from the WC module then lightning element is a custom wrapper. So if I go back a lightning element it's a custom wrapper around the HDMI and export help us to make sure that whatever component we have that can be used by other component also. The last one is configuration file where whatever component you make you want to specify that target and you can also specify whether it is to be exposed or not. If I make it through then it is ready to be exposed but I also have to specify the target where it needs to be exposed this particular lightning component is available on our page record page and homepage. Now let's go ahead and write our very first lightning component you're going to write a lighting component which has an H went back with since my first legacy and data seven type which I have put it in that paragraph. So let's see this. Now I have saved this controllers I know it here. Also controllers. Now I'm going to push this to the R so let's say deploy sourced I just right click deploy source to our let it get deployed. Now let's jump in to see this force I would hear less. Ed page two at the newly created lightning on planet but this is my component current date in time added Alexi school back but this is my first day WC is 78. Oh here if I go back we have hardcoded that date no less. Can we make it dynamic which will come from our jealous sacrifice to do that. Well first define a property. Let that property name be deed and we are specifying it Nikolay produces. Not this needs to be referenced in my yes file to do that. We have something called less decorators. Let me know go back. Presentation now. There are three types of decorator that we use EPA which indicates a public property or method track with private property. If I want to track it via if I want to get the data from Salesforce in our example we are going to use EPA. The reason being we want to read into the component as soon as the property changes. So let's go back and see karma. EPA and over here so we are tracking a particular property. The property name is deeded less copy this let's say at 38 EPA. Same we call it that we are going to make use of a javascript function which is going to return me the current date and time and put it in a variable T deed and this will then be reflected over here in my esteem. Let's see if this lets see this. Let's see this and now we are going to again apply source to our let's go back and refresh this particular lightning component. Now it has come date is Sunday April 7 2019 so we have just created a lightning web component using the very basic principles. That is it can set up three phase SDM in JavaScript configuration to do binding we make use of decorators the EPA track and via in our example we did a very basic binding where we have a property by an empty deed. This dude gets the lead does the tenth time from a javascript and returns it on the SD.