IT & Software
Other
Salesforce Lightning
Lightning Web Component Development
4.3 (725 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
7,292 students enrolled

Lightning Web Component Development

A step by step guide to be a Lightning Champion in no time. Concept to implementation
4.3 (725 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
7,292 students enrolled
Created by Amit Singh
Last updated 6/2020
English
Preview this course
Lightning Web Component Development
Current price: $12.99 Original price: $19.99 Discount: 35% off
7 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 14 hours on-demand video
  • 2 articles
  • 32 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • What is Lightning Web Component?
  • Lightning Web Component Testing
  • Lightning Web Component Framework
  • Lightning Web Component Development
  • LWC & Aura Communication
Requirements
  • Basic Understanding of SOQL(Salesforce Object Query Language)
  • Basic understanding of Apex Development
  • Basic Understanding of JavaScript & HTML5 Web Statdards
Description

Lightning Web Component is a new methodology to develop Salesforce Lightning Components. This course is designed to help you understand three basic things:

  • What are Lightning Web Components?

  • Why Salesforce has introduced Lightning web component?

  • How can you develop Lightning web components?

  • What are all the best practices to develop the lightning web components?

  • What are various patterns anti patterns to develop the lightning component?

  • How to use Lightning Web Component in various places?

In this course, we will mainly focus on the Lightning Web Component Development where we will be providing the examples in each section which we prefer as mini project so that you can be master of the Lightning web component.

As we know that LWC is the new concept and still new to the market and this course will make you the master of the Salesforce Web Components and make you a valuable salesforce gem which will give you the boost to your career.

If you are thinking that you are ground level in web component or salesforce then no need to worry I am here to help you which will make you master of lightning web component.

Who this course is for:
  • All Salesforce Developers
  • Experienced Salesforce Admins
  • Salesforce UI & Salesforce UX developer
  • Professional who wanted to migrate Aura Component into LWC Components
Featured review
Deeksha Satish
Deeksha Satish ( 108 courses, 35 reviews )
7 months ago
Superb course! Very well explains all the concepts in detail. It is best if you split the course into two days. Visit the first half of videos on Day 1 and rest on the next day. Learnt a lot from the project as well. Definitely recommended for upskillers and freshers.
Course content
Expand all 83 lectures 14:04:34
+ – Introduction
2 lectures 02:00

In this lecture, you will get the course overview of what you are going to learn and what are some basic prerequisite for the course.

Introduction to Course
Preview 01:12
Introduction to Author
Preview 00:48
+ – Setup Environment & Getting Started
8 lectures 01:17:19

In this video we will see why salesforce introduced lightning web component as salesforce already have a way to develop lightning component

Why Salesforce Introduced LWC?
Preview 18:37

In this session students will get to know how to get the lifetime free salesforce free developer edition org where and how to enable the my domain in salesforce environment. As My Domain is the pre-requisite to work with lightning component.

Signup for your first free developer edition org
02:59

In this session, students will get to know how to setup VS code to start developing LWC and how Salesforce CLI is the important for developing the LWC from vs code.

Setup Visual Studio code & Salesforce CLI
04:14

In this session, students will get to know how to authorise salesforce org as devhub from VS code and enable devhub in Salesforce Environment.

Authorise your salesforce environment from VS code for 2 different purpose
06:26

In this lecture, you will learn all about scratch org and how to setup that scratch org using configuration file.

Setup Scratch ORG with DevHub Org
16:04

In this session, student will get to know what are all salesforce dx commands that will be helpful while doing the development through out the sessions.

Useful salesforce dx commands
13:50

In this lecture, you will learn all the fundamentals of Web Component that we will be using in the course

Web Component Fundamentals(HTML 5 vanilla components)
11:41

In this lecture, you will get to know what is the best resource to learn LWC and Aura Components.

Overview of Lightning Component Library
03:28
As you are at the end of the section, in this assignment you need to do the following steps if you have not done already
Make Salesforce Environment Ready
2 questions
Test Your Knowledge
3 questions
+ – Lightning Web Component basic Development
9 lectures 01:24:51

In this lecture, you will get to know the structure of Lightning Web Components what all files you can have inside a single component.

Lightning Web Component Bundle
07:04

Create your First Web Component!

Hello world Web Component
11:00

Create a beautiful component using Style file of web component

Apply Styling(CSS) to your web component
08:35

In this lecture, you will learn how to create variables in JavaScript and use them in Web Component

Data Binding from JavaScript Class to Web Component
05:09

In this lecture, you will learn some basic overview of html events and how to call JavaScript method from Web Component

Basic Overview of Html Events
12:27

In this lecture, you will be able to learn how to use if-else in Web Component and how if-else are saviour

Conditional Rendering - use if else in your web component with tom & jerry
11:31

In this lecture, you will be able to display a list of records in web component using iteration or for:each

Display your list in lightning web component (looping & iteration)
09:30

Develop a Simple Calculator with addition & subtraction

LAB - Develop a Simple Calculator ( Addition & Subtraction )
13:38

Modify the Calculator to add extra functionality

LAB - Develop a Simple Calculator ( Multiple & Devision)
05:57

In this quiz you will be able to test your knowledge on the topics that you have learned in the section

Test Your Knowledge
4 questions
+ – JavaScript Fundamentals
6 lectures 25:37

In this lecture, you will be able to get what all Decorators are available in Decorators in Lightning Web Components and how to use them

Decorators in Lightning Web Component
03:54

In this lecture, you will be able to get to know & use a private property in javaScript

Private Property (Non - Reactive)
09:13

Use @track decorators to create a property in JS

Private Property (Reactive @track decorator)
04:07

use @api decorators and learn about what all we can do with @api decorators

Public Property (@api decorator)
03:30

  • Use getter property if you want to modify the property before you use in template.

  • Use getter property when you do not want to create a variable

Getter Property
04:26

Learn what are boolean objects and how & when to use them in web components

JavaScript Boolean Property
00:27
Modify the Calculator component which we developed as part of our LAB work in our previous lectures.
Modify Calculator Component
2 questions

In this quiz, you will be able to test your knowledge on the concepts that you have learned.

Knowledge Test on JavaScript Fundamentals
3 questions
+ – Web Component Lifecycle Hooks & Compositions
6 lectures 01:14:32

  1. In this lecture, you will learn how web component lifecycle works.

  2. What is the sequence of rendering web components

  3. What are the callback methods

Web component Lifecycle hooks
16:02

In this lecture, you will learn how to call one web component into other component & how to call web component inside aura components

Composition of One Component inside other component
12:02

In this lecture, We will learn

  • What are slots in Lightning Web Components

  • When to use slots in Lightning Web Components

Note: - lightning__tab target is only available after Winter 20 Release. I was able to use because I was using pre-release ORG of Winter 20.

Using slots into web components
07:32

In this lecture, you will see what is the significance of shadow DOM and why it is very important in modern web standards

How shadow DOM works in Web components(Real time demo)
07:27

  1. In this lecture, you will get to know all about the configuration file.

  2. How to expose variables to Lightning App builder

  3. How to specify for which object an LWC can be accessed.

Metadata file Explanation
19:28

In this lecture, we will learn how to display contact list using Parent-Child Web components.

  • Parent component having the list of contacts.

  • Child component displaying the contact information.

LAB - Create a Contact List component using Composition
12:01

In this quiz we will test the knowledge what we lean in the section.

Test your knowledge
4 questions
+ – Communication using events
8 lectures 01:22:45

In this lecture, you will learn what are the various scenarios in Lightning Web Component where you can use Events.

  • Browser Event

  • Custom Event

When To use Events in LWC
02:45

In this lecture, you will learn how to create a very simple event and handle in Parent component

How to create a simple event?
08:05

In this lecture, you will learn how to pass single/multiple data from child to parent component.

How to pass data from Child Component to Parent Component
10:42

In this lecture, you will learn what is bubbling event and when to use it

Bubbling Event
10:51

In this lecture, we will learn how we can call the child component method from parent component JS class using @api functions.

  1. Call Child Component method without params

  2. Call Child Component method with params

Call Child Component Method using Parent Component
11:43

In this lecture, you will get to know how to communicate between aura components and web components.

  1. Handle Event raised by LWC

  2. Call LWC Method from AURA component

Communicate between Aura Component & LWC
11:22

As a best practise we always need to put the common code in shared JS file. So in this lecture, you will learn how to share the code between components.

  1. Create a Shared File inside the same LWC Folder Structure

  2. Create a Separate component and put the common code inside that component.

Share JavaScript Code between components
14:53

In this lecture, you will be creating a Quick Case Component which we will be using in Contact & Account Object Record Page.

  1. Create the UI for QuickCase Component.

  2. Add the Event Listener for each input to capture the input data.

LAB - Quick Case Component Structure
12:24

To test the knowledge about what you have learned

Test Your Knowledge
7 questions
+ – Working with Salesforce Data
14 lectures 02:34:38

In this lecture, you will be able to learn what is Lightning DataService and how does data service work in salesforce. What are benefits of LDS. We can do below things with LDS

  • Create Records

  • Edit Records

  • View Records

  • Read-Only Records

Introduction to LDS
02:23

In this lecture, you will get to know how to get the Current Record Id and Object API Name in JavaScript without using a single like of apex code.

  1. @api recordId

  2. @api objectApiName

Get Current Record Id & Object Api Name
04:12

In this lecture, you will get to know how to view record using Lightning Data Service

LDS View Record - RecordViewForm & RecordForm
12:47

In this lecture, you will learn how to edit a record without using Apex Class and what are the benefits of LDS

LDS Edit Record - RecordForm & RecordEditForm
14:13

In this lecture, you will learn how to create a Record using LDS and handle different methods without using apex.

LDS Create Record - Record Form & Record Edit Form
12:16

In this lecture, you will learn how we can call the apex class method using @wire decorators

Call Apex Class Method using @Wire
15:09

In this lecture, you will learn how to pass the parameters in @wire method

How to pass parameters in @wire method
09:10

In this lecture, you will be able to learn how to call an apex class method using button click with or without parameters

Call Apex Class Method using imperative method
10:33

In this, lecture you will get to know all about lightning UI Record API.

  1. get Record

  2. get field value

  3. create record

  4. deleteRecord

Lightning UI Record API
19:43

In this lecture, you will learn the complete objectInfoAPI

  1. getObjectInfo

  2. getPicklistValues

  3. getPicklistValuesByRecordType

Lightning UI Object info API
17:49

In this lecture, you will learn how to create a custom reusable lookup in web component

LAB - Create Custom Lookup Part 1
08:16
LAB - Create Custom Lookup Part 2
09:41
LAB - Create Custom Lookup Part 3
10:33

In this lecture, we will wrap up the the Custom Lookup

LAB - Wrap up the Custom Lookup
07:53
In this assignment, you need to modify the QuickCase Component that we developed in the previous lecture
Modify Quick Case Component
1 question

In this quiz you will be able to test the knowledge what you have learned in the section

Test Your Knowledge
4 questions
+ – Navigation Service & Other Features
6 lectures 56:04

In this lecture, you will learn how to show a toast notification in Web Component

Display Toast Notification
03:10

In this lecture, you will learn how we can expose @api property to be available in Lightning App Builder

Design Attribute in LWC
11:55

In this lecture, you will learn how to navigate to different url using lWC

Navigation in Salesforce
15:29

In this lecture, you will be able to see how to we can use Web Component in VF page without using Aura Component as Wrapper.

  1. Lightning Out

Use Web Component in VF Page
10:40

In this lecture, you will be able to learn how to get Custom Labels in Web Component

Work with Custom Labels in Lightning Web Components
05:25

In this lecture, we will learn how to use Static Resource in LWC and How to load third-party libraries in Lightning Web Component.

Work with Static Resource in Lightning Web Component
09:25
+ – Testing Lightning Web Components
5 lectures 01:13:45

Install the dependency of Jest which is required to run Test Cases for Web Components

Jest Setup
11:32

In this lecture, you will learn how to write unit test for web components

Writing test units for Web Components
24:39

In this lecture, you will learn how to write unit test for @wire method.

  1. Validate @wire parameters

  2. Validate success with at least one record

  3. Validate success response without any record

  4. Validate Error

Writing Unit Test for @wire method with params
17:29

In this lecture, you will learn how to write the unit test for imperative methods.

Writing Unit Test for imperative method with params
12:28

How to debug test files using Google Chrome

Debugging Test Files using Command
07:37
+ – Beer Explorer Project
17 lectures 03:09:33

This lecture is to give you the basic overview of the Project.

Project Overview
03:54

In this lecture, you will learn what all objects are involved on the project and what is the role of each object.

Object files are attached as downloadable resource you can download from there

Create Object Model For Project
03:40

In this lecture,  you will be importing the Beer records into Salesforce. You will get the .csv file with this lecture under resources section.

Import Existing Beer Records into System
04:19

Create a search component which we will use in our component to search the Beer Records.

Create BeerSearch Component
04:12

In this lecture, you will create a component which will be responsible for displaying the details of single beer record.

Create BeerTile Component
07:24

In this lecture, you will create a component which will be responsible for displaying the list of Beer Record using BeerTile Component.

Create BeerList Component
22:32

In this lecture, we will start working on Add to Cart module and will also learn how Add to Cart will work.

Add to Cart Functionality - Part1
16:57

In this lecture, we will learn how to insert the cart items under the cart Id.

Add to Cart Functionality - Part 2
10:26

In this lecture, we will continue with the Add To Cart module

  1. Show Notification to the user when the item is added to Cart

  2. Update the Quantity and Price if item is already present in the cart

  3. Create cart Detail Component

Add to cart Functionality - Part 3
20:38

In this lecture, you will learn about how to navigate to Cart Detail tab and display the Cart Items Information.

Cart Detail Component
15:41

In this lecture, you will learn how to remove the items from the cart.

Cart Detail Component Part 2
13:42

In this lecture, you will learn how to apply a discount coupon on the complete cart total amount if the coupon is valid.

Apply Discount to the Cart Items
08:34

In this lecture, you will work on Address module so that user can select/add where they want to deliver their order.

Select Shipping Address
20:15

In this lecture, you will work on Place Order Functionality.

Place Order Functionality - Part 1
11:59

In this lecture, you will be creating the Order Items under the Created Order & Also closing the cart

Place Order Functionality - Part 2
08:30

In this lecture, you will work on Order Detail Component which will display the Order Information to the User.

Order Detail Component
14:01

In this lecture, we will have a quick overview of the Project that we developed till now.

Project Wrap-up
02:49