Web developer mana yang tidak mengenal React JS? React sudah sangat familiar di telinga para web developer, jika sebelumnya kita menggunakan CRA (Create React App) yang berbasis Webpack, kali ini kita akan mencoba membuat sebuah project React dengan menggunakan Vite yang lebih cepat dibandingkan Webpack. Yukk simak tutorialnya

Mengenal React JS

React merupakan sebuah library Javascript, digunakan untuk membangun antarmuka pengguna (UI) yang diimplementasikan pada aplikasi web. React ini awalnya dikembangkan oleh Facebook, React dibuat untuk memudahkan para developer untuk mengelola atau memaintance aplikasi webnya, sehingga akan lebih effisien dalam mengembangkan sebuah aplikasi web. Pendekatan yang diterapkan pada react ialah pemrograman berbasis komponen, dimana dari beberapa element web dapat dibuat menjadi satu komponen saja yang dapat digunakan berulang kali di tempat terpisah, hal ini akan memudahkan developer.

Apa keunggulan Deno?

Deno dibuat untuk meningkatkan kapabilitas atau kemampuan lebih dari yang sudah ada pada Node.js. Beberapa kemampuan yang dimiliki Deno

Keamanan dan perizinan

Fokus utama dari Deno iyalah keamanan. Berbeda dengan Node.js, Deno menjalankan proses di sandbox, sehingga proses atau apapun yang dilakukan oleh Deno tidak memiliki akses kedalam file sistem, mengakses jaringan, menjalankan perintah dari kode lain, dan tidak dapat mengakses variabel enviromental (env).

Sebagai contoh bagaimana keamanan pada Deno, kita perhatikan kode berikut.

(async () => {
 const encoder = new TextEncoder();
 const data = encoder.encode('Hello world\n');

 await Deno.writeFile('hello.txt', data);
 await Deno.writeFile('hello2.txt', data);
})();

Jika dilihat dari kode diatas hasil yang kita bayangkan ialah jika kita jalankan kode tersebut maka akan membuat dua buah file bernama hello.txt dan hello2.txt yang akan berisi tulisan 'Hello world'.

Mari kita simpan kode diatas dengan nama write-file.js, kemudian kita jalankan dengan perintah berikut

deno run write-file.js

Hasilnya ternyata tidak langsung membuat file, tetapi terdapat konfirmasi terlebih dahulu untuk mengizinkan sistem melakukan pembuatan file, konfirmasinya akan seperti ini:

Terdapat tiga pilihan dalam melakukan konfirmasi tersebut yaitu yes (y) berarti mengizinkan, no (n) untuk menolak, dan Allow (A) yang berarti mengizinkan semua jenis izin yang sama, dalam kasus ini untuk membuat file. Jika kita memilih yes (y) maka konfirmasi ini akan muncul sebanyak 2 kali, dimana kita melakukan pembuatan file sebanyak dua file. Ketika memilih untuk no (n) maka akan mengeluarkan error bahwa terdapat kode yang tidak diizinkan untuk melakukan pembuatan file.

Kita dapat membarikan flag --allow-write agar tidak perlu memunculkan konfirmasi, yang artinya kita telah menyetujui segala bentuk perizinan untuk membuat file. Untuk flag lainnya dapat dilihat di Permission List

deno run write-file.js --allow-write

Hal ini dilakukan Denountuk menjaga keamanan dari pembuatan file diluar perizinan kita.

Ajaibnya Import di Deno

Apakah kalian berfikir bagaimana caranya agar tidak perlu menginstall package? Jika di Node.js kalian akan diwajibkan untuk menginstall ke perangkat kalian untuk dapat bisa menggunakan package dari internet. Ajaibnya Deno dapat menggunakan atau memanggil package tanpa perlu kita menginstallnya. Seperti Browser yang akan menjalankan kode langsung dari Internet atau CDN dengan URL, Deno mampu seperti itu, kita dapat langsung mengimport script hanya dengan URL package apa saja yang kita perlukan. Contohnya kalian dapat langsung menggunakan library React hanya dengan kode seperti berikut:

import React from "https://esm.sh/react";

Ajaib bukan? Kalian dapat menggunakannya di banyak penyedia layanan CDN seperti esm.sh, UNPKG, JSPM, dan penyedia CDN lainnya. Kalian tetap dapat menggunakan package.json dengan menginstallnya kedalam perangkat kalian, atau kalian dapat menginstall package yang berasal dari NPM hanya dengan memanggil kode seperti berikut:

import express from "npm:express@^4.17";

Support TypeScript (Enggak Perlu Repot-Repot)

Ketika kalian menggunakan deno, maka kalian sudah disupport oleh Denountuk menggunakan TypeScript. Tidak perlu melakukan inisialisasi atau setup pada project kalian untuk menggunakan TypeScript, kode kalian akan berjalan dengan baik tanpa adanya masalah.

Bagaimana sih cara install deno?

Buat yang pengen tau bagaimana cara menginstall Denodi perangkat kita? Mengutip dari laman deno.com ada beberapa cara untuk melakukan penginstallan deno. Berikut caranya bagi kalian yang ingin menginstall Denoini.

Install Denodi Windows

Bagi kalian yang memiliki perangkat dengan operasi sistem windows dapat melakukan salah satu cara berikut:

# Using PowerShell
irm https://deno.land/install.ps1 | iex

# Using Winget
winget install -e --id DenoLand.Deno

# Using Scoop
scoop install deno

# Using Choco
choco install deno

Install Denodi MacOS atau Linux

Bagi kalian yang memiliki perangkat dengan operasi sistem MacOS atau Linux dapat melakukan salah satu cara berikit:

# Using cURL or shell
curl -fsSL https://deno.land/x/install/install.sh | sh

# Using HomeBrew (MacOS only)
brew install deno

# Using MacPorts (MacOS only)
sudo port install deno

# Using Nix
nix-shell -p deno

---

Itu dia pengenalan mengenai Runtime Deno yang dapat meningkatkan keamanan pada project kalian, memudahkan kalian dalam melakukan import package, serta akan membuat pengalaman mengoding kalian berbeda dengan ketika anda menggunakan Node, untuk menginstall Deno pun tidak terlalu sulit. Semoga informasi yang disajikan dapat bermanfaat.

Terimakasih ^^