Lightning Web Components for PD1: The Basics You Need (and LWC vs Aura)

Hey friends,

For PD1, you need to know that a Lightning web component is an HTML file and a JavaScript file (plus optional CSS) built on web standards, that data flows down through public @api properties and up through custom events, and that @wire pulls Salesforce data reactively. Aura components still work, and Aura can contain LWC, but not the other way around.

User Interface is 25% of the PD1 exam, including "use cases and best practices for Lightning Web Components, including the framework, benefits, and events". This follows Trailhead's Lightning Web Components Basics module.

What's in a component

At minimum, a folder with an HTML file and a JavaScript file that share the component's name. Salesforce compiles them and handles the boilerplate.

1import { LightningElement } from 'lwc';
2export default class App extends LightningElement {
3    message = 'Hello World';
4}

The HTML lives inside a <template> tag. A CSS file with the same name applies only to that component, because LWC uses Shadow DOM to keep components separate from the rest of the page.

LWC vs Aura

You can use both in one org.

Trailhead is clear that you don't have to throw Aura away. You'll likely migrate over time. The nesting rule is the classic exam question: Aura components can contain Lightning web components, but not vice versa.

Properties down, events up

Trailhead's events unit builds a bike selector: a selector contains a list, which contains tiles. The pattern:

• Down: a parent passes data to a child through a public property decorated with @api, like product-id={selectedProductId}.
• Up: a child fires a CustomEvent and the parent listens with an on handler, like ontileclick={handleTileClick}.
• Trailhead recommends passing events up through the hierarchy so parents can respond, then passing properties down to the components that need them.

1this.dispatchEvent(new CustomEvent('tileclick', { detail: this.product.fields.Id.value }));

Exam pattern: "How should a child tell its parent that a record was selected?" A custom event. "How should the parent give the child a record Id?" An @api property.

Getting Salesforce data

Lightning web components use the reactive wire service, built on Lightning Data Service, through the @wire decorator. Trailhead's data unit shows the pattern:

1@wire(adapterId, adapterConfig) propertyOrFunction;

You can also call Apex from a component, which PD1 covers under "implement Apex to work with various types of page components". Make that Apex respect the user's access, as in my DML and with sharing post.

Styling: SLDS

Components in Lightning Experience and the Salesforce mobile app can use the Salesforce Lightning Design System classes, like slds-text-heading_small, with no imports, so they match the rest of the UI.

Keep studying

• My 8-week PD1 study plan: LWC is week 6.
• JavaScript Developer certification guide, if you want to go deeper.
• How to pass PD1 on your first try.

Hope this helps!

Best,

Nick