Component dan Props (Part 1)

Oke, sekarang anda sudah paham sedikit mengenai React dan fungsionalitasnya. Sekarang, kita akan belajar mengenai apa itu Component dan Properties.

See the Pen Let's Get Started by imamassi (@imamassi) on CodePen.

Oke, sebelum terjun, saya ingin agar anda membuat sebuah pen di CodePen.io. Silahkan buka CodePen, dan di pojok kanan atas ada tombol ‘Create’ , klik, dan klik ‘New Pen’.

Setelah itu, anda akan melihat tampilan seperti ini:

Klik Settings, buka tab Javascript. Lalu, di multiple selection field Javascript Preprocessor, dari None, ubah menjadi Babel. Opsi ini yang akan membuat kita dapat menggunakan JSX di Pen kita.

Lalu di Quick-Add, tambahkan React, dan ReactDOM untuk menambahkan kedua script tersebut ke pen kita:

Pastikan script React berada diatas script ReactDOM

Setelah itu, tekan Close (Atau Save & Close juga anda telah login ke CodePen)

Sekarang, kita bisa menaruh kode dibawah ini ke Pen kita:

Taruh di tab HTML

<div id="root"></div>

Taruh di tab JSX

ReactDOM.render(<p>Halo dunia!</p>, document.getElementById('root'))

Setelah itu, secara otomatis jendela preview akan menghasilkan tampilan dibawah:

Dan selamat! Sekarang, kita telah memberikan elemen dengan ID root di HTML kita ke React secara keseluruhan untuk dirender sesuai kebutuhan, your amazing future react applications start here :).

Imam Assidiqqi

Founder of Imam.tech

Tweet Share