Lightning Web Component Development
4.5 (1,171 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.
4,779 students enrolled

Lightning Web Component Development

A code by code series to master the development of custom Lightning web components.
Bestseller
4.5 (1,171 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.
4,777 students enrolled
Created by Manish Choudhari
Last updated 5/2020
English
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
01:27

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
00:15

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

Set Up Development Environment
03:22

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
04:10

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
07:00

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
12:28
+ LWC Fundamentals
10 lectures 01:03:54
Two Paths From Here
00:34

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

Component Bundle
06:22

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

Hello World Component
06:06

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

Data Binding
06:21

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

Applying CSS
05:46

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

Conditional Rendering
05:43

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

Looping or Iteration
05:08

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

Project - Simple Calculator - Part 1
18:04

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

Project - Simple Calculator - Part 2
06:36

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
03:14
+ Javascript Properties
8 lectures 35:13
New Updates
00:21

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
03:57

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

Private Properties - Reactive
05:23
Spring'20 Update - All Properties Are Reactive
03:09
Spring'20 Update - When To Use Track Decorator
06:55

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
02:17

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
10:43

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

Public Boolean Properties
02:28
+ 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
06:12

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
14:23

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
02:56

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

Component Lifecycle
05:43
+ 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
12:50

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

Communication Between Independent Components
13:52

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
05:27
+ 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
07:35

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
11:18

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
10:05

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
10:01

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
12:41

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
08:16

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
05:49
+ 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
04:17

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
03:48

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
05:37

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
03:41

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

Examples of Lightning Navigation Service
05:56

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

Using 3rd Party Libraries
13:15
+ 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
09:53

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
08:49
+ 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
05:25

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

Writing Tests For Your Lightning Web Components
13:24

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
04:21

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
04:08
Requirements
  • Basic understanding of Salesforce Apex and SOQL is preferred
  • Basic understanding of Javascript is preferred
Description

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