orderCard/
├── orderCard.html          // Template — structure & layout
├── orderCard.js             // Class — logic, data, event handlers
├── orderCard.js-meta.xml    // Config — where it can be used, API version
├── orderCard.css            // Optional — component-specific styling
└── __tests__/                // Optional — Jest test files (Module 14)
    └── orderCard.test.js

<!-- orderCard.html -->
<template>
  <div>Order: {orderName}</div>
</template>

// orderCard.js
import { LightningElement } from 'lwc';
export default class OrderCard extends LightningElement {
  orderName = 'Order #1001';  // the {orderName} in HTML reads this
}

<!-- orderCard.js-meta.xml -->
<LightningComponentBundle>
  <apiVersion>62.0</apiVersion>
  <isExposed>true</isExposed>
</LightningComponentBundle>

<template>  <!-- exactly ONE root template tag -->
  <div class="order-card">
    <h2>{orderName}</h2          <!-- expression: shows orderName's value -->
    <p>Total: ${orderTotal}</p>    <!-- you CAN mix expressions with text -->
    <p>Status: {statusLabel}</p> <!-- statusLabel could be a getter! -->
  </div>
</template>

// orderCard.js
export default class OrderCard extends LightningElement {
  orderTotal = 1500;

  get statusLabel() {
    return this.orderTotal > 1000 ? 'High Value' : 'Standard';
  }
}
// {statusLabel} in the template calls this getter and displays "High Value"

import { LightningElement } from 'lwc';

export default class OrderCard extends LightningElement {

  connectedCallback() {            // lifecycle hook — inherited from LightningElement
    console.log('Component added to page');
  }

  handleClick() {
    this.dispatchEvent(                // dispatchEvent — inherited method
      new CustomEvent('orderselected')
    );

    const el = this.template.querySelector('div'); // this.template — inherited property
  }
}

import { LightningElement, api, track, wire } from 'lwc';

export default class OrderCard extends LightningElement {
  @api orderId;        // makes this PUBLIC — parent components can set it
  @track items = [];   // explicitly marks for deep reactivity tracking

  @wire(getOrder, { orderId: '$orderId' })  // wire decorator — covered fully in Module 12
  wiredOrder;
}
// Decorators are previewed here; @api gets a full deep-dive in Module 2.5/3

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>62.0</apiVersion>
    <isExposed>true</isExposed>   <!-- without this, it's invisible to App Builder -->
</LightningComponentBundle>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>62.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>   <!-- record pages -->
        <target>lightning__AppPage</target>      <!-- Lightning app pages -->
        <target>lightning__HomePage</target>     <!-- home page -->
        <target>lightningCommunity__Page</target> <!-- Experience Cloud -->
    </targets>
</LightningComponentBundle>

export default class LifecycleDemo extends LightningElement {
  constructor() {
    super();  // always required first in a constructor
    console.log('1. constructor');
  }
  connectedCallback() {
    console.log('2. connectedCallback');
  }
  renderedCallback() {
    console.log('3. renderedCallback');
  }
  disconnectedCallback() {
    console.log('4. disconnectedCallback');
  }
}
// Console output on page load: 1. constructor → 2. connectedCallback → 3. renderedCallback
// disconnectedCallback only fires later, when removed

export default class OrderDetail extends LightningElement {
  @api recordId;

  constructor() {
    super();
    console.log(this.recordId); // undefined! Parent hasn't set it yet
  }
}

export default class OrderDetail extends LightningElement {
  @api recordId;

  connectedCallback() {
    console.log(this.recordId); // ✅ correct value, e.g. "001xx000003DGb2AAA"
    this.fetchOrderData();             // fetch data using the recordId here
  }

  async fetchOrderData() {
    const result = await getOrderById({ orderId: this.recordId });
    this.orderData = result;
  }
}

export default class SearchBox extends LightningElement {
  hasFocused = false;

  renderedCallback() {
    if (!this.hasFocused) {
      const input = this.template.querySelector('input');
      if (input) {
        input.focus();                // safe — element definitely exists now
        this.hasFocused = true;  // guard prevents re-focusing on every re-render
      }
    }
  }
}

export default class LiveOrderTracker extends LightningElement {
  intervalId;

  connectedCallback() {
    // set up a recurring timer when component appears
    this.intervalId = setInterval(() => {
      this.refreshOrderStatus();
    }, 5000);
  }

  disconnectedCallback() {
    // MUST clear the timer, or it keeps running after component is gone!
    clearInterval(this.intervalId);
  }
}