Lesson 3 – Create Your First Lightning Component

Lightning Tutorial
Previous : Lesson 2 -Before You Start 

Create Lightning  Components

Lightning component is a reusable unit of an app. and it’s a combination of markup, JavaScript, and CSS.

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 [Setup gear icon].

tutorial create your first lightning component sfdcmonkey.com
Screenshot From Salesforce Lightning Experience

 

salesforce lightning component tutorial developer console
Screenshot From Salesforce Lightning Classic
Step 2: Create Lightning Component Bundle

In the developer console Go to File >> New >> Lightning Component

tutorial create your first lightning component sfdcmonkey.com

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.

tutorial create your first lightning component sfdcmonkey.com

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.

tutorial create your first lightning component sfdcmonkey.com

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. 🙂

tutorial create your first lightning component sfdcmonkey.com

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

tutorial create your first lightning component sfdcmonkey.com

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.

tutorial create your first lightning component sfdcmonkey.com

This creates a new “testApplication” lightning application bundle, with two open tabs. Close the “testApplication” tab, and keep the “testApplication.app” tab open.

tutorial create your first lightning component sfdcmonkey.com

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:

  • This adds the “myFirstComponent” component we created earlier to the “testApplication” app.
  • Here c: is default namespace to access your components.

tutorial create your first lightning component sfdcmonkey.com

Syntax to reference lightning component:

<orgNameSpace:componentName/>

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.

tutorial create your first lightning component sfdcmonkey.com

Output-:

tutorial create your first lightning component sfdcmonkey.com

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.

Next : Lesson 4 – Give Style to Your Lightning Component.
(Visited 6,328 times, 3 visits today)

5 comments

Leave a Reply