{"id":21181,"date":"2024-05-22T12:05:00","date_gmt":"2024-05-22T05:05:00","guid":{"rendered":"https:\/\/jakarta.telkomuniversity.ac.id\/?p=21181"},"modified":"2024-09-10T18:56:22","modified_gmt":"2024-09-10T11:56:22","slug":"preact-js-alternatif-dan-versi-mini-dari-react-js","status":"publish","type":"post","link":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/preact-js-alternatif-dan-versi-mini-dari-react-js\/","title":{"rendered":"Preact JS: Alternatif dan Versi Mini dari React JS"},"content":{"rendered":"

Preact JS: Alternatif dan Versi Mini dari React JS<\/h1><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

React JS terus menjadi library\u00a0 yang paling banyak digunakan untuk membuat aplikasi satu halaman dalam beberapa tahun terakhir. Namun, ada kalanya kita juga memerlukan solusi yang lebih ringan, dan itulah tujuan utama Preact JS, alternatif yang tidak terlalu berat dibandingkan React JS. Sebuah paket bernama Preact JS menggambarkan dirinya sebagai “alternatif 3KB untuk React JS dengan API yang sama”. DOM virtual juga diimplementasikan oleh Preactjs. Preactjs adalah perpustakaan JavaScript terkecil dengan ukuran 3KB jika dibandingkan dengan perpustakaan lain.<\/span><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

Apa Itu Preact JS<\/h2><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Preactjs adalah sebuah library JavaScript yang open-source dan frontend, yang digunakan untuk membangun antarmuka pengguna (UI) dalam aplikasi web. Preactjs adalah opsi yang disukai oleh pengembang aplikasi web yang responsif dan efektif karena dirancang dengan mempertimbangkan ukuran file yang lebih kecil dan kinerja yang cepat.<\/span><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div>

\n\t
\n\t\t\n\t\t
\n\t\t\t
\"preact<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

Kelebihan Menggunakan Preact JS<\/h3><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t
    \n
  1. Kompatibilitas: Bagi kita yang sudah familiar dengan Reactjs dapat dengan mudah beralih ke Preactjs karena API-nya yang mirip. Banyak ide dan fungsi yang sama seperti saat menggunakan Reactjs untuk membuat yang didukung, termasuk siklus hidup komponen, props, status, dan komponen.<\/span><\/li>\n
  2. Ringan: Preactjs dimuat dengan cepat di browser karena sangat ringan, hanya membutuhkan ukuran file 3kB.<\/span><\/li>\n
  3. Adaptasi Belajar: Kerangka kerja Preactjs, yang mirip dengan Reactjs, memungkinkan pengembang untuk segera memulai tanpa harus memahami ide-ide baru secara menyeluruh. Hal ini memungkinkan penyesuaian lebih cepat dan mempercepat siklus pengembangan.<\/span><\/li>\n
  4. Ekosistem: Preactjs memiliki ekosistem yang jauh lebih besar daripada Reactjs, namun lebih ringan dari Reactjs. Plugin dan ekstensi tambahannya meningkatkan kemampuannya.<\/span><\/li>\n<\/ol>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

    Tutorial Install Preact JS<\/h4><\/div><\/div><\/div><\/div>
    \n\t
    \n\t\t
    \n\t\t\t
      \n
    1. Hal pertama yang wajib Anda lakukan adalah menginstall Node.js di dalam komputer. Jika Anda belum melakukannya, silahkan bisa mengunduh dan menginstall Node.js dari situs resminya <\/span>disini<\/span><\/a>. Untuk memastikan apakah Node.js berhasil diinstall di dalam komputer, maka Anda bisa menjalankan perintah berikut ini di dalam terminal\/CMD:
      \nnode -v
      \n<\/span>npm -v<\/li>\n
    2. Sekarang kita akan belajar membuat project Preactjs menggunakan Vite. Dengan menggunakan Vite proses development akan lebih ringan dan cepat. Lalu Anda bisa masuk ke dalam folder tempat akan menyimpan projectnya, kemudian jalankan perintah berikut ini di dalam terminal\/CMD: npm create vite@5.1.0 belajar-preact — –template preact<\/span><\/li>\n
    3. Perintah di atas akan melakukan clone template Preactjs dengan nama belajar- preact. Setelah itu, silahkan Anda jalankan perintah berikut ini untuk masuk ke dalam folder project-ny: cd belajar-preact<\/span><\/li>\n
    4. Jika sudah berada di dalam project-nya, silahkan teman-teman jalankan perintah berikut ini di dalam terminaI\/CMD: npm install<\/span><\/li>\n
    5. Silahkan ditunggu proses installasi dependensinya sampai selesai.<\/span><\/li>\n<\/ol>\n\n\t\t<\/div>\n\t<\/div>\n\n\t
      \n\t\t\n\t\t
      \n\t\t\t
      \"install<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
      Menjalankan Project Preact JS<\/h5><\/div><\/div><\/div><\/div>
      \n\t
      \n\t\t
      \n\t\t\t
        \n
      1. Setelah proses instalasi selesai dilakukan, sekarang kita akan belajar menjalankan project-nya. Silahkan Anda jalankan perintah berikut ini di dalam terminal\/CMD: npm run dev<\/span><\/li>\n
      2. Jika berhasil, project akan dijalankan di dalam localhost dengan port 5173. Anda bisa membukanya di dalam browser dengan mengetikkan http:\/\/localhost:5173.<\/span><\/li>\n<\/ol>\n\n\t\t<\/div>\n\t<\/div>\n\n\t
        \n\t\t\n\t\t
        \n\t\t\t
        \"tutorial<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
        \n\t
        \n\t\t
        \n\t\t\t

        Baca juga: Bootstrap Framework CSS Paling Populer dalam Pengembangan Web<\/a><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"Preact JS: Alternatif dan Versi Mini dari React JS React JS terus menjadi library\u00a0 yang paling banyak digunakan untuk membuat aplikasi satu halaman dalam beberapa tahun terakhir. Namun, ada kalanya kita juga memerlukan solusi yang lebih ringan, dan itulah tujuan utama Preact JS, alternatif yang tidak terlalu berat dibandingkan React JS. Sebuah paket bernama Preact [...]","protected":false},"author":32,"featured_media":21182,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_wds_title":"Preact JS: Alternatif dan Versi Mini dari React JS","_wds_metadesc":"Preact JS alternatif untuk React JS dengan modern API yang sama dan memiliki performa yang cepat dan berukuran hanya 3kB.","_wds_focus-keywords":"Preact JS","_wds_meta-robots-adv":"","_wds_meta-robots-noindex":false,"_wds_meta-robots-nofollow":false,"_wds_meta-robots-index":false,"_wds_meta-robots-follow":false,"_wds_autolinks-exclude":false,"_wds_canonical":"","_wds_opengraph":[],"_wds_twitter":[],"wds_primary_category":300,"footnotes":""},"categories":[300],"tags":[438,437,435,436],"class_list":["post-21181","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-pendidikan","tag-install-preact-js","tag-kelebihan-preact-js","tag-preact-js","tag-tutorial-preact-js"],"_links":{"self":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/21181","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/comments?post=21181"}],"version-history":[{"count":0,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/21181\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/media\/21182"}],"wp:attachment":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/media?parent=21181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/categories?post=21181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/tags?post=21181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}