Component Dasar — CompileDaily Study

Penjelasan

Component Blazor adalah file berekstensi .razor — bagian atas berisi markup mirip HTML, bagian bawah (dalam blok @code { }) berisi properti dan method C#. Nama file (mis. KartuProduk.razor) otomatis jadi nama tag component itu saat dipakai di file lain (<KartuProduk />).

Contoh Konsep

@* KartuProduk.razor *@
<div class="kartu">
    <h2>@nama</h2>
    <p>Rp @harga</p>
</div>

@code {
    private string nama = "Kaos CompileDaily";
    private int harga = 99000;
}

Praktikum

Buat component Sapa.razor dengan properti nama (string, isi "CompileDaily") di blok @code, tampilkan "Halo, @nama!" di dalam tag <h1>.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Simbol @ di Razor menandai TRANSISI dari HTML ke C# — dipakai di mana pun kamu perlu menyisipkan ekspresi/logika C# di tengah markup (@nama, @if, @foreach, dst), kebalikan dari JSX React yang justru pakai kurung kurawal {} untuk transisi sebaliknya.