Create Your First Lightning Web Component – Stopwatch App

Objective
Create a basic Lightning Web Component
Deploy to Scratch Org

In this Unit, we will be creating a simple stopwatch app and will be deploying it to scratch org.

Note: This app will give you the idea about Lightning Web Components. This unit will not cover the detailed explanation of the Lightning Web Components. We will cover those parts in the next units.

App Description:
Stopwatch app will have two buttons to make the app.
Start/Stop: These buttons will start the timer and stop the timer.
Reset: This button will reset the timer value.

Create Lightning Web Component Bundle:
1. Open Visual Studio Code.
2. Press Command+Shift+P (Mac), Ctrl+Shift+P( Windows)
3. Here type SFDX: Create Lightning Web Component
4. It will ask for the desired directory, Just press enter
5. Give the name to your Lightning Web Component as Stopwatch and press enter.
6. This will create a folder structure for the stopwatch.

Code:
Copy the below code and put in the respected files.

Deploy the Code to Scratch Org:
Open Visual Studio Code’s Integrated Terminal.
Type below command and hit the enter.
sfdx force:source:push

You will see the result like this:

Add Lightning Web Component to Lightning Home Layout:
1. Open any app in lightning and go to the home tab.
2. Click on Gear Icon (Top-Right) and then click on Edit Page.
3. Here in the left side, Scroll down to Custom section.
4. Drag Stopwatch component to the home layout.
5. Click on Save and Activate.
6. After successful activation. Go back to the Home tab.

Nice, You have just created a stopwatch in lightning Web component.

In next units, We will learn about lightning Web component in a little bit deep.

Read more blogs on Lightning Web Components here…