in Javascript, Programming

Hello World React – [part 2]

Halo, selamat datang di blog saya.

Pada artikel sebelumnya saya telah membahas mengenai dasar dari React JS. Selanjutnya, pada artikel ini akan membahas bagaimana caranya membuat hello world dengan React. Sebelum mulai dengan hello world React, silahkan buka link untuk repositori git berikut ini git repositori react simple starter.

Setup Environment

Untuk memulai membuat hello word pada React JS, ada beberapa hal yang perlu kita siapkan untuk development environment kita.

  • Download React Simple Starter

Untuk memulai membuat aplikasi sederhana dengan React JS, kita harus men-download beberapa dependencies yang dibutuhkan. Saat ini saya telah membuat kumpulan dependencies untuk mempermudah kita dalam belajar. Kumpulan dependencies tersebut saya upload pada github repository agar mudah untuk di download.

Untuk mend-download repository tersebut, terdapat dua cara. Jika sudah terbiasa dengan menggunakan Git, silakan clone repository berikut ini : git repository react simple starter jika belum, repository dapat di download dengan format zip.

belajar hello world dengan react js

git repositori react simple starter

Kemudian, ekstrak file hasil download dari repository. Buka terminal linux / mac os dan arahkan working directory ke folder hasil ekstraksi.

 

  • Install dependency yang dibutuhkan

Langkah selanjutnya adalah dengan meng-install library atau dependencies yang dibutuhkan. Untuk melakukannya dapat menggunakan perintah berikut ini  :

npm install hello world react

npm install

Perintah tersebut akan men-download dependencies yang sudah saya list pada file package.json. Tunggu hingga proses download selesai.

Setelah proses download selesai, coba perhatikan pada struktur folder dari ReactSimpleStarter. Terdapat folder baru dengan nama node_modules. Folder tersebut digunakan untuk menyimpan file – file dari library yang kita butuhkan.

struktur folder hello world react js

 

Untuk melihat hasil dari eksekusinya, kita harus menjalankan perintah npm start  pada terminal seperti berikut ini :

npm start hello world reactjs

Setelah kita menjalankan perintah tersebut, maka pada terminal kita akan muncul tampilan berikut :

npm start hello world react js

Setelah muncul tampilan seperti di atas, berarti web server aplikasi React kita sudah berjalan. Untuk melihat hasilnya, buka browser kesayangan kemudian akses http://localhost:8080, maka akan muncul tampilan berikut :

belajar hello world react js

Yeay, aplikasi React pertama kita sudah sukses dieksekusi oleh web server.

Membuat Hello World

Langkah selanjutnya adalah membuat hello world pada aplikasi React. Buka teks editor kesayangan Anda (Vim, Atom, Sublime Text, Nodepad ++, dll).

belajar react js hello world

Kemudian buka file app.js pada folder src/components/app.js sehingga muncul kode seperti berikut :

Ubah kode di atas, menjadi seperti berikut ini :

Simpan perubahan kode tersebut, kemudian reload halaman http://localhost:8080 pada browser sehingga muncul tampilan berikut ini :

belajar react js hello world 2

belajar react js hello world

 

Oke, sampai disini kita berhasil membuat hello world dengan React JS. Pada artikel berikutnya, saya akan bahas bagaimana proses kode yang telah kita buat dieksekusi oleh web server.

Terima kasih sudah membaca dan sampai jumpa pada artikel selanjutnya.

Write a Comment

Comment