Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ardywsptr/personal-notes-starter__submission-belajar-membuat-aplikasi-web-dengan-react

Aplikasi Personal Notes Starter - Submission kelas Belajar Membuat Aplikasi Web Dengan React yang ada di Dicoding
https://github.com/ardywsptr/personal-notes-starter__submission-belajar-membuat-aplikasi-web-dengan-react

dicoding-academy reactjs state submission-dicoding

Last synced: 1 day ago
JSON representation

Aplikasi Personal Notes Starter - Submission kelas Belajar Membuat Aplikasi Web Dengan React yang ada di Dicoding

Awesome Lists containing this project

README 

        
# Personal-notes-starter



**Personal-notes-starter** - Dibuat untuk memenuhi syarat kelulusan kelas [Belajar Membuat Aplikasi Web dengan React](https://www.dicoding.com/academies/403) di Dicoding Academy



![Author](https://img.shields.io/badge/made%20by-Ardywsptr-blue)

![GitHub followers](https://img.shields.io/github/followers/Ardywsptr?style=social)

![GitHub watches](https://img.shields.io/github/stars/Ardywsptr/AboutU.ID_Submission-Belajar-Dasar-Pemrograman-Web?style=social)

![GitHub last commit](https://img.shields.io/github/last-commit/Ardywsptr/personal-notes-starter__submission-belajar-membuat-aplikasi-web-dengan-react)







## 🚀 Deskripsi Kelas



Belajar Membuat Aplikasi Web dengan React 


Disusun oleh: Dicoding Indonesia 


Level: Pemula





  Dicoding Google Developers








Kelas ini ditujukan untuk seorang Front-End Web Developer yang ingin mengembangkan website yang komponen UI-nya reusable, deklaratif, dan bersifat reaktif terhadap perubahan data.



### Materi yang dipelajari:



- **Pengenalan React** : Berkenalan dengan React, mengetahui alasan mempelajari React, dan mengenal ekosistem yang ada di React. (95 menit)

- **Konsep Dasar React** : Belajar tentang konsep dasar React seperti composition, declarative code, unidirectional data flow, dan menyadari bahwa React hanyalah JavaScript. (165 menit)

- **React UI Component** : Belajar tentang membangun UI di React seperti mengenal element dan component. Serta, belajar juga konsep component properti yang membuat UI aplikasi bersifat reusable. (420 menit)

- **Stateful Component** : Belajar tentang class component, menggunakan state di dalam component, memahami dan mempraktikkan controlled component. (410 menit)

- **Penutup** Ujian akhir yang harus ditempuh untuk lulus dari kelas ini. (120 menit)

- **Proyek Akhir Membangun Aplikasi Web dengan React** : Menguji pemahaman peserta dengan membuat aplikasi web sederhana menggunakan React dengan menerapkan kriteria-kriteria yang telah ditentukan. (820 menit)



### Evaluasi pembelajaran:



- Ujian Akhir

- Submission: Membangun Aplikasi Catatan Menggunakan React.



Total jam yang dibutuhkan untuk menyelesaikan kelas ini, mulai dari persiapan kelas sampai evaluasi belajar, adalah **41** jam.







## Kriteria Submission :



### Berikut kriteria submission yang harus Anda penuhi:



Buatlah aplikasi web menggunakan React yang dapat menambahkan dan menghapus catatan. Agar lebih jelasnya, berikut 3 kriteria utama pada “Aplikasi Catatan Pribadi” yang harus Anda buat.



* **Kriteria Utama 1: Mampu Menampilkan Daftar Catatan**

  * Aplikasi harus mampu menampilkan daftar catatan dengan data awal (initial data) yang telah kami sediakan.

  * Memanfaatkan state component untuk menyimpan data catatan.

  * Menggunakan teknik array map untuk menampilkan daftar catatan.



* **Kriteria Utama 2: Mampu Menambahkan Catatan**

  * Aplikasi harus mampu menambahkan data catatan baru.

  * Memanfaatkan controlled component dalam membuat form input.

  * Data catatan disimpan cukup pada memori saja (akan hilang jika browser di-refresh).

  * Data catatan yang disimpan merupakan objek JavaScript yang sudah ditentukan



* **Kriteria Utama 3: Mampu Menghapus Catatan**

  * Aplikasi harus menyediakan tombol hapus untuk menghapus data catatan yang disimpan.

  * Terdapat conditional rendering di mana bila tidak terdapat data catatan, maka UI menampilkan pesan “Tidak ada catatan” atau pesan apa pun yang mengindikasikan data catatan kosong.



**Selain kriteria utama, terdapat kriteria opsional yang yang dapat Anda penuhi agar mendapat nilai yang lebih tinggi.**



* **Kriteria Opsional 1: Terdapat Fitur Pencarian Catatan**

  * Aplikasi memiliki fitur pencarian catatan berdasarkan kata kunci yang dimasukkan, dengan ketentuan:

  * Jika kolom pencarian tidak kosong, maka aplikasi hanya menampilkan daftar catatan yang judulnya mengandung kata kunci yang dimasukkan.

  * Jika kolom pencariannya kosong, maka aplikasi menampilkan seluruh catatan.

  * Memanfaatkan controlled component dalam membangun fitur catatan.



* **Kriteria Opsional 2: Terdapat Limit Karakter pada Input Judul Catatan**

  * Aplikasi dapat mencegah pengguna untuk memberikan judul catatan lebih dari 50 karakter.

  * Menggunakan state dalam melimitasi, bukan atribut maxlength.

  * Menampilkan jumlah karakter tersisa yang dapat digunakan oleh pengguna.



* **Kriteria Opsional 3: Terdapat Fitur Arsip Catatan**

  * Aplikasi memiliki fitur arsip catatan.

  * Aplikasi harus menyediakan tombol arsipkan/pindahkan untuk mengarsipkan atau memindahkan catatan dari arsip.

  * Daftar catatan yang diarsip harus ditampilkan pada tempat terpisah dari catatan yang tidak diarsip.







## Getting Started



*Untuk memulai, ikuti langkah-langkah dibawah ini :*



1. Clone this repository

   

   `git clone https://github.com/Ardywsptr/personal-notes-starter__submission-belajar-membuat-aplikasi-web-dengan-react/.git`



    `cd personal-notes-starter__submission-belajar-membuat-aplikasi-web-dengan-react`

   

2. buka terminal dan jalankan perintah

   

   `npm install`



4. jalankan project tersebut dengan jalankan perintah pada terminal



    `npm run serve`







## 📃 Keterangan



Repositori ini adalah submission dari Dicoding untuk kelas Belajar Membuat Aplikasi Web dengan React. Kelas ini memiliki submission yang harus diselesaikan untuk mendapatkan sertifikat. Isi dari repositori ini merupakan bagian final yang mencakup kriteria yang dibutuhkan.



> **_PERINGATAN: Jadikan repo ini sebagai rujukan/referensi._**

>

> - Sesuai dengan terms of use di Dicoding, submission kelas Dicoding Academy haruslah hasil karya Anda sendiri.

>

> - Kode yang didapatkan dari sumber lain (website, buku, forum, GitHub, dan lain-lain) hanya digunakan sebagai referensi. Tingkat kesamaannya tidak boleh lebih dari 70%.










> Jika ada pertanyaan atau issue, kunjungi [new issue](https://github.com/Ardywsptr/personal-notes-starter__submission-belajar-membuat-aplikasi-web-dengan-react/issues/new)

>

>Jika dokumentasi ini bermanfaat mari berteman dengan menekan tombol follow pada [profile](https://github.com/Ardywsptr) ini ☺☺☺







Big Thanks for [Dicoding](https://www.dicoding.com/)









  Dicoding