in Javascript, Programming

Tutorial react js – start from scratch – [part 5]

Halo, selamat datang di blog saya.

Mari kita lanjutkan tutorial React js untuk membuat aplikasi sederhana dengan React js. Sebelum lanjut membaca, bagi yang belum membaca artikel sebelumnya, saya sarankan untuk membacanya terlebih dahulu. Jika sudah, mari kita lanjut ke tutorial start from scratch untuk memulai membuat aplikasi sederhana dengan React js.

Pada artikel sebelumnya, kita sudah download / clone dari repositori. Kemudian menginstall dependencies yang dibutuhkan dan menghapus folder src pada kode aplikasi kita sehingga struktur folder saat ini adalah seperti berikut :

tutorial belajar react js

struktur folder react js – tutorial belajar react js

Membuat file index.js

Untuk me-render sebuah tampilan pada react js, kita perlu membuat file .js yang menjadi entry point dari aplikasi kita. Berikut adalah langkah – langkahnya :

  • Buat folder src pada root directory dari aplikasi
  • Buat file index.js di dalam folder src
tutorial react js - belajar membuat aplikasi sederhana dengan react js

tutorial react js – belajar membuat aplikasi sederhana dengan react js

Setelah membuat file index.js, susunan folder saat ini seperti yang ditunjukkan pada gambar di atas.

Kemudian, buka browser dan ketikkan url  http://localhost:8080 maka akan menampilkan sebuah halaman website kosong.

Pada React js, sebuah komponen merupakan sebuah file javascript yang menggenerate HTML yang kemudian akan ditampilkan ke browser. File index.js, merupakan sebuah komponen. File index.js mempunyai 2 fungsi, yaitu :

  1. Membuat / menggenerate HTML
  2. Menampilkan HTML ke sebuah halaman (DOM)

Untuk menyelesaikan 2 fungsi tersebut, berikut adalah kode javascript dari komponen index.js :

Sintak  import digunakan untuk mengimport module yang akan digunakan pada komponen. Module yang digunakan adalah react dan react-dom yang ada pada folder node_modules.

Sintak ke-2 adalah menggenerate HTML dengan menggunakan JSX sintaks. JSX adalah library javascript yang digunakan untuk menuliskan sintak HTML / XML dalam kode javascript.

Sintak ke-3 adalah menampilkan HTML yang merupakan hasil generated dari JSX ke dalam index.html. Sintak 3 dapat diartikan sebagai berikut :

  • cari selector dengan class ‘container’ pada dokumen index.html,
  • jika ditemukan maka render komponen dengan nama App ke dalam selector tersebut.

Untuk melihat hasil running dari kode kita. Simpan file index.js kemudian buka browser dan akses url  http://localhost:8080 sehingga muncul tampilan sebagai berikut :

tutorial react js - belajar membangun aplikasi sederhana dengan react js

tutorial react js – belajar membangun aplikasi sederhana dengan react js

Kesimpulan

Sampai disini kita berhasil membuat sebuah komponen React js pada file index.js yang berfungsi untuk menggenerate HTML dan me-render komponen tersebut ke halaman website pada file index.html. Selanjutnya, kita akan mulai membuat komponen – komponen lain penyusun aplikasi kita. So, sampai ketemu pada artikel selanjutnya.

Terima kasih sudah membaca dan sampai jumpa pada artikel selanjutnya.

Write a Comment

Comment

Webmentions

  • Tutorial react js - struktur komponen aplikasi - [part 6] - Sigit Hanafi Notes 3rd April 2017

    Thanks sudah membaca dan memberikan respon.
    Tutorial sudah saya update, maaf agak lama. 😀