Creating a salesforce lightning web component in visual studio code

import { LightningElement, track } from 'lwc';

export default class HelloLWC extends LightningElement {
    //default values
    @track typedValue = '';
    salutationOptions = [
        {'label': 'None', 'value': 'None'},
        {'label': 'Mr.', 'value': 'Mr.'},
        {'label': 'Ms.', 'value': 'Ms.'},
        {'label': 'Mrs.', 'value': 'Mrs.'},
        {'label': 'Dr.', 'value': 'Dr.'},
        {'label': 'Prof.', 'value': 'Prof.'},
    ];

    //method on click of button
    handleClick(){
        const txtInput = this.template.querySelector('.txtInput');//fetch the input value
        this.typedValue = txtInput.value;//show the value
    }
}

Integrating VSCode with Salesforce 

1. 1. Create sfdx project in vscode
      1. 1. Launch VSCode > cmd+ shift+P > SFDX:Create Project with Manifest > Enter project Name > Enter
         2. Skelton sfdx prject is created

      

   2. Right click on manifest file > package.xml > SFDX: Reterieve source from Org
   3. Create lightning web component skeleton 
      1. 1. cmd+shift+p > SFDX:Create Lightning Web Component > type name of LWC (say helloLWC) > enter (select the default creation path)

      

   4. Add default LWC component from LWC library
      1. Take code for input box 
      2. Take code for button
      3. Add the below code into helloLWC.html

         <template>
             <div>
                 My First salesforce LWC in VSCode
             </div>
             <section>
                 <h2 class="slds-text-heading_medium slds-p-top_large">
                     Considerations
                 </h2>
                 <ul class="slds-list_dotted">
                     <li class="slds-m-horizontal_xx-small slds-m-bottom_x-small">Have fun</li>
                     <li class="slds-m-horizontal_xx-small slds-m-bottom_x-small">Learn LWC</li>
                     <li class="slds-m-horizontal_xx-small slds-m-bottom_x-small">Share your learning</li>
                 </ul>
                 <div>
                     <lightning-input class='txtInput' label="TypeHere..." value={typedValue}></lightning-input>
                     <lightning-button variant="brand" label="Submit" onclick={handleClick}>
                     </lightning-button>
                 </div>
         
             </section>
             <div>
                 <p>{typedValue}!</p>
             </div>
         </template>

      4. Add the below code into helloLWC.js

         import { LightningElement, track } from 'lwc';
         export default class HelloWorld extends LightningElement {
             @track greeting = 'World';
             changeHandler(event) {
                 this.greeting = event.target.value;
             }
         }

      5. Add configuration settings, like where to show this component, inside helloLWC.meta.xml file. Read more about meta.xml file in LWC

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

   5. Deploy code to sandbox
      1. Right click lwc > SFDX: Deploy Source to Org
   6. Add Component to App in Lightning Experience
      1. Inside your sandbox, App launcher > Sales > gear icon > Edit Page > search
      2. Drag the given component to canvas
      3. Save and enjoy the latest added LWC component in sales app

Keep learning and keep sharing