Hello World Lightning Component

Let’s discuss the Salesforce Lightning Web Components with hello world example which is the perfect start to understand how the Lightning Web Components works. Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.Web components are based on existing web standards. Features to support web components are currently being added to the HTML and DOM specs, letting web developers easily extend HTML with new elements with encapsulated styling and custom behavior. Lightning Web Components is a new programming model for building Lightning components. It leverages web standards breakthroughs, can coexist and interoperate with the Aura programming model and delivers unparalleled performance. To create and develop Lightning Web Components and leverage their powerful features and performance benefits, you need to set up Salesforce DX.

Environment setup

Sign up for spring 19 pre-release org from here.
Enable Dev Hub
Install SFDX CLI spring 19 version. Please check the SFDX version to be matched to 45.0.X on CLI
Download and install the latest version of Visual Studio Code if not available
Install visual studio code Salesforce Extension Pack extension
Install Lightning Web Components extension for visual studio code

Time to Code “Hello World” Component

Now your development setup is complete and you can able to start coding the helloworld web component and let us get the start.

Open Visual Studio Code and run the SFDX commands from the visual studio code command palette.To open command palette press Command + Shift + P on a Mac or Ctrl + Shift + P on Windows.
Run SFDX: Create Project command to create a project from Command Palette and Enter helloworld as the project name.

3. Authorize a Dev Hub by using SFDX: Authorize a Dev Hub command from the command Palette and Log in using your pre-release Dev Hub org credentials. Click Allow.

4. Create a Scratch Org by using SFDX: Create a Default Scratch Org command from the command palette. Press Enter to accept the default project-scratch-def.json. Press Enter to accept helloworld scratch org alias.
5. Now Create a Lightning Web Component using SFDX: Create Lightning Web Component. Press Enter to accept the default to force-app/main/default/lwc folder. Type helloworld for the name of the new component. Press Enter. You can able to see the newly created component under force-app/main/default/lwc folder.

Now in the helloworld.html file copy and paste the below code.

<template>
        <lightning-card title="Hello" icon-name="custom:custom14">
            <div class="slds-m-around_medium">
                Hello, {greeting}!
            </div>
        </lightning-card>
</template>

In the above HTML markups, you can able to template based binding syntax {greeting} that is used to bind the properties from the controller.

In the helloworld.js JavaScript file, copy and paste the following code.

import { LightningElement, track } from 'lwc';
export default class HelloWorld extends LightningElement {
    @track greeting = 'World';  
}

@track is used to track the property’s value and re-render a component when it changes.

In the XML file helloWorld.js-meta.xml, copy and paste the following code which will indicate where in the app builder this lightning component is available.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
  <apiVersion>45.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>

Push to a Scratch Org

Now push your changes from the local dev env to Salesforce scratch org. Run the following command from the visual code command palette SFDX: Push Source to Default Scratch Org.

Add Component to App in Lightning Experience

Select SFDX: Open Default Org command from the command palette to open the scratch org
Add the helloworld Lightning web component form to the contact record page and save changes.

That’s it. Now you have successfully created your first lightning web component. But just let us make some more changes to a lightning web component. Let’s call the simple hello world message from the server side apex class

Create Apex Class

Now create an apex in SFDX env . To create an apex class from the SFDX run the this SFDX :Create Apex Class command from command palette.

Here is the simple apex class “HelloWorld”

public with sharing class HelloWorld {
@AuraEnabled(cacheable=true)
    public static String sayHello() {
        System.debug('Wokring');
        return 'Hello world from controller';
    }
}

Change your helloworld.html code as shown below

<template>
        <lightning-card title="Apex WireMethod To Property" icon-name="custom:custom14">
            <div class="slds-m-around_medium">
                Hello SF Name -, {greetings.data}!
            </div>
        </lightning-card>
 </template>

Change your helloworld.js code as shown below

import { LightningElement, wire, track  } from 'lwc';
import sayHello from '@salesforce/apex/HelloWorld.sayHello';

export default class Hello extends LightningElement {
    @wire(sayHello) greetings;

}

In the above code, you have to import the apex class in the JavaScript controller and use the @wire property to bind the apex method.

Now push the changes from local development to scratch org .to push the changes from the SFDX local to scratch org run the SFDX: Push Source to Default Scratch Org command from the command platter.