in Javascript, Programming

Tutorial react js – install boilerplate react js – [part 4]

Halo, selamat datang di blog saya.

Masih dengan 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, baru kita lanjut ke tutorial install boilerplate React js untuk membuat aplikasi sederhana React js.

Install React Simple Starter

Langkah pertama, download / clone react simple starter boilerplate yang saya buat di repo berikut ini : repo react simple starter.

Clone repository, dengan cara : Terminal > ketik perintah clone berikut :

Masuk ke direktori hasil clone, dengan cara : Terminal > ketik perintah berikut :

Jalan kan perintah untuk menginstall dependencies yang dibutuhkan dengan perintah berikut :

Tunggu proses instalasi selesai. Untuk melihat hasil run dari boilerplate aplikasi react kita, dapat menggunakan perintah berikut :

Kemudian buka browser dan ketikkan url :  http://localhost:8080 , sehingga muncul tampilan seperti berikut ini :

belajar react js

menjalankan aplikasi react js

Jika sudah sampai disini, berarti tahap pertama sudah selesai, lanjut ke tahapan selanjutnya.

Struktur folder dan kode react

Setelah aplikasi React js sederhana kita berjalan di lokal server, langkah selanjutnya adalah untuk mengenal struktur folder dari aplikasi kita dan kode React js.

Langkah pertama : Buka teks editor kesayangan Anda. Saya menggunakan Atom yang dapat di download di atom.io. Tetapi,  Anda bebas menggunakan teks editor apa pun.

struktur folder aplikasi react - tutorial react js

struktur folder aplikasi react – tutorial react js

Struktur folder yang ada pada hasil clone dari repositori saya adalah sebagai berikut :

  • node_modules => folder untuk menyimpan module / library / dependency
  • src => source 
    • components => component
      • app.js
    • index.js
  • style
  • index.html
  • package.json
  • webpack.config.js

Jika kita lihat kode yang ada pada aplikasi kita, terdiri dari kode HTML dan javascript. Silakan buka file index.html yang ada di root folder dari aplikasi. File ini merupakan file HTML yang akan di load / render pada aplikasi react kita.

Pada tahapan ini, kita akan membersihkan kode – kode yang sudah saya buat agar kita dapat mulai dari awal bersama. Kode yang akan kita hapus adalah semua kode yang ada pada folder src. Setelah dihapus, struktur folder saya menjadi seperti pada gambar berikut :

tutorial belajar react js

struktur folder react js – tutorial belajar react js

 

Sampai disini proses persiapan kode program kita. Pada artikel selanjutnya, kita akan bahas step by step pembuatan kode aplikasi react kita. Sampai jumpa di artikel selanjutnya.

Terima kasih sudah membaca dan sampai jumpa pada artikel selanjutnya.

Write a Comment

Comment