Introduction

Lightning Web Components is a new programming model for building Lightning components. It uses web standards breakthroughs, can coexist and interoperate with the Aura programming model, and delivers unparalleled performance. To create and develop Lightning Web Components and use their powerful features and performance benefits, you need to set up Salesforce DX. For this Quick Start, you also use Visual Studio Code, which is the recommended code editor for developing on the Salesforce platform. Once your developer environment is ready, you learn how to write a simple Lightning web component and add it to a page in Lightning Experience.

The Salesforce Developer Experience (DX) is a set of tools that streamlines the entire development life cycle. It improves team development and collaboration, facilitates automated testing and continuous integration, and makes the release cycle more efficient and agile.

Install the Command Line Interface (CLI)

Use the Salesforce CLI to control the full application life cycle of your Salesforce apps. With it you can easily create environments for development and testing, synchronize source code between your orgs and VCS, and execute tests. 

1. Install the CLI using the links below.

Operating System	Link to Installer
macOS	https://sfdc.co/sfdx_cli_osxRight-click the application you just downloaded and click Open. If you see a warning, click Open.
Windows 32-bit	https://sfdc.co/sfdx_cli_winIt may be necessary to update your Class Path with the bin directory if you are not the only account on your machine.
Windows 64-bit	https://sfdc.co/sfdx_cli_win64It may be necessary to update your Class Path with the bin directory if you are not the only account on your machine.
Debian/Ubuntu 64	https://sfdc.co/sfdx_cli_linuxDownload the archive from one of the URLs in the manifest, extract the archive, then run the ./install script.
Debian/Ubuntu x86	https://sfdc.co/sfdx_cli_linux_x86Download the archive from one of the URLs in the manifest, extract the archive, then run the ./install script.

2. Let’s make sure the CLI is properly installed and you know how to access online help for the commands. In a command window, enter sfdx.

You see something like this:

Salesforce CLI

VERSION

  sfdx-cli/7.36.0-sfdx-cli/7.36.0-b1c4e9c7c8 darwin-x64 node-v10.15.3

USAGE

  $ sfdx [COMMAND]

COMMANDS

  commands  list all the commands

  force     tools for the Salesforce developer

In our next step, we set up our local development environment with Visual Studio Code.

Set Up Visual Studio Code

Install Salesforce Extensions for Visual Studio Code

Visual Studio Code is the go-to code editor for Salesforce developers. It’s free, open-source, and available for Windows, Linux, and macOS. This editor has easy-to-install extensions for syntax highlighting, code completion, and more.

In this project, we install Visual Studio Code and the recommended Salesforce Extension Pack.

1. Download and install the latest version of Visual Studio Code for your operating system. If you already have Visual Studio Code installed, there’s no need to reinstall it.
2. Launch Visual Studio Code.
3. On the left toolbar, click the Extensions icon Visual Studio Code’s Extension icon. .
4. Search for Salesforce Extension Pack and click Install

Ensure Your Development Environment Is Ready

Now that you’ve installed Visual Studio Code and enabled the necessary extensions, you need to test them out. 

1. In Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS).
2. Enter sfdx to filter for commands provided by the Salesforce Extensions.

As you use more SFDX commands, those commands will show up in the recently used panel.

In the final step, you create your first Lightning web component and add it to your org’s home page.

Create a Hello World Lightning Web Component

Now that you’ve set up your development environment, you can create a simple Lightning web component.

Create a Salesforce DX Project

1. In Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS).
2. Type SFDX.
3. Select SFDX: Create Project.
4. Press Enter to accept the standard option.
5. Enter HelloWorldLightningWebComponent as the project name.
6. Press Enter.
7. Select a folder to store the project.
8. Click Create Project. You should see something like this as your base setup.

Authorize Your Trailhead Playground

1. In Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS).
2. Type SFDX.
3. Select SFDX: Authorize an Org.
4. Press Enter to accept the Project Default login URL option.
5. Press Enter to accept the default alias.

This opens the Salesforce login in a separate browser window.

6. Log in using your Trailhead Playground credentials.
7. If prompted to allow access, click Allow.

8.  After you authenticate in the browser, the CLI remembers your credentials. The success message should look like this:

Create a Lightning Web Component

1. In Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS).
2. Type SFDX.
3. Select SFDX: Create Lightning Web Component. Don’t use SFDX: Create Lightning Component. (This creates an Aura component.)
4. Enter helloWorld for the name of the new component.
5. Press Enter to accept the default force-app/main/default/lwc.
6. Press Enter.
7. View the newly created files in Visual Studio Code.

8. In the HTML file, helloWorld.html, copy and paste the following code.

<template>

  <lightning-card title=”HelloWorld” icon-name=”custom:custom14″>

    <div class=”slds-m-around_medium”>

      <p>Hello, {greeting}!</p>

      <lightning-input label=”Name” value={greeting} onchange={changeHandler}></lightning-input>

    </div>

  </lightning-card>

</template>

9. Save the File.
10. In the JavaScript file, helloWorld.js, copy and paste the following code.

import { LightningElement } from ‘lwc’;

export default class HelloWorld extends LightningElement {

  greeting = ‘World’;

  changeHandler(event) {

    this.greeting = event.target.value;

  }

}

11. Save the file.
12. In the XML file helloWorld.js-meta.xml, copy and paste the following code.

<?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>

13. Save the file. 

Deploy to Your Trailhead Playground

1. Right-click the default folder under force-app/main.

2. Click SFDX: Deploy Source to Org.
3. In the Output tab of the integrated terminal, view the results of your deployment. You should have also received a notice that states: SFDX: Deploy Source to Org … ended with exit code 0. This means that the command ran successfully.

Add Component to App in Lightning Experience

1. In Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS).
2. Type SFDX.
3. Select SFDX: Open Default Org.

This opens your Trailhead Playground in a separate browser.

4. From the App Launcher (App Launcher), find and select Sales.
5. Click Setup gear then select Edit Page.
6. Drag the helloWorld Lightning web component from the Custom area of the Lightning Components list to the top of the Page Canvas.

7. Click Save.
8. Click Activate.
9. Click Assign as Org Default.
10. Click Save.
11. Click Save again, then click Back arrow to return to the page.
12. Refresh the page to view your new component.

That’s your first Lightning Web Component. Hooray!!.

Suggested Articles.

For More Examples refer : Automate you Business Process