Learn to build Lightning Web components with step by step examples and a real-time project.
What you will learn
They will learn about Lightning Web Components
They will be able to build application using Lightning Web components
They will learn to solve real-world challenges related to LWC
They will learn about Event communication between Lightning Web Components
Setup Devhub and scratch org and Importance of it
PubSub mechanism to communicate events
Lightning Data Services and Base components to get salesforce data in Lightning web Components
Various ways to Invoke Apex from Lightning web component
Many more live scenario and step by step way to code the LWC
Use Wire services to access data in LWC
Useful Javascript Properties in lightning component
Description
Lightning Web Component framework is a new programming model to develop Salesforce Lightning Components.
In this course we will learn about the following topics:
- What are Lightning Web Components?
- Benefits of Lightning Web Components
- Comparison of Aura components and Lightning web components
- Setting up Devhub and scratch org and Importance of it
- Data Binding
- Properties
- Event Communication
- PubSub model
- Rendering components conditionally
- Rendering list using LWC
- Lightning Data Services and Base components to get Salesforce data in Lightning web Components
- Navigation Service
The course will mainly focus on Custom Lightning Web Component development. We will take mini examples to learn about each and every topic. After we have gotten our-self familiar with the basics and advance concepts, we will build an eBike application using Lightning Web Components in which we will put our learning to use in a final project. This way you will 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.
English
language
Content
Introduction to Lightning Web Components
Overview of Lightning Web Components: Benefits of Lightning Web Components
Setting Up Development Environment
Setting up Development Environment: Install Salesforce CLI and VIsual Studio
Setting Up My Domain and Enable Dev Hub in Salesforce
Create a Scratch Org
Commands commands to use in Visual studio
Review for the course
Building Lightning Web Components
Building our First Lightning Web Component
Data binding in Lightning Web Component
Data Binding in Lightning Web component Example 2
Rendering Components Conditionally in LWC
Render DOM Elements Conditionally using if:true|false directive
If:True|False directive in Lightning Web Components
Rendering List of Items in Lightning Web Components
How to Render a List of Items in Lightning Web Components?
How to Render a List using Iterator directive?
Building Applications In Lightning Web Components
Building a Simple Application: Simple Interest Calculator
Building a Simple Application with Lightning Web Components: Shape Calculator
Types of properties in lwc
What are Public Properties in LWC?
Difference between Reactive and Non-Reactive Property in LWC?
How to pass Data from Parent Component to Child Component in LWC?
What are Boolean Properties in LWC?
Lightning Web components Lifecycle Methods
Component Lifecycle Hooks: Lifecycle Hooks in Lightning Web Components
Lightning Web Components Communication
How to call child component method from parent?
Custom Event Communication from Child to Parent component
Communicate with Events: Create and Dispatch of events
Communicate with Events: Create and Dispatch of events
Overview of Pub Sub Model in Lightning Web Component
Learn about Pub Sub model with help of an example
Working with Records inside Lightning Web Components
Different ways to access salesforce data in Lightning web components
How to create a Record using Lightning Data Service in Lightning web component?
View and Create Record using Lightning Data Service
Work With Records Using Base Components
Work with Records Using Base Components :<lightning-record-form>
Display a Record with custom layout using base component
How to access Salesforce Data using Base Components: lightning-record-edit-form
How to create a new record using lightning-record-edit-form?
Create and view the record using lightning-record-edit-form component
How to fetch Records Via Apex?
How to fetch records Via Apex?
Toast Notifications in Lightning Web Components
Using toast notifications in Lightning Web components
Navigation Service in Lightning Web Components
Navigation Service in Lightning Web Components
Navigating to Object Record Pages
Navigating to Account Record Recent List and Related Contact Records
Navigating to Web Page
Navigating to Home Page and Chatter Page
Test Lightning Web Components with JEST framework
Install npm and JTest for testing Lightning web components
Write Jest Tests for Lightning Web Components
Build an Application from scratch using Lightning Web Components
Overview of the Application
Adding static Resources for the application
Use the Source Code attached with the lectures
Working on our first component: ProductTileList component
Working on the JS file for the productTileList Component
Setting up targets and CSS file for productTileList component
Working on the 2nd component: productTile component
Working on the JS file for productTile Component
Setting up targets and CSS file for the productTile Component
Working on the 3rd component: productFilter component
Working on the JS file for productFilter component
Setting up targets and CSS file for the productFilter component
Working on the 4th component: productCard Component
Working on the JS file for the productCard component
Setting up the targets and CSS file for productFilter component
Working on the 5th component: placeholderComponent
Setting up CSS file for placeholderComponent
Paginator Component
Setting up CSS file and targets for the Paginator component
Product Controller Class and getProducts()
PagedResult class
Push the code changes and uploading data for our app
Overview of the EbikeExplorer application