CRUD React JS: Pengertian, Instalasi, dan Implementasi
Irhan Hisyam Dwi Nugroho
•
27 February 2025
•
410
CRUD React JS adalah konsep dasar yang wajib dikuasai kalau mau bikin aplikasi web yang bisa menambah, menampilkan, mengedit, dan menghapus data. Dengan React JS, semua itu bisa dilakukan dengan lebih efisien dan modern.
Kalau masih bingung gimana cara menerapkannya, tenang, MinDi bakal jelasin dari nol. Mulai dari pengertian CRUD, cara instalasi React JS, sampai implementasi lengkap yang bisa langsung dicoba.
Biar gak makin penasaran, yuk langsung simak pembahasannya!
Baca juga : Contoh Pemrograman Dart: Sintaks, Program, dan Implementasi
Pengertian CRUD dan React JS
CRUD adalah singkatan dari Create, Read, Update, dan Delete, yang merupakan empat operasi utama dalam pengelolaan data pada aplikasi.
Create digunakan untuk menambahkan data baru, Read untuk menampilkan data, Update untuk mengedit data yang sudah ada, dan Delete untuk menghapus data.
Dalam pengembangan web modern, konsep CRUD sangat penting karena hampir semua aplikasi berbasis data membutuhkannya, mulai dari sistem manajemen pengguna hingga e-commerce.
React JS, sebagai library JavaScript populer, menyediakan cara yang lebih efisien untuk mengimplementasikan CRUD dengan komponen berbasis UI yang dinamis dan interaktif.
Baca juga : Belajar React JS dari Nol hingga Mahir untuk Pemula
Persiapan dan Instalasi
Sumber: Canva
Sebelum masuk ke implementasi CRUD React JS, ada beberapa hal yang perlu dipersiapkan agar proses pengembangannya berjalan lancar.
Mulai dari menyiapkan proyek React hingga mengatur backend sederhana untuk menyimpan data. Berikut langkah-langkahnya:
1. Instalasi React JS
React JS bisa langsung dibuat dengan perintah berikut:
npx create-react-app crud-react cd crud-react npm start |
Perintah ini akan membuat proyek React baru dan langsung menjalankannya di browser. Pastikan Node.js sudah terinstal di komputer agar perintah ini bisa berjalan dengan lancar.
2. Instalasi JSON Server sebagai Backend Sederhana
Karena kita butuh penyimpanan data sementara, JSON Server bisa digunakan sebagai backend dummy. Instal dengan perintah berikut:
npm install -g json-server |
Kemudian, buat file db.json dan isi dengan data awal seperti ini:
{ "items": [] } |
Untuk menjalankannya, gunakan perintah:
json-server --watch db.json --port 5000 |
Sekarang, JSON Server sudah siap dan bisa diakses melalui http://localhost:5000/items.
3. Instalasi Axios untuk Fetching Data
Agar React bisa berkomunikasi dengan backend, kita butuh Axios sebagai alat untuk mengirim dan mengambil data. Instal dengan perintah berikut:
npm install axios |
Dengan Axios, kita bisa melakukan request HTTP dengan lebih sederhana dibandingkan menggunakan fetch().
Baca juga : Apa Itu CRUD? Arti, Fungsi, Contoh, dan Cara Kerjanya
Implementasi CRUD di React JS
Sumber: Canva
Setelah semua persiapan selesai, sekarang kita akan mengimplementasikan fitur CRUD (Create, Read, Update, Delete) di React JS.
Setiap fitur ini akan memungkinkan aplikasi untuk menambah, menampilkan, mengedit, dan menghapus data menggunakan JSON Server sebagai backend dan Axios untuk komunikasi data.
Berikut adalah langkah-langkah implementasinya:
1. Create (Menambahkan Data Baru)
Fitur Create digunakan untuk menambahkan data ke dalam backend. Setiap kali pengguna mengisi form dan mengklik tombol “Tambah”, data akan dikirim ke server dan disimpan.
Kita akan menggunakan state untuk menyimpan input, lalu mengirim data menggunakan Axios POST request. Setelah data berhasil ditambahkan, kita bisa memperbarui tampilan secara otomatis agar pengguna langsung melihat hasilnya.
Kode:
const [newItem, setNewItem] = useState(""); const addItem = async () => { await axios.post("http://localhost:5000/items", { name: newItem }); }; return ( <div> <input type="text" onChange={(e) => setNewItem(e.target.value)} /> <button onClick={addItem}>Tambah</button> </div> ); |
Penjelasan:
- useState("") → digunakan untuk menyimpan input dari pengguna.
- setNewItem(e.target.value) → setiap kali pengguna mengetik, nilai input akan disimpan ke dalam state newItem.
- axios.post("http://localhost:5000/items", { name: newItem }) → mengirim data ke JSON Server menggunakan metode POST, menambahkan item baru ke dalam daftar.
- Tombol “Tambah” → saat diklik, akan menjalankan fungsi addItem() untuk mengirim data ke backend.
Baca juga : 5 Rekomendasi Kursus Programming Langsung Kerja Terbaik
2. Read (Menampilkan Data yang Tersedia)
Fitur Read digunakan untuk mengambil dan menampilkan data yang sudah tersimpan di backend. Saat halaman dimuat, kita akan menggunakan Axios GET request untuk mengambil data dari JSON Server.
Data ini akan disimpan dalam state, lalu ditampilkan dalam bentuk daftar di UI. Dengan cara ini, setiap perubahan data di backend akan langsung terlihat di tampilan aplikasi.
Kode:
const [items, setItems] = useState([]); useEffect(() => { axios.get("http://localhost:5000/items").then((response) => { setItems(response.data); }); }, []); return ( <div> {items.map((item) => ( <p key={item.id}>{item.name}</p> ))} </div> ); |
Penjelasan:
- useState([]) → digunakan untuk menyimpan daftar data yang diambil dari backend.
- useEffect(() => { axios.get(...) }) → kode ini dijalankan sekali saat halaman dimuat, mengambil data dari server, dan menyimpannya dalam state items.
- setItems(response.data) → menyimpan data dari server ke dalam state agar bisa ditampilkan di UI.
- .map((item) => <p key={item.id}>{item.name}</p>) → menampilkan semua data dalam bentuk daftar.
Baca juga : Apa itu Postman? Fungsi, Fitur, dan Cara Menggunakannya
3. Update (Mengedit Data yang Ada)
Fitur Update memungkinkan pengguna untuk mengedit data yang sudah ada. Saat pengguna mengetik data baru di input, kita akan menyimpan perubahan tersebut di state.
Kemudian, saat tombol “Update” diklik, kita akan mengirim perubahan tersebut ke backend menggunakan Axios PUT request. Dengan pendekatan ini, data lama di backend akan digantikan dengan data baru yang dikirim pengguna.
Kode:
const [updatedItem, setUpdatedItem] = useState(""); const updateItem = async (id) => { await axios.put(`http://localhost:5000/items/${id}`, { name: updatedItem }); }; return ( <div> <input type="text" onChange={(e) => setUpdatedItem(e.target.value)} /> <button onClick={() => updateItem(item.id)}>Update</button> </div> ); |
Penjelasan:
- useState("") → digunakan untuk menyimpan input baru dari pengguna.
- setUpdatedItem(e.target.value) → menangkap teks baru yang diketik oleh pengguna.
- axios.put("http://localhost:5000/items/${id}", { name: updatedItem }) → mengupdate data di backend berdasarkan ID, menggantikan data lama dengan data baru.
- Tombol “Update” → saat diklik, akan menjalankan fungsi updateItem() untuk menyimpan perubahan ke backend.
4. Delete (Menghapus Data yang Tidak Diperlukan)
Fitur Delete digunakan untuk menghapus data dari backend. Saat tombol “Hapus” diklik, kita akan mengirim Axios DELETE request untuk menghapus data berdasarkan ID.
Setelah data dihapus dari backend, kita bisa memperbarui tampilan agar item yang sudah dihapus tidak lagi muncul di daftar.
Kode:
const deleteItem = async (id) => { await axios.delete(`http://localhost:5000/items/${id}`); }; return ( <div> {items.map((item) => ( <div key={item.id}> <p>{item.name}</p> <button onClick={() => deleteItem(item.id)}>Hapus</button> </div> ))} </div> ); |
Penjelasan:
- axios.delete("http://localhost:5000/items/${id}") → menghapus data dari backend berdasarkan ID.
- Tombol “Hapus” → saat diklik, akan menjalankan fungsi deleteItem() untuk menghapus data dari server.
- .map() digunakan untuk menampilkan daftar item dan menambahkan tombol “Hapus” pada setiap item.
- Setelah data dihapus, React secara otomatis memperbarui UI agar data yang dihapus tidak lagi ditampilkan.
Jadi Web Developer Andal dengan Bootcamp di dibimbing.id!
Setelah memahami konsep CRUD React JS, saatnya naik level dan menguasai pengembangan web secara menyeluruh!
Yuk, ikuti Bootcamp Web Development di dibimbing.id, tempat terbaik untuk belajar langsung dari mentor berpengalaman dengan kurikulum praktis dan aplikatif.
Di sini, kamu akan memahami cara membangun website interaktif, menguasai framework modern seperti React JS, serta menerapkan konsep frontend & backend development dengan baik.
Dengan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni 96%, peluangmu untuk berkarier di dunia IT semakin terbuka lebar!
Jadi, tunggu apa lagi? Daftar sekarang di sini dan mulai perjalananmu menjadi Web Developer profesional. #BimbingSampeJadi!
Referensi
- How to do CRUD operations in ReactJS ? [Buka]
Tags
Irhan Hisyam Dwi Nugroho
Irhan Hisyam Dwi Nugroho is an SEO Specialist and Content Writer with 4 years of experience in optimizing websites and writing relevant content for various brands and industries. Currently, I also work as a Content Writer at Dibimbing.id and actively share content about technology, SEO, and digital marketing through various platforms.
