Lightning Web Component

Membuat Komponen LWC dengan VS Code SFDX Extension

1. Gunakan VS Code SFDX extension:
   • Jalankan perintah SFDX: Create Lightning Web Component
   • Berikan nama dan lokasi komponennya
   • Lokasi komponen harus berada di dalam folder induk bernama lwc. Folder induk ini bisa ditempatkan di mana saja asalkan masih di dalam default/lwc/.

Struktur Komponen

Setiap komponen LWC terdiri dari 4 skrip:

• Kontroler: [namakomponen].js
• UI: [namakomponen].html
• Meta: [namakomponen].js-meta.xml
• Tes: __tests__/[namakomponen].test.js

Kontroler ([namakomponen].js)

import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {
  fullname = "Boss"

  address = {
    city: 'Malang'
  }

  onChangeHandler(event) {
    this.fullname = event.target.value;
  }

  onCityChange(event) {
    // ganti seluruh objek untuk memicu render ulang, seperti setState di React
    this.address = { ...this.address, city: event.target.value };
  }

  isLabelVisible = false;
  toggleLabel(event) {
    this.isLabelVisible = !this.isLabelVisible;
  }
}

Template (UI) ([namakomponen].html)

<template>
    <lightning-card  title="Hello">
      <div class="slds-m-around_medium">
        <div>Hello {fullname} in {address.city}</div>
        <lightning-input label="Enter" onchange={onChangeHandler}></lightning-input>
        <lightning-input label="City" onchange={onCityChange}></lightning-input>
      </div>
    </lightning-card>

    <lightning-card title="Conditional Rendering">
      <div class="slds-m-around_medium">
        <lightning-button label="Toggle" onclick={toggleLabel}>toggle label</lightning-button>
        <!-- rendering kondisional -->
        <template lwc:if={isLabelVisible}>
          <div>
            Label ini dirender secara kondisional
          </div>
        </template>
      </div>
    </lightning-card>
</template>

Meta ([namakomponen].js-meta.xml)

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>61.0</apiVersion>
  <!-- Membuat komponen tersedia di SF App builder -->
  <isExposed>true</isExposed>
  <targets>
    <!-- Jenis halaman di mana komponen ini dapat digunakan -->
    <target>lightning__AppPage</target>
  </targets>
</LightningComponentBundle>

Catatan Penting

• Kontroler ([namakomponen].js) berisi logika dan data komponen.
• Template ([namakomponen].html) mendefinisikan struktur UI komponen.
• File meta ([namakomponen].js-meta.xml) mengkonfigurasi metadata komponen, termasuk di mana komponen dapat digunakan.
• Gunakan lwc:if untuk rendering kondisional dalam template.
• Saat memperbarui objek, buat objek baru (seperti dengan operator spread ...) untuk memicu render ulang.

Pastikan untuk menyesuaikan nama komponen, versi API, dan detail lainnya sesuai kebutuhan spesifik Anda.