Salesforce Lightning Web Component : Complete LWC Hands-on

Download and install Visual Studio Code to begin configuring your Salesforce lightning web components environment. Open the app from your desktop or dock after installation.

Install Salesforce DX CLI to connect Visual Studio Code with your Salesforce org. Download Mac, Windows, or Linux installer from developer.salesforce.com/tools/cli, then verify by typing sfd in the terminal.

Install the Salesforce extension pack in Visual Studio Code to enable Apex Salesforce integration, Apex Interactive Debugger, Apex Replay, debugger visual force, Aura components, and Lightning Web Components.

Create a Salesforce lightning web component project in Visual Studio Code using the command palette, select the standard project template, name the project, and choose a location.

Connect your Salesforce project to an org using the command palette (SFD: authorize an org) in Visual Studio Code, selecting production or sandbox and authenticating the org.

Retrieve components from your org using the manifest package.xml in VS Code, including apex classes, components, and pages, modify the package.xml as needed, and verify retrieved items in force-app.

Create a dummy lightning web component and deploy it to your org using VS Code, then configure targets like the lightning homepage and verify on the home page.

Create a lightning web component as a folder bundle of html, js, and xml files. Learn camel case versus kebab case and how to reference in markup with c-<kebab-case>.

Learn how the HTML file defines a lightning web component's UI with the template tag and component.html naming. The template renders as namespace-component and custom elements require a closing tag.

Learn how lightning web components use JavaScript files as ES6 modules to define the user interface or export reusable functionality, with import, export, and the lightning element.

Expose a lightning web component by configuring its metadata file to define targets in the Lightning App Builder and Experience Builder, include design configuration, and deploy updates to the org.

Create and apply a css file in a lightning web component using standard css syntax, naming the stylesheet after the component (my component.css) and rely on automatic application.

Create a single svg file in the component folder, one per folder, to serve as a custom icon for a lightning web component, enabling use in lightning app builder.

Learn to add ES6 module JavaScript files in Salesforce lightning web components. Export and import functions and variables, keeping unique names and using relative imports to share code across components.

Apply the default namespace c to reference and embed lightning web components, using kebab-case for multiword names and importing JavaScript files with c/ in the LWC bundle.

Create your first lightning web component in vscode using html, javascript, and xml, and define name, company, designation, and salary with is exposed set to true.

deploy a lightning web component from VS Code to the org, drag it onto page, and render properties like name, company, and designation using curly brace expressions and lightning components.

Explore migrating Aura markup, CSS, and JavaScript to Lightning Web Components, comparing markup files, attributes to properties, expressions, conditional rendering, loops, and lifecycle hooks.

Discover how the @api, @track, and @wire decorators in lightning web components create public, reactive properties, expose them to HTML, and render updates when values change.

Master the wire service in lwc. Fetch data from a Salesforce org via an immutable data stream using predefined modules or Apex class methods, with adapter id, module, and config.

Discover how to use the @wire decorator with the lightning data service wire adapter to fetch account name and phone by importing field references and wiring getRecord.

Demonstrates using field APIs directly as strings versus imported references in LWC, and compares get field value function, get record, and conditional rendering with @wire.

Explore the difference between importing references to objects and fields versus using strings in a wire adapter, and understand how field level security and CRUD affect data.

Demonstrates wiring an Apex class method to a Lightning web component with the @wire decorator, using account id and secure access (with sharing) to fetch and render contacts.

Explore decorating @wire with property versus function in LWC, using Apex methods and UI record API, to manage data and error and render accounts with related contacts.

Bind html templates to a JavaScript property in a lightning web component, use lightning input to capture user data, and see reactive updates render on the UI.

Explore HTML templates, data binding, and getters in a Salesforce Lightning web component to concatenate first and last names, format uppercase, and render reactive UI updates.

Learn how to fetch data using querySelector in a lightning web component, binding a lightning input value to a reactive greeting property, and reflecting changes in the user interface.

Fetch multiple lightning inputs in a lightning web component using querySelectorAll, iterate over elements by name, and bind values to first name and last name properties for dynamic UI updates.

Explore using getter and setter together in lightning web components, wiring a parent and child, exposing a public property with @api to pass and render uppercase values.

Pass first name values from a parent to multiple child components in lightning web components by converting private properties to public with the advocate API.

Master conditional rendering in a lightning web component using if: true and if: false in the HTML. Toggle a checkbox to control a details visible property with a handleChange function.

Render lists in a lightning web component using for:each to loop over custom data and Apex-fetched records, displaying name and title in a styled list.

Learn to render a list in a Lightning web component using an iterator, including template usage and applying Lightning design system styles list-first and list-last for a polished presentation.

Demonstrates rendering multiple templates in a lightning web component by importing template html files and toggling between them with a boolean flag and a switch function.

Learn to apply CSS in a lightning web component by creating a matching CSS file in Visual Studio Code, styling h1 headings and using CSS classes for precise control.

Learn how to apply css in Lightning web components with parent and child relationships, host styling, and slots, including per-component versus per-element css and using classes.

Learn to style Lightning web components with styling hooks using the Salesforce Lightning Design System, defining custom CSS classes and applying them to base components like Lightning button and badge.

Shows how to share css style rules between lightning web components by using a css library and a share component that imports the library css.

Learn how to compose Lightning Web Components by linking an owner to child components, setting public properties, calling methods, and handling events in a containment hierarchy.

In this Salesforce Lightning Web Component lesson, the parent passes item-name properties to child todo item components using the @api decorator, illustrating composition with milk and bread.