Tech Stack

Apa yang dipakai untuk mengembangkan web app hari ini?

📚 Notion

Sebagai “engine” untuk membuat, mengedit, dan mengelola konten website. Bisa berupa teks artikel, gambar, file dan media. Buat basis data, dan atur ide-ide.

⚛️ React

Front-end JavaScript library yang digunakan untuk membangun user interface berbasis components.

Cara mainnya itu seperti main balok LEGO

• Susun Balok: Kita tidak langsung membuat bangunan besar, tapi menyusunnya dari balok-balok kecil (seperti tombol, kotak foto, atau tulisan).

• Pasang Lagi: Kalau sudah punya satu balok yang bagus, kita bisa pasang di mana saja tanpa harus membuat baru.

• Cepat Berubah: Kalau ada yang diganti, hanya balok itu saja yang berubah tanpa harus membongkar seluruh bangunannya.

Intinya React adalah alat untuk menyusun website menggunakan “balok digital” agar lebih mudah dan cepat.

😲😕😵🥴🤔😶😲

Gimana maksudnya? Coba simak contoh berikut 👇👇👇

Kita bandingkan keduanya dengan fitur Membuat Counter (Penghitung Angka). Tujuannya sederhana: Ada angka, lalu ada tombol. Kalau tombol diklik, angka bertambah satu.

• Vanilla JavaScript (Imperative)

export function setupCounter(element) {
  let counter = 0
  const setCounter = (count) => {
    counter = count
    element.innerHTML = `count is ${counter}` // 👈 Kita MANUAL ubah DOM
  }
  element.addEventListener('click', () => setCounter(counter + 1))
  setCounter(0)
}

Karakteristik Imperative:

• Kita memberitahu langkah demi langkah apa yang harus dilakukan
• Kita langsung memanipulasi DOM dengan innerHTML
• Kita manual menambahkan event listener
• Kita harus eksplisit update UI setiap kali state berubah

Analogi: Seperti memberi instruksi detail ke asisten

“Ambil elemen button” “Tambahkan event listener ke button” “Ketika di-klik, tambah counter” “Ubah teks di dalam button menjadi ‘count is X’”

• React (Deklarative)

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="card">
      <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
    </div>
  )
}

Karakteristik Declarative:

• Kita mendeskripsikan apa yang ingin ditampilkan, bukan bagaimana caranya
• Tidak ada manipulasi DOM manual - React yang handle
• UI otomatis update ketika state berubah
• Lebih fokus ke “tampilkan ini” daripada “lakukan ini, lalu itu”

Analogi: Seperti memberi hasil akhir yang diinginkan

“Saya mau button yang menampilkan count saat ini” “Ketika di-klik, count bertambah” React yang urus bagaimana implementasinya

Perbandingan Mental Model 🧠

🦄 Tailwind CSS

Tool untuk styling website. Untuk styling interface atau mendesain tampilan website menggunakan utility classes.

Utility classes di Tailwind CSS adalah kelas-kelas CSS siap pakai yang memiliki fungsi tunggal dan spesifik (low-level), seperti text-center, bg-red-500, atau p-4.

Dengan menggunakan utility classes, developer dapat membangun desain kustom secara langsung di dalam file HTML tanpa harus menulis kode CSS kustom secara terpisah. Pendekatan ini mempercepat pengembangan dan mempermudah kustomisasi komponen.

Poin-poin penting terkait utility classes di Tailwind 👇👇👇

1. Fungsi Tunggal: Setiap utility class hanya mengatur satu properti CSS (contoh: pt-4 hanya untuk padding-top: 1rem).

2. Langsung di HTML: Styling dilakukan dengan menggabungkan banyak utility class kecil di elemen HTML, misalnya <div class="p-4 m-2 bg-white rounded">.

3. Komprehensif: Tailwind menyediakan utility untuk layout (Flexbox/Grid), spasi, warna, tipografi, dan lainnya.

4. Mempercepat Produksi: Tidak perlu memikirkan nama kelas CSS khusus (seperti .card-container-final) dan mengurangi waktu bolak-balik antara file HTML dan CSS.

5. Fleksibel: Memudahkan pembuatan desain unik tanpa terbatas pada template komponen yang kaku.