Belajar React: Hello World

Seperti biasa, sesuai tradisi belajar pemrograman, kita akan belajar menampilkan pesan “Hello World ” di browser menggunakan React.

React bagaimanapun juga adalah javascript, dan kita akan membuat program React dengan cara membuat halaman web seperti biasanya, terdiri dari html, (belum ada) css, dan javascript.

Silahkan buka editor kesayangan, dan buat file dengan nama ‘1-hello-world.html’.

Kita buat template html sederhana

React membutuhkan container untuk menempatkan komponennya, container disini adalah elemen DOM sederhana, kita bisa juga menggunakan elemen body tetapi sangat disarankan untuk membuat elemen baru. Untuk itu kita buat elemen baru dengan id tertentu. Untuk sekarang, kita buat elemen dengan id app setelah tag .

Setalah itu kita muat 2 librari React yang utama dengan menggunakan tag script, yaitu react dan react-dom.

Perhatikan kita menggunakan script eksternal dari internet, jadi pastikan komputer kita terhubung dengan internet.

Setelah memuat librari React, kita selanjutnya bisa membuat komponen React untuk menampilkan pesan ‘Hello World’ di browser.

Ya, membuat satu React komponen sederhana semudah membuat satu function javascript saja.

Kita render komponen Hello dengan container yang telah kita buat dengan id ‘app’. Perhatikan, kode javascript harus ditulis di dalam tag script ya.

Put it all together. Berikut ini adalah semua kode yang sudah kita buat jika digabungkan.

Buka file tersebut diatas menggunakan browser, maka akan tampil text ‘Hello World’ sederhana.

Selesai. Selamat mencoba.

Discussion