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...

Software Requirements Specification (SRS) Modul Akuntansi, Sales, dan Purchase Order 1. Pendahuluan 1.1 Tujuan Dokumen Dokumen Software Requirements Specification (SRS) ini bertujuan untuk: Mendefinisikan kebutuhan fungsional dan non-fungsional aplikasi web internal perusahaan yang mengacu pada konsep Odoo (accounting, sales, purchase order). Menjadi acuan bagi tim pengembang, analis sistem, QA, dan stakeholder terkait dalam proses desain, implementasi, dan pengujian. Menjadi dasar untuk pengukuran keberhasilan implementasi sistem. 1.2 Ruang Lingkup Sistem Aplikasi ini adalah sistem ERP sederhana berbasis web dengan modul utama: Sales (Penjualan) Purchase Order (Pembelian) Accounting (Akuntansi) Karakteristik utama: Aplikasi monolith, dibangun dengan Django (backend & frontend) dan MySQL sebagai database. Styling menggunakan Bootstrap . Fokus pada: Kemudahan penggunaan (usability) . Keamanan aplikasi (security) . Digunakan secara i...