DEV Community

MD Taseen Khan
MD Taseen Khan

Posted on • Originally published at reactjsexample.com on

A simple web-based Notes application using ReactJS

CatatanKecilku

Catatan Sederhana Berbasis Web Menggunakan React JS + Vite 📝

A simple web-based Notes application using ReactJS

Ini adalah proyek catatan sederhana berbasis web yang dibangun dengan menggunakan React JS dan Vite. Aplikasi ini memungkinkan pengguna untuk membuat, mengedit, dan menghapus catatan secara interaktif, dan catatan-catatan tersebut disimpan menggunakan session storage.A simple web-based Notes application using ReactJS

Author: AlulCOde 🧑‍💻

Open Source: Ya, proyek ini sepenuhnya open source! Anda dapat menemukan kode sumbernya di GitHub.

Cara Menggunakan Aplikasi 🚀

Untuk menggunakan aplikasi ini, ikuti langkah-langkah berikut:

  1. Instalasi Dependencies 📦 Pastikan Anda telah menginstal Node.js di komputer Anda. Jika belum, Anda dapat mengunduhnya dari situs web resmi Node.js.

  2. Menjalankan Aplikasi ▶️ Setelah semua dependencies terinstal, Anda dapat menjalankan aplikasi dengan perintah berikut:

  3. Menggunakan Aplikasi 📓

  4. Simpan Catatan Menggunakan Session Storage 💾

Struktur Proyek 📂

Struktur proyek ini terdiri dari beberapa direktori dan berkas utama:

  • src/: Direktori ini berisi kode sumber aplikasi.
    • components/: Direktori ini berisi komponen React yang digunakan dalam aplikasi, seperti NoteList, NoteForm, dan lainnya.
    • App.js: Berkas ini adalah komponen utama yang mengatur tampilan dan logika aplikasi.
  • index.html: Berkas HTML utama aplikasi.
  • main.js: Berkas JavaScript utama yang menginisialisasi aplikasi React.
  • vite.config.js: Berkas konfigurasi Vite.

Catatan Tambahan 📌

Aplikasi ini hanya menyimpan catatan dalam session storage browser, sehingga catatan-catatan tersebut akan hilang saat Anda menutup browser atau membuka halaman dalam tab yang berbeda. Untuk menyimpan catatan secara permanen, Anda dapat mengintegrasikan aplikasi dengan backend dan database.

Selamat mencoba dan selamat berkoding! Jika Anda memiliki pertanyaan atau masalah, jangan ragu untuk menghubungi kami. 😊

GitHub

View Github

Top comments (0)