Intermediate · Level 7: React FundamentalsIntermediate45 menitBahasa Indonesia

JSX Dasar

Menulis markup React dengan JSX dan mengenali perbedaan penting dari HTML biasa.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan JSX sebagai markup di dalam JavaScript atau TypeScript
Memakai className sebagai pengganti class
Memakai kurung kurawal untuk expression sederhana

ReactJSXTSX

Isi lesson

6 blok

1.
JSX terlihat seperti HTML, tetapi hidup di JavaScriptBelum selesaiWajib
2.
HTML-like markup menjadi JSXBelum selesaiWajib
3.
Kesalahan awal yang sering munculBelum selesaiWajib
4.
Coding practiceBelum selesaiWajib
5.
Cek pemahamanBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

JSX terlihat seperti HTML, tetapi hidup di JavaScript

Wajib

JSX adalah syntax yang membuat kamu bisa menulis markup di dalam file JavaScript atau TypeScript. Bentuknya mirip HTML, tetapi aturannya mengikuti dunia JavaScript.

Karena itu, ada beberapa perbedaan penting. Attribute `class` menjadi `className`. Expression JavaScript ditulis dengan kurung kurawal. Tag yang tidak punya isi, seperti `img`, harus ditutup sendiri dengan `/>`.

Bagian ini memengaruhi progres lesson.

HTML-like markup menjadi JSX

Wajib

tsx

const title = "JSX Dasar";

function LessonBanner() {
  return (
    <section className="lesson-banner">
      <h1>{title}</h1>
      <img src="/lesson.png" alt="Ilustrasi lesson" />
    </section>
  );
}

`className` dipakai karena `class` sudah menjadi keyword di JavaScript. `{title}` membaca value dari variable JavaScript.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Wajib

Kesalahan awal yang sering muncul

Banyak learner menulis `class` seperti HTML biasa, lupa menutup tag `img`, atau menaruh string JavaScript tanpa kurung kurawal. Ini normal di awal. Biasakan membaca JSX sebagai markup yang berada di dalam JavaScript.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Ubah UI sederhana menjadi JSX

Latihan memperbaiki markup agar mengikuti aturan JSX dasar.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

4 cek otomatis3 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Di JSX, attribute CSS class ditulis sebagai...

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib

JSX adalah markup yang ditulis di dalam JavaScript atau TypeScript.
`className` menggantikan `class` di JSX.
Expression JavaScript dibaca dengan kurung kurawal.
Tag tanpa isi perlu ditutup sendiri, misalnya `<img />`.
Berikutnya, component akan menerima data lewat props.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: JSX terlihat seperti HTML, tetapi hidup di JavaScript.

Memuat progres Review module