Latihan 1: TypeScript dengan React — React

Latihan 1 dari materi TypeScript dengan React di React — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Beri type props ProfileCard, lalu tampilkan nama dan umurnya. Kode ini file .tsx: editor latihan menghapus type-nya sebelum kodenya jalan, persis seperti Vite waktu npm run dev. Biarkan App yang merender <ProfileCard nama="Budi" umur={17} />.

Di atas ProfileCard, tulis interface ProfileCardProps dengan dua field: nama: string dan umur: number.
Beri type pada props-nya: function ProfileCard({ nama, umur }: ProfileCardProps).
Ganti return null dengan JSX yang dibungkus satu <div>: <h2 id="name"> berisi nama, lalu <p id="age"> berisi umur, satu spasi, dan kata tahun.

Type-nya gak dicek di sini, sama seperti npm run dev: umur="17" tetap tampil. Yang menolaknya adalah editor kode (garis merah) dan tsc.

Yang dicek:

#name berisi persis Budi, dan #age berisi persis 17 tahun.
Ada interface ProfileCardProps (atau type ProfileCardProps =) dengan nama: string dan umur: number.
Props ProfileCard diberi type : ProfileCardProps.
Kodenya punya function ProfileCard (atau const ProfileCard) dan memakainya sebagai <ProfileCard.

Hint

Bentuk props ditulis sekali sebagai interface: nama field, titik dua, lalu type-nya. Setelah itu parameter komponennya diberi type itu.
interface ProfileCardProps { nama: string; umur: number } di atas komponen, lalu function ProfileCard({ nama, umur }: ProfileCardProps). Isi JSX-nya: div berisi h2 id name dan p id age.
function ProfileCard({ nama, umur }: ProfileCardProps) { return (<div><h2 id="name">{nama}</h2><p id="age">{umur} tahun</p></div>) }

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: TypeScript dengan React — React

Hint

Memperbarui Aplikasi