Lightning Web Component Development
4.6 (1,441 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.
5,959 students enrolled

Lightning Web Component Development

A code by code series to master the development of custom Lightning web components.
4.6 (1,441 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.
5,959 students enrolled
Created by Manish Choudhari
Last updated 5/2020
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 11 hours on-demand video
  • 4 articles
  • 49 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • 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 framework?
  • Lightning Web Component Development
  • LWC and Aura interoperability
  • Testing Lightning Web Components
Course content
Expand all 73 lectures 11:08:42
+ Introduction And Getting Started
8 lectures 40:25
About Your Author

We will start our course with the introduction to Lightning Web Components and why it is introduced by Salesforce.

Preview 10:49
A Note From Author

Download and setup Salesforce CLI and VS Code for LWC Development.

Set Up Development Environment

The course will use SFDX approach to explain LWC hence we need to create a new developer org and set it up as Dev Hub.

Create Developer Org and Setup Dev Hub

The scratch org is a source-driven and disposable deployment of Salesforce code and metadata. Changes from scratch orgs can be merged in one single org known as Dev Hub.

Create Scratch Org

We are going to use Salesforce CLI commands very frequently to create Lightning Web Components, Apex Classes or to push our changes to scratch org. Make yourself familiar with all these commands with this lecture.

Explore Salesforce CLI Commands
+ LWC Fundamentals
10 lectures 01:03:54
Two Paths From Here

In this lecture, you will learn the number of files exist in a component bundle and usage of each file.

Component Bundle

In this lecture, you will create your first Lightning Web Component and deploy it in a Salesforce Org.

Hello World Component

Learn how data binding works in LWC. Make our hello world component dynamic.

Data Binding

In this lecture, you would understand the different ways of applying the CSS to your component.

Applying CSS

In this lecture, you will learn how you can hide or show your markup based on conditions.

Conditional Rendering

In this lecture, you will learn how you can loop over your javascript array properties.

Looping or Iteration

Let's put our fundamentals in practice and develop a simple calculator app.

Project - Simple Calculator - Part 1

In this lecture, we will complete our simple calculator application.

Project - Simple Calculator - Part 2

Salesforce has taken care of all our needs, and has already provided us enough documentation and tools to get started on LWC and Aura. In this video, you will see an overview of component library, the best place to find documentation of LWC and base components.

Bonus - Component Library Overview
+ Javascript Properties
8 lectures 35:13
New Updates

In this lecture, you will learn how to declare a private property and how you can use it inside your html markup.

Private Properties - Non Reactive

In this lecture, you will learn how to make your private properties reactive with @track decorator.

Private Properties - Reactive
Spring'20 Update - All Properties Are Reactive
Spring'20 Update - When To Use Track Decorator

Modify your private property's value with getter and use it inside your markup. Getter can be used to perform some logic on your private properties before you access it inside html template.

Getter Properties

Public properties are the best way to accept values from parent components and make your component more dynamic. USe @api decorator to define public properties.

Public Properties

In this video, you will learn the considerations of using a public boolean property inside your component.

Public Boolean Properties
+ Component Lifecycle & Composition
4 lectures 29:14

In this lecture, you will learn to pass html markup from parent component to child component.

Using Slots

In this lecture, you will learn the usage of public methods and how you can call public methods of child component from the parent component.

Public Methods

Learn why the properties of one component does not affect other components. Shadow DOM is one of the most important feature of lightning web component framework.

Shadow DOM

Learn about different events and their usage which gets fired as part of component lifecycle.

Component Lifecycle
+ Component Communication Using Events
3 lectures 32:09

Communicate between components of same hierarchy using events. Event fired from child component can be handled in child component itself or the parent components in same hierarchy.

Dispatching And Handling Events

Learn how you can communicate between independent components using events with publish and subscribe pattern.

Communication Between Independent Components

You can share the Javascript between components using ECMAScript modules. This is always a good practice to share common code between components as it is easier to maintain the code.

Share Javascript Code
+ Access Salesforce Data
7 lectures 01:05:45

In this lecture, you will learn what the different ways to access Salesforce data with or without the need of Apex Controller.

Working With Salesforce Data - An Overview

In this lecture, you will learn to insert a new record in Salesforce without writing any Apex code using Lightning Data Service.

Lightning Data Service - Create Record

In this lecture, you will learn to view an existing record from Salesforce without writing any Apex code using Lightning Data Service.

Lightning Data Service - View Record

It's even easier than Lightning Data Service to create or view Salesforce records if you use base components like recordEditForm or recordViewForm.

LDS - RecordViewForm and RecordEditForm

RecordForm base component has the power of both recordEditForm and recordViewForm component. It's very simple yet very powerful component to create forms on UI with minimal amount of code.

LDS - RecordForm Base Component

In this lecture, you will to access an @AuraEnabled apex method from Lightning Web Component's wire adapter. The wire adapter provisions the data from apex methods to your component.

Call Apex Method Using Wire Adapter

Wire adapter limits you to access only cacheable Apex methods, but you can access non-cacheable methods by making a call imperatively.

Call Apex Method Imperatively
+ Navigation Service and Other Features
6 lectures 36:34

In this lecture, you will learn how to display a toast notification in Lightning Web Component.

Display A Toast Notification

To make pure generic components, sometime you need the help of framework. LWC framework can automatically supply you the record id and object name of currently viewing record. Learn the trick in this video.

Get Record Id and Object Name From Framework

The meta file of a Lightning Web Component bundle is one of the most important file. It holds all the meta properties of your component, you can use this to define different properties for different lightning container or make your component more generic using properties.

Meta File Configurations

In this lecture, you will learn what Lightning Navigation service is, navigation service methods and what are the different page types you can navigate to.

Lightning Navigation Service Overview

Let's use our knowledge of Navigation service to create different page types and navigate to those.

Examples of Lightning Navigation Service

You can use 3rd party libraries in your component. Learn how you can do that in this video.

Using 3rd Party Libraries
+ Aura and LWC interoperability
2 lectures 18:42

You can include your Lightning Web Component inside an Aura Component and can also handle the events fired by the child LWC component inside the parent Aura component.

Communicate In Same Component Hierarchy

Learn how you can handle events fired by an LWC component inside an Aura component or vice versa. Use publish and subscriber pattern with both Aura and LWC to communicate between components.

Communicate In Different Components Hierarchy
+ Testing Your Lightning Web Components
4 lectures 27:18

Download node and npm to setup JTest in your SFDX project to test Lightning Web components.

JTest Setup

Learn how to write simple tests to perform unit testing of your Lightning Web Components.

Writing Tests For Your Lightning Web Components

Sometime it is essential to debug your test files as well to find out errors in test suites. Learn how to debug test files in chrome browser.

Debugging Test Files - Using Chrome

Sometime it is essential to debug your test files as well to find out errors in test suites. Learn how to debug test files in VS code itself.

Debugging Test Files - Using VS Code
  • Basic understanding of Salesforce Apex and SOQL is preferred
  • Basic understanding of Javascript is preferred

Lightning Web Component framework is a new programming model 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 framework?

  • How can you develop Lightning web components?

The course will mainly focus on Custom Lightning Web Component development. With the help of code by code mini examples and major projects, you can master this framework in no time.

LWC is still new in the market and learning LWC can make you a Salesforce gem and can give your resume another dimension.

If you are new to any web development framework, please do not worry as the course will start from very basic (ground 0) to help you understand how can you start coding web components. If you are already an expert in Web Development frameworks, then this course will definitely be a major plus to your skills as it primarily focuses on learning modern web standard, building ECMA script modules and developing UI components.

Who this course is for:
  • Salesforce Professionals
  • UI and UX developers
  • All Salesforce Developers
  • All Salesforce Admins