LWC Fundamentals

Lightning Web ComponentsLWC FundamentalsLearn the Web Components standards Lightning Web Components are built on, how a component bundle is structured, how templates, reactivity, decorators and lifecycle hooks work, and how to configure and ship your first real component.Beginner · about 80 minutesWhat you will learn

Explain which Web Components standards LWC uses and what the framework adds on top

Describe the history of Aura and LWC and the interoperability rules between them

Create a correctly named component bundle and configure it with targets, targetConfigs and design attributes

Use modern template directives: lwc:if/elseif/else, for:each, iterator, lwc:ref, lwc:spread, lwc:dom and dynamic components

Predict when a component re-renders and when @track is still required

Order the lifecycle hooks for a parent and child component and use errorCallback as an error boundary

Import Apex methods, schema references, labels, static resources, user info, i18n values, permissions and form factor from @salesforce modules

Contents

Web Components: the standards under LWC

From Aura to LWC: history and interoperability

The component bundle

Templates and directives

Reactivity: what makes a component re-render

Decorators: @api, @track and @wire

Lifecycle hooks

Configuration: the js-meta.xml file

Importing platform modules

Build-through: a configurable onboarding checklist

TypeScript, LWC OSS and the wider ecosystem

Best practices

Common pitfalls

Hands-on exercises

Key takeaways