SFDX + Visual Studio (Software Setup) + Create your first LWC component.

Please check my previous blog post (SFDX Setup Guide.) to setup SFDX,
http://sfdccodepractices.blogspot.com/2019/01/sfdx-setup-guide.html

Once you install SFDXCLI, then download Visual Studio (link: https://code.visualstudio.com/) and install Visual Studio.
Once VS is installed, open the IDE and click on "Extensions" link.
Then search for "Salesforce Extension Pack" and install the plugin.

Once "Salesforce Extension Pack" is installed successfully, then your software' configuration for your first LWC program is ready and it's time to implement your first Lightning Web Component.

1. Click => Ctrl + Shift + P  and it will open a Command Palette.

2. Type "Create Project" in Command Palette search box and select "Create Project" option and then enter.

3. Then it will ask for your project name. Enter your project name like "MyFirstLWCProject" and then click and it will redirect to your local directory, where you want to create your project.

4. Now you will see a project structure has been created and it is displayed in your EXPLORER panel. Number of files and folders will be created here, so don't panic. We will discussed these later. Just focus on your first LWC component.

5. Now select your project "MyFirstLWCProject" and again click [Ctrl + Shift + P] and then type "Create Lightning Web Component" in Command Palette and select the "Create Lightning Web Component".

6. Then system will ask for "enter desire file name" and then type your file name like "myFirstLightningWebComponent" and enter.

7. Then system will ask for "enter desire directory". Select the default one (force-app/main/default/lwc) or just press enter.

8. So, under force-app/main/default/lwc --> a new folder will be created named as "myFirstLightningWebComponent" and also under this folder 3 files will be created as,

• myFirstLightningWebComponent.html ==> Here you write your markup.
• myFirstLightningWebComponent.js ==> Here you implement your client side business logic.
• myFirstLightningWebComponent.js-meta.xml ==> Here you configure your component setup, like where you want to expose your component like under record page or under app page etc. 

You can check the files in your local directory or in explorer. If it is not reflected in explorer, then just refresh the explorer.

9. Click on myFirstLightningWebComponent.js-meta.xml and update the content as below,

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

    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>   
    </targets>
</LightningComponentBundle>

10. Now click on myFirstLightningWebComponent.html file and update it as below,

<template>
    <lightning-card title="Welcome To LWC World">
        <lightning-layout>
            <lightning-layout-item>
                This is my first Lightning Web Component.
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
    
</template>

11. Currently for simplicity we are not touching myFirstLightningWebComponent.js file.

12. Now its time to deploy your LWC component in your ORG. So, first select your project and then click  [Ctrl + Shift + P] and finally in command pallet type "Authorize an Org" and select "Authorize an Org" and then just enter twice (keep the section default as it is.).
It will redirect to login.salefoce.com. Enter your Org credentials. Now your component is ready to deploy in this login Org.

13. Now right click on your "myFirstLightningWebComponent" folder from explorers and then click on "SFDX:Deploy Source to Org" and if every thing is OK then your component will be deployed to your authorise Org.

14. Once deployed successfully, then you can check your lightning component in your ORG.

15. Go to Lighting App Builder and then create a new App Page (MyFirstLwc). Drag your "myFirstLightningWebComponent" in to "MyFirstLwc". Than save and activate it.

13. Open App Launcher and click "MyFirstLwc" and it will show your LWC component.

14. Now make this example little complex. Display some message coming from myFirstLightningWebComponent.js file. So, add a variable under myFirstLightningWebComponent.js and then access it from myFirstLightningWebComponent.html.

myFirstLightningWebComponent.js

import { LightningElement } from 'lwc';

export default class MyFirstLightningWebComponent extends LightningElement {
    message = "Enjoy Your Learning.";
}

myFirstLightningWebComponent.html

<template>
    <lightning-card title="Welcome To LWC World">
        <lightning-layout>
            <lightning-layout-item>
                This is my first Lightning Web Component.
                {message}
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
    
</template>

15. Deploy it again.

16. Run the program in browser and it will show as below output screen,