A simple web-based Notes application using ReactJS

CatatanKecilku

Catatan Sederhana Berbasis Web Menggunakan React JS + Vite ๐Ÿ“

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.

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.

    Setelah Node.js terinstal, buka terminal dan masuk ke direktori proyek ini. Kemudian, jalankan perintah berikut untuk menginstal semua dependencies yang diperlukan:

    npm install
    
  2. Menjalankan Aplikasi โ–ถ๏ธ Setelah semua dependencies terinstal, Anda dapat menjalankan aplikasi dengan perintah berikut:

    npm run dev
    

    Aplikasi akan dijalankan pada http://localhost:3000. Buka browser Anda dan akses alamat tersebut.

  3. Menggunakan Aplikasi ๐Ÿ““

    • Anda akan melihat tampilan aplikasi yang berisi daftar catatan kosong pada awalnya.
    • Untuk menambahkan catatan baru, klik tombol โ€œTambah Catatanโ€ di bagian atas.
    • Untuk mengedit catatan, klik pada catatan yang ingin Anda edit, lakukan perubahan, dan klik tombol โ€œSimpanโ€.
    • Untuk menghapus catatan, klik tombol โ€œHapusโ€ pada catatan yang ingin Anda hapus.
  4. Simpan Catatan Menggunakan Session Storage ๐Ÿ’พ

    • Catatan-catatan yang Anda buat akan disimpan menggunakan session storage browser Anda. Ini berarti catatan-catatan tersebut hanya akan tersedia selama sesi penjelajahan Anda. Saat Anda menutup browser atau menyegarkan halaman, catatan-catatan tersebut akan tetap ada.

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