Introduction to Lightning Web Components(LWC)

This post explains the
1. What is Lighting Web Component(LWC)?
2. How to Create a Lightning Web Component with Non-scratch org.

What is Lighting Web Component(LWC)?
1. LWC is a new Programming Language modal for building a Lightning Components
2. LWC uses modern web programming standards, shadow DOM, modules and ECMAScript7.
3. LWC coexist and interoperate with the original Aura programming model, and delivers unparalleled performance.
How to Create a Lightning Web Component?
You cannot create LWC directly from your developer console. you need to SFDX to create your lightning web component.

Step 1: Steps to set up an SFDX with vs code

1. Download and Install Salesforce CLI
2. Download vs code From this link and install.
Note: Once install the Salesforce CLI You can verify using below command
sfdx --version

Installing Salesforce Extensions in vs code
1. Open vs code install Salesforce extension pack

2. Install Lightning Web Components Extension

Step 2: Signup to pre-release org

Sign up for a pre-release Developer Edition Org using below link

https://www.salesforce.com/form/signup/prerelease-spring19/

Note: Once you create the Pre-release developer org add my domain for the Org otherwise custom developed components are not visible in the app builder

Step 3: Upgrade Pre-Release version of Salesforce CLI

Use below command to upgrade the Pre-release version of Salesforce CLI
sfdx plugins:install salesforcedx@pre-release

Step 4: Creating the SalesforceDx Project

Go to your vs code editor

Press "CTRL + SHIFT + P" then select SFDX:Create Project with Manifest

Enter project Name and Select Folder

Step 5: Authorize an org

Press "CTRL + SHIFT + P" then select SFDX: Authorize an Org

this command opens your default browser then login to your pre-release developer org

once logged in to your org you may close your browser

Step 6: Creating Lightning Web Components

Press "CTRL + SHIFT + P" then select SFDX: Create Lightning Web Component

Then Select Folder where you want to save your LWC component

Then give your component name

verify component under lwc folder

Example

LWCDemoComponent.html

<template>
    <lightning-card title="Contact" icon-name="standard:contact">

        <lightning-record-form object-api-name={objectApiName} record-id={recordId} 
                               fields={fields}></lightning-record-form>

    </lightning-card>
</template>

LWCDemoComponent.js

import { LightningElement , api, track} from 'lwc';

export default class LWBDemoComponent extends LightningElement {
    @api recordId;
    @api objectApiName;
    @track fields = ['Name', 'Title', 'Phone', 'Email'];
}

LWCDemoComponent.js-meta.xml

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

Step 7: Deploy your component in Org

once you complete the code, go to your lwc folder then right click on the component folder
select SFDX: Deploy Source to Org

go to contact record page editor you can verify your components

That's it

Resources

Developer blog

Trailhead Link

Let us know if you have any queries

Happy Learning!!!