It should be show result like “salesforcedx 45.0.12 (pre-release)” it.

- Now, we are ready to create new lightning web component. First of all, we need to create new “Developer Edition Pre-Release Org”. Here is the creation link:

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

- Now, we need to create a new “Salesforce DX” project in our local machine. Here are the steps:

SFDX Project Creation Steps :

1. In Visual Studio code, press Command + Shift + P on a Mac OR Ctrl + Shift + P on Windows.
2. Type SFDX: Create Project.
3. Enter MyLightningWebComponent as the project name, press Enter.
4. Select a folder to store the project.
5. Click Create Project.

- Now, we need to follow required steps to connect “Visual Studio” project with our Salesforce org.

1. In Visual Studio code, press Command + Shift + P on a Mac OR Ctrl + Shift + P on Windows.
2. SFDX: Authorize a Dev Hub: This step is used for login our pre-release Devhub Org.
3. SFDX: Create a Default Scratch Org: We need to create new scratch org for pushing our changes from our local machine into scratch org.
4. SFDX: Create Lightning Web Component: Now we need to create new lightning web component under “lwc” folder.

Now we will create a Lightning Web Component named ‘contactSearch’

Here’s the code:-

contactSearch.html

1:  <template>  
2:    <lightning-card icon-name="custom:custom57">  
3:      <div slot="title">  
4:        <lightning-layout vertical-align="center">  
5:          <lightning-layout-item>  
6:            Contact Search  
7:          </lightning-layout-item>  
8:          <lightning-layout-item padding="around-small">  
9:            <c-nav-to-new-record></c-nav-to-new-record>  
10:          </lightning-layout-item>  
11:        </lightning-layout>  
12:      </div>  
13:      <div class="slds-m-around_medium">  
14:        <lightning-input type="search" onchange={handleKeyChange} class="slds-m-bottom_small" 
15:           label="Search"></lightning-input>  
16:        <template if:true={contacts}>  
17:          <template for:each={contacts} for:item="contact">  
18:            <c-contact-tile key={contact.Id} contact={contact}></c-contact-tile>  
19:          </template>  
20:        </template>  
21:      </div>  
22:    </lightning-card>  
23:  </template>  

contactSearch.css

1:  lightning-input,  
2:  c-contact-tile {  
3:    position: relative;    
4:    border-radius: 4px;  
5:    display: block;  
6:    padding: 2px;  
7:  }  
8:  c-contact-tile {  
9:    margin: 1px 0;  
10:  }  
11:  lightning-input:before,  
12:  c-contact-tile:before {  
13:    color: #dddbda;  
14:    position: absolute;  
15:    top: -9px;  
16:    left: 4px;  
17:    background-color: #ffffff;  
18:    padding: 0 4px;  
19:  }  

contactSearch.js

1:  import { LightningElement, track } from 'lwc';  
2:  import findContacts from '@salesforce/apex/ContactController.findContacts';  
3:  /** The delay used when debouncing event handlers before invoking Apex. */  
4:  const DELAY = 350;  
5:  export default class ContactSearch extends LightningElement {  
6:    @track contacts;  
7:    @track error;  
8:    handleKeyChange(event) {  
9:      // Debouncing this method: Do not actually invoke the Apex call as long as this function is  
10:      // being called within a delay of DELAY. This is to avoid a very large number of Apex method calls.  
11:      window.clearTimeout(this.delayTimeout);  
12:      const searchKey = event.target.value;  
13:      // eslint-disable-next-line @lwc/lwc/no-async-operation  
14:      this.delayTimeout = setTimeout(() => {  
15:        findContacts({ searchKey })  
16:          .then(result => {  
17:            this.contacts = result;  
18:            this.error = undefined;  
19:          })  
20:          .catch(error => {  
21:            this.error = error;  
22:            this.contacts = undefined;  
23:          });  
24:      }, DELAY);  
25:    }  
26:  }  

contactSearch.js-meta.xml:

1:  <?xml version="1.0" encoding="UTF-8"?>  
2:  <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">  
3:    <apiVersion>45.0</apiVersion>  
4:    <isExposed>true</isExposed>  
5:    <targets>  
6:      <target>lightning__AppPage</target>  
7:      <target>lightning__RecordPage</target>  
8:      <target>lightning__HomePage</target>  
9:    </targets>  
10:  </LightningComponentBundle>  

