Delphi Guru

Setelah mempelajari state, conditional rendering, dan list rendering , sekarang kita masuk ke bagian penting lain dari React: Bagaimana cara menangani event (klik, input, submit) dan bagaimana mengontrol data dalam form melalui konsep Controlled Components . Dua konsep ini adalah fondasi untuk membuat form, search bar, login form, dan hampir semua interaksi user. 🎯 Apa yang Akan Kamu Pelajari? Cara menangani event di React Perbedaan event handler React vs JavaScript biasa Apa itu Controlled Component Cara membuat input yang selalu sinkron dengan state Form handling lengkap (input, textarea, select) Contoh aplikasi: Form Login sederhana 🟦 1. Handling Events di React React menggunakan event handler yang mirip seperti JavaScript, tetapi ada beberapa perbedaan: ✔ Penamaan event menggunakan camelCase HTML biasa: < button onclick = "handleClick()" >Klik </ button > React: <button onClick={handleClick}> Klik </button> ✔ ...

Pada artikel sebelumnya , kita sudah membahas tentang State dan bagaimana ia mengubah tampilan UI secara dinamis. Sekarang saatnya mempelajari dua konsep penting dalam React yang akan sangat sering digunakan di proyek nyata: Conditional Rendering dan List Rendering . Keduanya sangat erat kaitannya dengan bagaimana React menampilkan UI secara dinamis bergantung pada data atau kondisi tertentu. 🎯 Apa yang Akan Kita Pelajari? Apa itu Conditional Rendering Cara membuat kondisi dengan if , && , dan ternary ?: Apa itu List Rendering Menggunakan .map() untuk merender daftar Menangani key agar tidak muncul error Contoh praktik: To-Do list sederhana 🟦 1. Apa Itu Conditional Rendering? Conditional Rendering adalah teknik untuk menampilkan komponen/tampilan berdasarkan kondisi tertentu . Analogi sederhana: Jika user sudah login → tampilkan Dashboard Jika belum login → tampilkan tombol Login React tidak memiliki sintaks khusus untuk ini, cukup meng...

Pada artikel sebelumnya saya sudah belajar membuat project React, memahami JSX, component, dan props. Pada tahap itu, UI masih bersifat statis . Mulai artikel ini, React akan terasa semakin menarik karena saya mulai belajar bagian penting yang membuat UI menjadi dinamis : State & Event Handling . 1. Apa Itu State dalam React? State adalah data internal yang disimpan oleh sebuah component. Berbeda dengan props yang dikirim dari luar, state dikelola di dalam component dan dapat berubah seiring interaksi. Ketika state berubah → React otomatis me-render ulang tampilan terkait. React menyediakan hook bernama useState untuk membuat state. Contoh dasar: import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Tambah</button> </div> ); } export default Counter; Penjelasan singkat: co...

Pada artikel ini saya langsung memadukan dua hal penting dalam belajar React: Setup project React menggunakan Vite Belajar konsep fundamental React: JSX, Component, dan Props Tujuannya sederhana: belajar konsep sambil langsung praktik . 1. Instalasi React Menggunakan Vite Vite adalah tool modern dan sangat cepat untuk membuat project React. Langkah-langkahnya: 1) Persiapan Awal Pastikan Node.js sudah terinstal. Periksa dengan perintah: node -v  Pastikan versi Node 20.19.x atau lebih baru. Jika belum ada atau masih versi lama silakan download Node.js terbaru (LTS) di website resmi: https://nodejs.org  Atau pilih versi: Node 20.19.x atau lebih baru Atau Node 22.x 2) Membuat Project Baru Jalankan perintah berikut di terminal: npm create vite@latest react-belajar --template react 3) Masuk ke folder project & install dependencies cd react-belajar npm install 4) Jalankan project npm run dev Jika berhasil, Anda akan melihat halaman React default di br...

Kenapa Saya Belajar React React adalah salah satu library JavaScript paling populer untuk membangun antarmuka pengguna modern. Banyak perusahaan besar menggunakannya, komunitasnya kuat, dokumentasinya lengkap, dan peluang kerja di bidang Front-End yang menggunakan React sangat luas. Saya memutuskan untuk belajar React dari dasar, benar-benar dari level pemula, dengan tujuan: Memahami konsep fundamental React, bukan hanya menghafal syntax. Membangun aplikasi nyata menggunakan React. Mendokumentasikan proses belajar saya agar bermanfaat bagi orang lain. Menjadikan tulisan ini sebagai arsip pribadi untuk bahan evaluasi dan pengingat. Cara Saya Belajar React Saya mengikuti pendekatan belajar bertahap, berbasis praktik, dan berorientasi pada pemahaman konsep. Setiap topik yang saya pelajari akan saya dokumentasikan di blog ini lengkap dengan contoh kode, catatan kesalahan, dan hal-hal yang saya pelajari. Setiap artikel akan terdiri dari: Topik yang dipelajari Kenapa topik tersebut penting P...

📊 Menampilkan Data dalam Grafik & UI Interaktif Di seri sebelumnya, kita sudah membuat Web App sederhana menggunakan Google Apps Script (GAS). Sekarang, kita akan melangkah lebih jauh: membuat dashboard visual berbasis web yang menampilkan data dari Google Sheets dalam bentuk tabel dan grafik. Dashboard seperti ini bisa kita gunakan untuk: ✅ Laporan penjualan ✅ Statistik kehadiran ✅ Monitoring stok barang ✅ Rekap kinerja GAS + Sheets + HTML + Chart = solusi lengkap tanpa server tambahan! 🎯 Tujuan Seri Ini Di seri kali ini, kita akan: Membaca data dari Google Sheets Mengirim data ke halaman HTML Menampilkan data dalam tabel Membuat grafik menggunakan Google Charts Men-deploy sebagai Web App ✅ 1. Source Data Misal kita punya data penjualan di Sheet “Penjualan”: Tanggal Produk Jumlah 2025-01-01 A 10 2025-01-02 B 12 2025-01-02 A 7 Kita akan membuat grafik jumlah penjualan by tanggal. ✅ 2. Code.gs — Ambil Data dari Sheet Buat file Code.gs : funct...

Pada seri sebelumnya, kita telah belajar Menghubungkan Google Apps Script dengan API Eksternal . Pada seri ini, kita akan belajar membuat Web App menggunakan Google Apps Script (GAS). Dengan Web App, kita bisa membuat aplikasi berbasis web yang berjalan di server Google — tanpa harus menyewa hosting, tanpa backend kompleks, dan dapat diakses lewat URL! Kita akan membahas: Apa itu Web App di GAS Bagaimana Web App bekerja Struktur fungsi doGet() dan doPost() Membuat Web App sederhana Men-deploy Web App Mengirim data dari HTML ke GAS Contoh Web App mini (form input → Spreadsheet) ✅ 1. Apa Itu Web App di GAS? Web App di Google Apps Script adalah aplikasi web yang berjalan di server Google, dapat diakses melalui URL publik/privat, serta dapat menerima HTTP request (GET/POST). Dengan Web App, kita dapat: ✅ Membuat form custom ✅ Membaca/menulis data ke Google Sheets ✅ Membuat dashboard sederhana ✅ Integrasi API ✅ 2. Cara Kerja Web App Web App bekerja meng...