DEV Community: Muhamad Isro Sabanur

Pengenalan React.js: Library JavaScript untuk Membangun UI Modern

Muhamad Isro Sabanur — Fri, 30 May 2025 07:47:41 +0000

Pengenalan React.js: Library JavaScript untuk Membangun UI Modern

Apa itu React.js?

React.js adalah library JavaScript yang digunakan untuk membangun antarmuka pengguna (user interface), terutama untuk aplikasi web satu halaman (single-page applications). React dikembangkan oleh Facebook dan kini digunakan oleh perusahaan besar seperti Instagram, Airbnb, dan Netflix.

Kenapa Memilih React?

Beberapa alasan kenapa React sangat populer di kalangan developer:

Component-Based: Kode dapat dipecah menjadi komponen kecil yang reusable.
Declarative: Lebih mudah memahami dan memprediksi UI hanya dengan melihat kode.
Virtual DOM: Mempercepat proses rendering dengan cara membandingkan perubahan data di DOM secara efisien.
Ecosystem yang Kuat: Didukung oleh komunitas besar dan banyak tools tambahan seperti React Router, Redux, dll.

Konsep Dasar

1. Komponen

Komponen adalah blok utama dalam React. Komponen bisa berupa fungsi atau class.

Contoh komponen fungsi:


javascript
function HelloWorld() {
  return <h1>Hello, world!</h1>;
}

Pengenalan Next.js: Framework React untuk Web Modern

Muhamad Isro Sabanur — Fri, 30 May 2025 07:37:53 +0000

Pengenalan Next.js: Framework React untuk Web Modern

Apa itu Next.js?

Next.js adalah framework React yang dibangun oleh tim Vercel. Framework ini dirancang untuk memudahkan pengembangan aplikasi React dengan fitur-fitur powerful seperti:

Server-side rendering (SSR)
Static site generation (SSG)
Incremental static regeneration (ISR)
API routes
Optimasi performa secara otomatis

Fitur Unggulan

1. Routing Otomatis

Next.js menggunakan sistem file-based routing. Artinya, file .js atau .tsx yang kamu letakkan di dalam folder pages/ akan otomatis menjadi sebuah route.

Contoh:


bash
pages/
  index.js       -> '/'
  about.js       -> '/about'
  blog/[slug].js -> '/blog/:slug'



### 2. **Rendering Fleksibel**
Next.js mendukung berbagai jenis metode rendering:

SSR (Server-Side Rendering):
Menggunakan getServerSideProps untuk mengambil data di server setiap kali request.

SSG (Static Site Generation):
Menggunakan getStaticProps dan getStaticPaths untuk generate halaman statis saat build.

ISR (Incremental Static Regeneration):
Kombinasi kekuatan SSG dan kemampuan update data di background.

3. API Routes
Next.js memungkinkan kamu membuat backend API tanpa perlu server terpisah. Buat file di dalam pages/api/, dan file tersebut bisa diakses sebagai endpoint API.

🔍 Understanding the DOM: A Beginner-Friendly Guide

Muhamad Isro Sabanur — Tue, 27 May 2025 15:28:40 +0000

When you're just starting out in frontend development, one term that comes up a lot is DOM. You might have heard it in tutorials, read about it in docs, or even seen errors that mention it — but what is it exactly?

In this post, I’ll explain the DOM like you’re five (okay, maybe more like fifteen), and show how it powers the magic behind every interactive website you use.

🌳 What Is the DOM?

The DOM stands for Document Object Model.

Think of the DOM as a tree structure that represents the content of a web page. Every HTML element becomes a node in this tree.

When your browser loads a web page, it parses the HTML and builds the DOM from it. JavaScript can then interact with this DOM to read, change, add, or remove elements from the page — in real time!

📌 DOM is not the HTML itself — it's a live representation of it in memory.

🧩 DOM Tree: A Simple Visual

Let’s say you have this HTML:


html
<html>
  <body>
    <h1>Hello World</h1>
    <p>This is a paragraph</p>
  </body>
</html>