Creating a salesforce lightning web component in visual studio code – User friendly Tech help

import { LightningElement, track } from 'lwc';nnexport default class HelloLWC extends LightningElement {n    //default valuesn    @track typedValue = '';n    salutationOptions = [n        {'label': 'None', 'value': 'None'},n        {'label': 'Mr.', 'value': 'Mr.'},n        {'label': 'Ms.', 'value': 'Ms.'},n        {'label': 'Mrs.', 'value': 'Mrs.'},n        {'label': 'Dr.', 'value': 'Dr.'},n        {'label': 'Prof.', 'value': 'Prof.'},n    ];nn    //method on click of buttonn    handleClick(){n        const txtInput = this.template.querySelector('.txtInput');//fetch the input valuen        this.typedValue = txtInput.value;//show the valuen    }n}

n

Integrating VSCode with Salesforce 

n

n
1. n
   n
   1. Create sfdx project in vscoden
      n
      1. n
         n
         1. Launch VSCode > cmd+ shift+P > SFDX:Create Project with Manifest > Enter project Name > Enter

         n

         2. Skelton sfdx prject is created

         n

         n

      n

      n

      

      n

   n

   2. Right click on manifest file > package.xml > SFDX: Reterieve source from Org

   n

   3. Create lightning web component skeleton n
      n
      1. n
         n
         1. cmd+shift+p > SFDX:Create Lightning Web Component > type name of LWC (say helloLWC) > enter (select the default creation path)

         n

         n

      n

      n

      

      n

   n

   4. Add default LWC component from LWC libraryn
      n
      1. Take code for input box 

      n

      2. Take code for button

      n

      3. Add the below code into helloLWC.htmln

         n    n        My First salesforce LWC in VSCoden    n    n        

         n

         Considerations

         n

         n        

         n

         n
         • Have fun

         n

         • Learn LWC

         n

         • Share your learning

         n

         n

         n        n            n            n            n        nn    n    n        
         {typedValue}!n    n

      n

      4. Add the below code into helloLWC.jsn

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

      n

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

         nn    45.0n      truen  n    lightning__AppPagen    lightning__RecordPagen    lightning__HomePagen  n

      n

      n

   n

   5. Deploy code to sandboxn
      n
      1. Right click lwc > SFDX: Deploy Source to Org

      n

      n

   n

   6. Add Component to App in Lightning Experiencen
      n
      1. Inside your sandbox, App launcher > Sales > gear icon > Edit Page > search

      n

      2. Drag the given component to canvas

      n

      3. Save and enjoy the latest added LWC component in sales app

      n

      n

   n

   n

n

n

n

Keep learning and keep sharing

n

Matteo