 Hello everyone. In previous module, we understood introduction about lightning component. In this module, I will be covering introduction to aura component bundle. So in this module, we will be particularly focusing on aura. So lightning component and aura. So lightning components are built on top of aura. We use Salesforce specific extensions. If I talk about aura, so aura is open source framework, thinking of it as a web kit in Safari or Safari and Chrome enterprise ready and tested. So basically, if you want to create any lightning component with the help of aura, so you can use aura framework to create lightning component. In the beginning it is written lightning component build on top of aura. And another way of building lightning component is lightning web component. So there are two frameworks. One is aura component and one is web components. Through both you can create lightning components. So if I talk about lightning component bundle that is available with aura. So here you can see it is divided into two parts. One is client and one is server. So on left hand side client is available where you can see various files are available. And if I focus on right hand side so their server and apics controller and databases available. So let's discuss about the left hand side part first, which is which you need to use while creating your lightning component with the help of aura. So here you can see style renderer applications less component controller helper design SVG documentation these files are available. Right. So if I take you to the org and if I try to create new lightning component. So I'm naming it as demo component clicking on submit. So at right hand side you can see all these files are available component controller helper style documentation renderer design SVG. Right. Now if I click on new again and create lightning application. So naming it as demo app clicking on submit. So if I click on this application so here you can see first file is application then controller helper style documentation renderer and SVG. Right. So this is component file where you can implement your component code. And if you want to render your component then you need to use application. Right. So in component view is known as this component file in application the view is known as this application file right where you can write your HTML related code. So if I take you back to the diagram. So here in the middle you can see application slash component is written which is known as the view. So where you will be implementing all your markup that will be rendering on the browser. So whatever you write in your application or component so application if you are creating any lightning application component if you're creating any lightning component. So in both the cases like if you're using application so you will write markup those will be rendering while you will be running your application. And if you're using components so you need to write markup in such a way so when your component will be rendered so that will be displayed on the UI. Right. Now if I click on this controller. So I clicked on this controller. So it will be opened as a file. So here you can see demo comp. So we created demo component so demo com controller.js. So it will be opened automatically. And here you can write the backend code that that will be implemented with the help of JavaScript. Right. So here you can see controller in JavaScript language and helper also in JavaScript. So these two we need to manage in JavaScript. And if you want to do some styling with the help of CSS so style file is available. So if I take you here if I click on style so here you can see dot CSS file is available in this file you can write CSS related code. So in later modules we will see like how we can use controller how we can use helper how we can write CSS in the style file. Then we have renderer design SVG and documentation. So they all have their separate purposes. So in next slide I will be explaining the detail purpose of each and every file. So whenever you load your lightning component first time so all these files are loaded at the client side. And whenever you perform any client side business logic so controller helper performs those they don't interact with server again and again because code code reside at the client side because you are implementing JavaScript. Now if you want to interact with your database where your S objects are available, whether it is standard S object or custom S object. So to interact with those S objects, you need to create one more file that is known as apex controller. So this apex controller will reside on the server always. So whenever your component wants some data from the database or your control component want to send some data to database. So these JavaScript controller and helper will interact with the apex controller. That is actually apex file or apex class. So this will be linked with your controller or helper and this apex controller will be interacting with the database. So all the SOQL or DML you will be implementing in this apex controller only. So this apex controller will reside in the server. So whenever you want some data so controller and helper those are available with this for a component bundle. They will be fetching this apex controller and accordingly data will be managed at the database. So whenever you will be interacting with the database so your component will interact with the server. Otherwise, all business logic will be processed on the client side. Now, this is the complete list where all the uses for all the resources are available. So if you are implementing component so view file will be known as component dot cmp. Like if your component name is sample so sample dot cmp. And if you're creating any application so its name will be sample dot app that I already showed you here. So here you can see demo com dot cmp and demo app dot app. So this way it is available. The only required resource in the bundle. So this is required if it is blank so nothing will be displayed or rendered on the browser. So at least in this file you need to write some code so that it can be displayed on the browser. Contains markup for the component or app. Each bundle contains only one component or app resource. So this dot cmp or dot app file is required. So you need to implement some code in this file. Next is CSS styles. So one thing you need to notice like first time you need to provide name to that component or application. Other files naming convention will be decided automatically. You just need to click here and automatically files will be created with with particular name. Then here uses of this sample dot CSS is styles for the component. So here you can write some CSS so that you can style your component. Then we have controller. So it's label will be controller dot sample controller.js. Client side controller methods to handle events in the component. Then we have design so sample dot design required for components used in the lightning app builder or lightning pages. Helper so it's label will be sample helper dot gs. So it is again will be written in JavaScript JavaScript functions that can be called from any JavaScript code in the components bundle. So basically controller and helper they work together. So in later module I will demonstrate some use cases so that you can understand how to use controller and helper. Then we have documentation so it's label will be sample extension or a doc. A description sample code and one of multiple one or multiple references to example components. Renderer so again this will be written in JavaScript so label will be sample renderer dot js client side renderer to override default rendering for a component. And last one is SVG. So it's label will be sample extension will be dot SVG custom icon resource for components used in the lightning app builder. So if you want to provide any custom icon so you can use this SVG in the lightning component. So basically for application sorry for component we have these eight files and if you want to build any application so you have these seven files that you need to implement. Now, if I move forward. So if I summarize like how many languages we use in this lightning component bundle that we build with the help of aura. So here for languages are supported so first is XML component definition there. You write the code which is rendered in the browser CUI then CSS for styling components, then JavaScript that we use in controller helper and renderer. And the last one is a picks that will be used in a picks controller if you want to interact with your S objects. So if you want to become a developer in lightning component with the help of aura. So you need to know these all. If you don't know these languages then you will face problems so XML CSS JavaScript and apex all together works to build lightning component with aura. So this is all about lightning component bundle. Some files work on client side and apex controller works on server side so this is all about lightning component bundle. Thank you.