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)