 Hello, everyone. In this module, I'm going to demonstrate you how you can create or a component and how you can use or a components in application. So let's first understand what is a component. So a component is a bundle that includes a definition resource return in markup and may include additional optional resources like a controller, style sheet, and so on. So this way your component looks like. So in our previous module, I already showed you from where we can create components. So let's understand it in detail so that you know like how to create or a components in Salesforce. So I am closing these files. So this is a component which is having extension as dot CMP. And this is our application which is having dot app as extension, right? Why I created the these lightning components. So you might have focused on this lightning component configuration. So here various checkboxes are available. So these I will be covering in the next module. So I will tell you like why these checkboxes are available and what is the relation of these checkboxes with this lightning bundle. And while we create lightning applications, so we see this. So in later modules, you will get to know why we have this. So let's create our first lightning component. So here, as I already told you, we need to use HTML related code here. So these are default tags, which are available automatically. So now I am using p-tag and writing my first lightning or component and saving this. Now this component is created which is having simple p-tag. If you want to render this or you want to test it, so you need to create an application. And in this application, you can call that component. So you need to write C colon. So all the components that we create automatically goes under the C namespace. So you need to write C colon and then demo comp. And you can close this. Now one more difference you can see if you are on this component. So here you won't see any preview button. But if you go to your application, so here you will see this preview button. So if you click on this preview button, so your application will be launched. And here in the URL, you can see lightning.force.com slash C is the new namespace then slash demo app dot app. And it is showing my first lightning or a component. Now it is right now not using lightning design. So if you want to apply that, so in this application, you need to write this. Extends equals to force column SLDS. And here you can see it is automatically refreshed. And now it is showing the output as Salesforce lightning design system SLDS. So SLDS stands for Salesforce lightning design system. So you need to apply this because we are creating custom app. You can also use this lightning component on lightning experience in the pages like app page, home page, or record page. So if you are using your lightning component on those pages, in that case, you don't need to use this because those are already rendered under lightning experience. But here we are creating this app as a custom application. So we need to use extents equals to force column SLDS so that Salesforce lightning design system can be applied automatically. So this way I created component as well as application. So if I go back to the slides, so what is an application? An application is just a spatial kind of component. So application is also component. You can think of an app as being different from a component in only two meaningful ways. So first is an app uses aura column application tag instead of aura column component. So if I take you to component, so here aura column component tag is available. And here aura column application tag is available. And another difference is only an app has a preview button in the developer console. So that I already explained you and this is the UI of application where at top right corner you can see preview button is available. Now, if you want to create one more component, so let me create one more component. So I'm naming it as demo comp one clicking on submit. And here I'm writing one more lightning component and I'm saving this. So in this application, you can render more than one components. So it depends like in which order you call the components in the same order they will be rendered on the UI. So if I take you here, so you can see both are rendered and pages refreshed automatically. Now if I go here, if I add some more content, so this time you see like I just modified the component. I didn't modify application. That's why it is not refreshing automatically. So if you modify the app, so it refreshes automatically, if you modify the component in that case, you need to refresh the page. So here you can see output is displayed. So initial two lines are from okay initial first line is from component number one and the last two lines are from component number two. And if you change the order, let's say like this, I am reusing the component one and this time you will see it is refreshed automatically because I use the sorry, I updated the lightning app. Now here I'm using HR tag saving this. So you will see the difference horizontal rule is available and output of components are divided. Right. So this way, if you want to reuse any component again and again, so it means you can place one component twice on a page. Now if I remove all this from here, so here I'm rendering demo comp one and in demo comp one I'm going to use or I'm going to call demo comp. So this is also possible. So earlier I created two separate components and I used both of them in single application. But now I'm calling demo comp in demo comp one and demo comp one is rendered here. Right. So if I refresh this page, so again, you will see the same output and everything is displayed like whatever is in demo comp, it is also rendered and whatever is available in demo comp one, it is also rendered. And if you want to apply horizontal rule, so that is also possible. So see initial first line is from demo comp and second and third line is from demo comp one. So this way you can call one component into another. So this is also called nesting of components. So if you are calling demo comp one in this application, then only demo comp will be rendered. So they have kind of dependency. So this is also known as like parent child component. So demo comp one will be parent and demo comp will be treated as child. So this is all about how to create components and applications in developer console to create lightning components with the help of our framework. So I hope you understood the basics of component and application creation and how we can run application so that we can render whatever be implemented in the component. In later modules, I will be demonstrating more use cases related to lightning or a component framework. Thank you.