Kurung Kurawal

Termasuk bagian Dasar-Dasar dalam perjalanan React di Coddy. Pelajaran 6 dari 42.

JSX menjadi menarik saat kamu mulai mencampurkan JavaScript. Kurung kurawal { } membuka jendela dari markup kembali ke JavaScript:

const name = 'Ada';

return <p>Hello, {name}!</p>;

Semua yang ada di dalam kurung kurawal dievaluasi sebagai JavaScript, dan hasilnya muncul di halaman: di sini paragraf menampilkan Hello, Ada!.

Tanpa kurung kurawal, JSX memperlakukan apa yang kamu ketik sebagai teks biasa. <p>Hello, name!</p> secara harfiah menampilkan kata name, mungkin bukan itu yang kamu maksud.

Ini adalah bagian JSX yang paling sering digunakan: definisikan datamu sebagai variabel, lalu masukkan ke dalam markup dengan { }.

Tantangan

Pemula

Komponen mendefinisikan const name = 'Ada', tetapi sapaan menampilkan kata literal name.

Perbaiki paragraf agar menggunakan variabel: paragraf harus menampilkan Hello, Ada!.
Jangan ubah variabelnya.

Coba sendiri

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>