Belajar ReactJS - Sejarah, Latar Belakang & Mengapa Membutuhkan ReactJS

#Pendahuluan

Sebelum kalian menulis komponen React, penting untuk paham dari mana React lahir dan masalah apa yang dia pecahkan. React tidak diciptakan sebagai tren — dia lahir dari masalah nyata di Facebook: halaman berita yang harus menampilkan data berubah-ubah ke jutaan pengguna tanpa membuat UI berkedut atau tidak sinkron.

Episode 1 membawa kalian menyusuri evolusi React, dari prototype internal tahun 2011 sampai posisinya hari ini sebagai fondasi ekosistem frontend terbesar. Setelah episode ini, kalian akan paham kenapa React dirancang seperti sekarang, dan itu membuat semua episode selanjutnya jauh lebih bermakna — bukan sekadar menghafal sintaks.

#Evolusi dan Sejarah React

#Kelahiran React di Facebook

React dibuat oleh Jordan Walke, engineer Facebook, sekitar tahun 2011 untuk mengatasi masalah sinkronisasi data di News Feed. Prototipe awalnya bernama FaxJS, lalu diadopsi untuk fitur lain seperti Instagram pada 2012, dan akhirnya dirilis open source pada 2013. Ini momen penting: untuk pertama kalinya, sebuah library menawarkan konsep declarative UI di mana pengembang cukup mendeskripsikan tampilan yang diinginkan.

2011  Prototype FaxJS di News Feed Facebook
2013  React dirilis open source
2015  React Native untuk aplikasi mobile
2016  react-router 4 dan ekosistem Redux matang
2019  Hooks resmi rilis di React 16.8
2022  Server Components diperkenalkan

Perhatikan satu garis besarnya: dari library kecil untuk News Feed, React tumbuh menjadi ekosistem yang mencakup web, mobile, dan server.

#Perkembangan Ekosistem: ReactDOM, React Native, dan Hooks

React terpisah menjadi dua bagian: react berisi logika inti, dan react-dom berisi renderer untuk web. Pemisahan ini memungkinkan lahirnya React Native pada 2015 — renderer yang menargetkan komponen iOS dan Android asli. Lalu pada 2019, Hooks (React 16.8) menggantikan mayoritas pola class component dan membuat state logic bisa dipakai ulang tanpa class.

#React Klasik vs Modern

Perbedaan paling mencolok antara React klasik dan modern:

• Klasik: class component dengan this.state, lifecycle method seperti componentDidMount, dan render via method render.
• Modern: function component dengan hooks seperti useState, useEffect, dan useMemo.

Modern React lebih singkat, tidak memakai this, dan logika yang mirip bisa diekstrak ke custom hooks. Seluruh series ini memakai pola modern, karena itulah arah yang didukung penuh oleh tim React.

#Masalah yang Diselesaikan React

#Komposabilitas UI dan Reusable Component Architecture

Sebelum React, halaman web dibangun dengan menulis HTML statis lalu memanipulasinya dengan jQuery. Setiap tombol, modal, atau daftar ditulis ulang di banyak tempat. React memperkenalkan component — potongan UI yang bisa dipakai ulang dengan props yang berbeda:

Komponen yang bisa dipakai ulang

function Tombol({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>
}
 
function App() {
  return (
    <div>
      <Tombol label="Simpan" onClick={() => console.log("disimpan")} />
      <Tombol label="Batal" onClick={() => console.log("dibatalkan")} />
    </div>
  )
}

Fungsi Tombol di atas dipakai dua kali dengan props berbeda. Inilah komposabilitas: komponen kecil disusun menjadi antarmuka besar, dan setiap bagian bisa diperbaiki tanpa mengganggu bagian lain.

#Virtual DOM untuk Update yang Efisien

Masalah terbesar jQuery dan DOM manipulation manual: setiap perubahan kecil memaksa kalian mencari elemen, mengubahnya, lalu menyinkronkan state di banyak tempat — rawan bug dan lambat. React memperkenalkan Virtual DOM, representasi JavaScript dari UI yang murah untuk dibuat:

state berubah -> render virtual tree -> diff (reconciliation) -> patch DOM nyata

Ketika state berubah, React membuat pohon virtual baru, membandingkannya dengan pohon sebelumnya lewat proses yang disebut reconciliation, lalu hanya memodifikasi bagian DOM nyata yang benar-benar berbeda. Hasilnya: update UI tetap konsisten tanpa kerja manual.

#Perbandingan dengan Pendekatan Tradisional

#jQuery vs React

jQuery menyelesaikan masalah kompatibilitas browser dan seleksi elemen, tapi menyerahkan seluruh tanggung jawab sinkronisasi state kepada pengembang. Semakin kompleks aplikasinya, semakin banyak kode yang berulang. React sebaliknya: kalian mendeskripsikan tampilan berdasarkan state, dan React yang bertanggung jawab menyesuaikan DOM.

#Server-Side Rendering Tradisional vs SPA

Sebelum SPA, setiap interaksi memuat ulang halaman dari server. React memindahkan rendering ke browser sehingga navigasi terasa instan dan interaksi berlangsung tanpa reload penuh. Inilah yang membuat React banyak dipilih untuk aplikasi interaktif — dashboard, chat, e-commerce, dan kanban.

npm install react react-dom

Perintah npm install react react-dom menambahkan dua package inti React. Cukup ini untuk memulai — episode 3 akan memakai Vite agar setup lebih rapi.

#Kenapa React Banyak Dipilih

Beberapa alasan kenapa React mendominasi pengembangan UI:

• Ekosistem terbesar: ribuan library siap pakai dari router, state management, sampai testing.
• Dukungan perusahaan: dipakai oleh Facebook, Instagram, WhatsApp, Netflix, dan Airbnb.
• Skill yang bisa dipindahkan: konsep yang sama berlaku di React Native dan Next.js.
• Komunitas dan lowongan kerja yang sangat banyak dibanding framework lain.

React juga tidak memaksa memakai satu pendekatan — kalian bebas memilih router, state manager, dan struktur folder. Fleksibilitas ini adalah kekuatan sekaligus tanggung jawab yang akan kita kelola di episode 18.

#Penutup

Episode 1 memberi kalian konteks sejarah dan alasan filosofis di balik React: lahir dari masalah sinkronisasi UI di Facebook, memecahkan kompleksitas DOM dengan component dan declarative UI, serta menawarkan efisiensi lewat Virtual DOM.

Inti yang harus dibawa pulang:

• React lahir di Facebook tahun 2011-2013 dan dirilis open source pada 2013.
• React terpisah menjadi logika inti dan renderer: react-dom untuk web, React Native untuk mobile.
• React modern memakai function component dan hooks, bukan class component.
• Virtual DOM dan reconciliation membuat update UI efisien dan konsisten.
• Component dengan props memberikan komposabilitas dan reusability.
• React dipilih karena ekosistem besar, dukungan perusahaan, dan skill yang portabel.

Di episode 2 selanjutnya kita akan membedah konsep dasar & arsitektur utama — cara kerja Virtual DOM dan reconciliation di balik layar, render cycle dan commit phase, peran JSX, Babel, dan bundler, serta arsitektur React Fiber dengan concurrent rendering. Siapkan mental untuk melihat apa yang terjadi di dalam React.