Now we will create a Lightning Web Component named ‘contactTile’
contactTile.html :

1:  <template>  
2:    <lightning-layout vertical-align="center">  
3:      <lightning-layout-item>  
4:        <img src={contact.Picture__c} alt="Profile photo">  
5:      </lightning-layout-item>  
6:      <lightning-layout-item padding="around-small">  
7:        <a onclick={navigateToView}>{contact.Name}</a></p>  
8:        <p>{contact.Title}</p>  
9:        <p>  
10:          <lightning-formatted-phone value={contact.Phone}></lightning-formatted-phone>  
11:        </p>  
12:      </lightning-layout-item>  
13:    </lightning-layout>  
14:  </template>  

contactTile.css:

1:  img {  
2:    width: 60px;  
3:    height: 60px;  
4:    border-radius: 50%;  
5:  }  

contactTile.js

1:  import { LightningElement, api } from 'lwc';  
2:  import { NavigationMixin } from 'lightning/navigation';  
3:  //import getSingleContact from '@salesforce/apex/ContactController.getSingleContact';  
4:  export default class ContactTile extends NavigationMixin(LightningElement) {  
5:    @api contact;  
6:   // @wire(getSingleContact) contact;   
7:    navigateToView() {     
8:     this[NavigationMixin.Navigate]({  
9:      type: "standard__recordPage",  
10:        attributes: {  
11:          objectApiName: "Contact",  
12:          actionName: "view",  
13:          recordId: this.contact.Id,  
14:        },  
15:      });  
16:   }    
17:  }  

contactTile.js-meta.xml:

1:  <?xml version="1.0" encoding="UTF-8"?>  
2:  <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">  
3:    <apiVersion>45.0</apiVersion>  
4:    <isExposed>false</isExposed>  
5:    <targets>  
6:      <target>lightning__AppPage</target>  
7:      <target>lightning__RecordPage</target>  
8:      <target>lightning__HomePage</target>  
9:    </targets>  
10:  </LightningComponentBundle>  

Now we will create a Lightning Web Component named ‘navToNewRecord’
navToNewRecord.html:

1:  <template>  
2:      <lightning-button label="New Contact" variant="brand" class="slds-m-around_medium" 
3:      onclick={navigateToNewContact} ></lightning-button>  
4:  </template>  

navToNewRecord.js:

1:  import { LightningElement } from 'lwc';  
2:  import { NavigationMixin } from 'lightning/navigation';  
3:  export default class NavToNewRecord extends NavigationMixin(LightningElement) {  
4:    navigateToNewContact() {  
5:      this[NavigationMixin.Navigate]({  
6:        type: 'standard__objectPage',  
7:        attributes: {  
8:          objectApiName: 'Contact',  
9:          actionName: 'new',  
10:        },  
11:      });  
12:    }  
13:  }  

navToNewRecord.js-meta.xml

1:  <?xml version="1.0" encoding="UTF-8"?>  
2:  <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="navToNewRecord">  
3:    <apiVersion>45.0</apiVersion>  
4:    <isExposed>true</isExposed>  
5:    <targets>  
6:      <target>lightning__AppPage</target>  
7:      <target>lightning__RecordPage</target>  
8:      <target>lightning__HomePage</target>  
9:    </targets>  
10:  </LightningComponentBundle>  

Here’s the GitHub link for further files which are required before pushing to scratch org for this tutorial
https://github.com/jaiaswani10/lightning-web-components
Files which are required:-
Picture__c.field-meta.xml file for creating a custom field
lwc.permissionset-meta.xml file for assigning permission
‘data’ named the folder for loading data

Push to a Scratch Org
Type :SFDX: Push Source to Default Scratch Org by using Ctrl + Shift + P  OrType in terminal
sfdx force:source:push [-u<Username>]

Assign the lwc permission set to the default user:
sfdx force:user:permset:assign -n lwc

Load sample data:
sfdx force:data:tree:import --plan ./data/data-plan.json

Add Component to App in Lightning Experience

1. Type SFDX: Open Default Org.
2. Click the app launcher icon App Launcher to open the App Launcher.
3. Select the Sales app.
4. Click the gear icon Setup Gear to reveal the Setup menu, then select Edit Page.
5. Drag the contactSearch Lightning web component from the list of custom components to the top of the Page Canvas.