in Javascript

Mulai Membuat Web dengan Reactjs

Halo, selamat datang di blog saya (lagi). Sebelumnya saya sudah membuat tutorial membuat aplikasi web dengan menggunakan reactjs. Akan tetapi ada beberapa kendala yang membuat saya belum bisa melanjutkannya. Kali ini saya akan membuat tutorial membuat web dengan reactjs yang benar – benar saya mulai dari nol.

Mari kita mulai dari awal (lagi)

Dimulai dengan membuat direktori baru dan membuat file package.json dengan perintah npm-init berikut.

Kemudian isi prompt yang muncul pada terminal. Setelah isian selesai, maka akan digenerate file package.json. File package.json berisi metadata dari project yang kita buat. Selain itu, file package.json juga berfungsi untuk mengidentifikasi dependencies yang digunakan pada project.

Untuk memulai membuat web dengan reactjs, langkah selanjutnya adalah untuk meng-install dan mengkonfigurasi webpack.

Install dan konfigurasi webpack

Webpack adalah libary yang digunakan untuk mem-bundle module / dependencies yang kita gunakan menjadi sejumlah file kecil (seringkali satu) bundle yang nantinya akan di load oleh browser.

Langkah pertama, install webpack dengan perintah berikut:

Setelah proses instalasi selesai, kita perlu membuat file untuk mengkonfigurasi webpack. Buat file baru pada root folder project dengan nama webpack.config.js.

Pada kode di atas, APP_DIR merupakan lokasi direktori dari source code reactjs, sedangkan BUILD_DIR adalah lokasi direktori hasil bundle.

Struktur direktori saat ini adalah sebagai berikut:

Setting babel-loader

Dalam membuat web dengan reactjs, kita akan lebih mudah jika menggunakan sintak JSX dan ES6. Akan tetapi, belum semua browser mendukung sintak JSX dan ES6. Oleh karena itu, kita perlu babel untuk men-transpile sintak JSX dan ES6 kita. Bagi yang mau mendalami babel, bisa lihat tulisan saya di medium.

Secara garis besar, gambar berikut menunjukkan relasi antara webpack dan babel.

webpack dan babel dalam reactjs

webpack dan babel dalam reactjs

Untuk menggunakan babel, install npm package dengan perintah berikut:

Package babel-preset-es2015 dan babel-preset-react adalah plugin yang digunakan oleh babel-loader untuk menerjemahkan sintak ES6 dan JSX.

Setelah berhasil meng-install package, babel memerlukan file konfigurasi untuk memberitahukan bahwa babel perlu menggunakan plugin ES6 dan JSX.

Buat file .babelrc pada root direktori dengan isian sebagai berikut:

Selain itu, kita juga perlu memberitahu webpack, bahwa kita perlu menggunakan babel-loader ketika webpack mem-bundle sintak JSX dan ES6 kita. Ubah file webpack.config.js menjadi sebagai berikut:

Pada step ini, kita telah selesai menyiapkan environment untuk membuat web dengan reactjs. Selanjutnya, mari kita mulai membuat reactjs sintak.

Hello reactjs

Gunakan perintah berikut untuk meng-install react dependency

Setelah proses instalasi selesai, buat file index.js di dalam direktori src.

Untuk menampilkanhasil kode react, kita perlu membuat file index.html pada root directori project. Buat file index.html seperti berikut:

Pada index.html, kita melihat kode untuk me-load file bundle.js hasil dari proses bundle yang dilakukan oleh webpack.

Sampai pada langkah ini, struktur direktori aplikasi kita adalah sebagai berikut:

Run webpack

Untuk melihat hasil kode react, kita perlu menjalankan perintah untuk menjalankan proses webpack bundle.

Jalankan perintah berikut:


Kemudian, buka file index.html dengan browser dan akan menampilkan sebuah halaman seperti berikut ini:

membuat web dengan reactjs

membuat web dengan reactjs

Yeah, sampai disini kita berhasil membuat website sederhana dengan reactjs. Next step, kita akan membuat website yang akan mengambil data dari API dengan reactjs.

Jika membutuhkan git repo, cek repo.

Write a Comment

Comment

  1. mas ketika saya menjalankan NPM INIT minculnya seperti ini:
    “name”: “movie”,
    “version”: “1.0.0”,
    “description”: “s”,
    “main”: “index.js”,
    “scripts”: {
    “test”: “echo \”Error: no test specified\” && exit 1″
    },

    ada errornya? solusinya gmn ya mas? makasih

    • Maksudnya ada errornya itu yang bagian ini kah:

      “scripts”: {
      “test”: “echo \”Error: no test specified\” && exit 1″
      },

      Kalau memang yang dimaksud itu, sebenarnya itu bukan error. itu hanya script yanga da di dalam file package.json.

      Contoh npm init yang sukses :
      https://ibb.co/jPQhsQ

  2. ada error gini om,

    F:\xampp\htdocs\movie-directory-app>node ./node_modules/.bin/webpack -d –watch
    F:\xampp\htdocs\movie-directory-app\node_modules\.bin\webpack:2
    basedir=$(dirname “$(echo “$0″ | sed -e ‘s,\\,/,g’)”)
    ^^^^^^^

    SyntaxError: missing ) after argument list
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:387:25)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Function.Module.runMain (module.js:447:10)
    at startup (node.js:140:18)
    at node.js:1001:3

Webmentions

  • Membuat template dengan bootstrap pada react - Sigit Hanafi Notes 31st August 2017

    ada error gini om,

    F:\xampp\htdocs\movie-directory-app>node ./node_modules/.bin/webpack -d –watch
    F:\xampp\htdocs\movie-directory-app\node_modules\.bin\webpack:2
    basedir=$(dirname “$(echo “$0″ | sed -e ‘s,\\,/,g’)”)
    ^^^^^^^

    SyntaxError: missing ) after argument list
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:387:25)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Function.Module.runMain (module.js:447:10)
    at startup (node.js:140:18)
    at node.js:1001:3