Mengenal Apa Itu Preact? – Dalam beberapa tahun terakhir, React tetap menjadi library yang paling sering digunakan untuk membangun single-page application. Ada banyak alasan mengapa React sangat populer, misalnya komunitas yang luas, performance yang bagus, dan code-nya yang bersih.
Tetapi terkadang kita juga perlu solusi yang lebih ringan dan itulah inti dari Preact, alternatif React yang lebih ringan.
Preact adalah library yang mengklaim sebagai “alternatif 3KB dari React dengan API yang sama”. Preact juga menerapkan DOM virtual. Dibandingkan dengan library JavaScript lainnya, Preact memiliki ukuran paling kecil (3KB)
Daftar Isi :
Tujuan Preact yang Tertera Dalam dokumentasi
- Performance: Render quickly & efficiently.
- Size: Small size, lightweight (approximately 3.5kb).
- Efficiency: Effective memory usage (avoiding GC thrash).
- Understandability: Understanding the codebase should take no more than a few hours.
- Compatibility: Preact aims to be largely compatible with the React API.
Jalanin Preact Lewat CDN
Buat aplikasi yang simple, Preact tidak perlu build tools juga lho.
<!DOCTYPE html>
<html>
<body>
<script type="module">
import { h, Component, render } from 'https://unpkg.com/preact?module'
// 'h' itu sama dengan React.CreateElement
const app = h('h1', null, 'Hello Merixstudio!')
render(app, document.body)
</script>
</body>
</html>
Atau kalo Anda ingin memakai html template:
<script type="module">
import { h, Component, render } from 'https://unpkg.com/preact?module'
import htm from 'https://unpkg.com/htm?module'
// Initialize htm
const html = htm.bind(h)
const app = html`<h1>Hello Merixstudio!</h1>`
render(app, document.body)
</script>
Preact CLI
Preact CLI juga bisa diinstall lokal komputer. Anda hanya tinggal install menggunakan NPM.
npm install -g preact-cli
Membuat project baru:
preact create default my-project
Baca Juga : Mengenal Pengertian React JS
Baca Juga : Apa Itu Bibliografi
Preact API
Preact API 99.99% mirip kaya React API. Tidak percaya? Liat saja kode di bawah ini:
import { h } from 'preact'
import { useState } from 'preact/hooks'
const Counter = () => {
const [count, setCount] = useState(0)
const increment = () => setCount(count + 1)
const decrement = () => setCount(count - 1)
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
)
}
Integrasi dengan Project React
Untuk Project/ Library yang mengggunakan React, bisa juga diarahin supaya menggunakan Preact lho. Tinggal ubah alias module-nya di konfigurasi bundler Anda.
{
"resolve": {
"alias": {
"react": "preact/compat",
"react-dom": "preact/compat"
}
}
}
Haruskah Anda Menggunakan Preact?
Kelebihan utama dari Preact yaitu tadi, ukurannya yang lebih kecil. Ukuran lebih kecil tadi secara langsung bakal mengefek ke performa user saat download bundle script di website Anda.
Jika Anda hanya membuat project kecil, go with it. Tapi jika Anda ingin membuat project besar yang membutuhkan banyak library yang hanya compatible sama React, I don’t think you should. (codepolitan.com)
Baca Juga : Seri Belajar Laravel: Apa Itu Laravel Airlock?
Baca Juga : Apa Itu Native Ads, Jenis Iklan yang Sedang Trend di Indonesia
