Previous : Lesson 2 -Before You Start
Create Lightning Components
We can say it is something that will be available on UI for our functionality. Let’s follow this post to see how to create a basic lightning component.
Step 1: Open Developer Console.
Open Developer Console from the Your Name OR the quick access menu .
Step 2: Create Lightning Component Bundle
In the developer console Go to File >> New >> Lightning Component
After click on the Lightning Component, Enter the name of your Lightning component bundle and click on submit button. for this Example enter myFirstComponent in the Name field. Use the Description field to add details about your component.
This creates a new myFirstComponent component bundle, with two open tabs. Close the myFirstComponent tab, and keep the myFirstComponent.cmp tab open.
Write your code in component editor between aura:component tags.
For this example, i have write some HTML H1 and P tags and Save it by [ ctrl + s ] OR go to file >> Save.
component bundle contains a component all its related resources. such as Documentation, Style, Helper, Controller, Components, and Event handler. We will cover all of this in next lessons.
Wooow….So we are done with a basic Lightning Component creation. 🙂
It’s little tricky. We can’t run our lightning component directly, to see what we are create. to test this component [to see the result of component], we need to create a lightning application Bundle.
you can run your lightning component inside a container app. this containers would be the Lightning Experience, Salesforce1 apps, Lightning App builder or Lightning Application Bundle. You can add your lightning component to one of these containers, and then access it within that container.
For now, We just make a simple Lightning Application Bundle.
So what is Lightning Application?
An Lightning Application Bundle is just a special kind of component! For the Lesson of this tutorial, you can think of an Lightning Application as being different from a component in only 2 meaningful ways:
- An lightning application bundle uses <aura:application> tags instead of <aura:component> tags.
- Only an Application has a Preview button in the Developer Console.
Steps To Create Lightning Application Bundle:
In the developer console Go to File >> New >> Lightning Application
After click on the Lightning Application, Enter the name of your Lightning Application bundle and click on submit button. for this Example enter testApplication in the Name field.
This creates a new “testApplication” lightning application bundle, with two open tabs. Close the “testApplication” tab, and keep the “testApplication.app” tab open.
As you can seen in above screenshot. in lightning application we have <aura:application> tags instead of <aura:component > tags. and also having a Preview button on sidebar.
Now add the following markup between <aura:application> tags:
<h1> Lightning Application Heading </h1>
- This adds the “myFirstComponent” component we created earlier to the “testApplication” app.
- Here c: is default namespace to access your components.
Syntax to reference lightning component:
Learn more about namespace here.
- Save your application by [Ctrl + s] or go to file and click on save.
- Click on the Preview button on application bundle from side bar.
woohoo…. We created our first lightning component successfully. 🙂
Happiness is when your code runs without error.
That’s it !! Think it is easy ? may be yes, trust me, there is a lot in lightning to develop. We just created very basic lightning component.
any doubt with it ? any questions? ask in comment box 🙂
Follow this tutorial for more stuff.