Assalamu'alaikum Warahmatullahi Wabarakatuh, Salam sejahtera bagi kita semua, Syalom, Oom Swastiastu, Namo Buddhaya, Wei De Dong Tian, Salam kebajikan.
Sudah 1 tahun 5 bulan pensi JGRP sekarang mau coba aktif di forum aja hehe, fokus belajar, belajar, dan belajar. Kali ini saya akan ngasih tau kalian belajar React.js buat yang masih awam, baru belajar. [DISCLAIMER SAYA JUGA MASIH BELAJAR HEHE].
Belajar React untuk Pemula – CRUD Notes App
Apa yang Akan Dibuat?
Aplikasi Notes App dengan fitur:
Menambah catatan
Melihat daftar catatan
Mengedit catatan
Menghapus catatan
Semua data disimpan di local state (tanpa backend dulu).
Tools & Teknologi
React.js (Vite atau Create React App)
CSS dasar atau Tailwind (opsional)
Tanpa backend (menggunakan state React)
Langkah 1: Setup Project
Buka Command Prompt (CMD) Ketik:
1. npm create vite@latest react-notes-app --template react
2. cd react-notes-app
3. npm install
4. npm run dev <-- untuk vite
5. npm start <-- untuk react
Struktur Sederhana
src/
├── App.jsx
├── components/
│ ├── NoteForm.jsx
│ └── NoteList.jsx
└── main.jsx
Langkah 2: Buat Komponen NoteForm.jsx
https://www.urldikit.my.id/yqHOTJD
Langkah 3: Komponen NoteList.jsx
https://www.urldikit.my.id/YaUsZsA
Langkah 4: Gabungkan di App.jsx
https://www.urldikit.my.id/7Fh6K72
Tambahan: Style Simpel
Tambahkan di index.css atau App.css
https://www.urldikit.my.id/AOk9hFH
Selesai!
Kamu sekarang punya aplikasi CRUD sederhana dengan React. Proyek ini cocok untuk memahami:
State & props
Lifting state up
Handling form
Basic event handling
Itu dia tutorial sederhana membuat aplikasi CRUD dengan React untuk yang baru belajar/awam. Cocok banget buat kamu yang baru mulai belajar React dan ingin memahami konsep state, props, dan event handler secara praktis.
Silakan kembangkan lagi fiturnya — misalnya dengan menyimpan data ke localStorage, menambahkan filter pencarian, atau bahkan menghubungkannya ke backend seperti Firebase atau Express!
Kalau ada yang mau ditanya, didiskusikan, atau butuh bantuan lanjut, feel free komen di bawah ya!
Semangat ngoding dan terus eksplor skill barumu!