Gunakan template project yang berada pada folder
soal-01
untuk menjawab pertanyaan-pertanyaan di bawah. Ada beberapa peraturan yang harus kalian patuhi yaitu:
- dilarang untuk mengubah nama dari variable yang ada
- dilarang untuk menghapus komentar
Kalian diminta untuk menyelesaikan pertanyaan-pertanyaan di bawah ini secara benar dan ikuti instruksi yang ada. Pada 2 soal di bawah ini kita harus menggunakan Functional Component.
Kamu diminta untuk memberikan prop-types
pada setiap component yang terdapat pada template code, berikut adalah langkah-langkah pengerjaannya:
- Lakukan instalasi React.js dari template project yang sudah disediakan pada folder
soal-01
menggunakannpm install
atauyarn
- Buka file
src/components/Navbar.js
dan berikanprop-types
sesuai dengan deskripsi berikut:purchasedItem
- description = total item yang sudah kita beli
- data type =
Number
- default value =
0
- Buka file
src/components/CardProduct.js
dan berikanprop-types
sesuai dengan deskripsi berikut:name
- description = Nama dari produk yang akan kita tampilkan
- data type =
String
- default value =
""
price
- description = Harga dari produk yang akan kita tampilkan
- data type =
Number
- default value =
""
image
- description = Gambar dari produk yang akan kita tampilkan
- data type =
String
- default value =
""
addToCart
- description = Fungsi ini akan menambahkan produk yang kita pilih ke dalam
cart
- data type =
Function
- default value = Buatlah sebuah fungsi yang akan mengembalikan null
- description = Fungsi ini akan menambahkan produk yang kita pilih ke dalam
- Buka file
src/components/CardProduct.js
dan berikanprop-types
sesuai dengan deskripsi berikut:name
- description = Nama dari produk yang akan kita beli
- data type =
String
- default value =
""
price
- description = Harga dari produk yang akan kita beli
- data type =
Number
- default value =
""
amount
- description = Jumlah dari produk yang akan kita beli
- data type =
Number
- default value =
""
increase
- description = Fungsi ini akan menambahkan jumlah dari produk yang akan kita beli
- data type =
Function
- default value =
() => console.log("")
decrease
- description = Fungsi ini akan mengurangi jumlah dari produk yang akan kita beli
- data type =
Function
- default value =
() => console.log("")
Pada kesempatan kali ini kita akan melanjutkan apa sudah kalian kerjakan pada soal pertama. Apabila pada soal sebelumnya kita sudah berhasil menambahkan prop-types
pada tiap-tiap component, maka kali ini kita akan membuat fungsionalitas dari baris kode tersebut mulai dari menambahkan item ke dalam cart
, merubah total item
yang akan kita beli, dan lain sebagainya.
Berikut adalah langkah-langkah pengerjaannya:
copy and paste
soal yang sebelumnya sudah kamu kerjakan dan ubah namanya menjadisoal-02
- Lakukan instalasi menggunakan
npm install
atauyarn
- Buka file
src/App.js
- Buatlah fungsi
addToCart
dengan spesifikasi sebagai berikut:- parameter
id [Number]
=>id
dari item yang akan kita beli
- description => Fungsi ini akan menambahkan item ke dalam
cart
. - conditions
- Apabila
cart
kosong atau kita tidak menemukan item denganid
yang identik di dalamcart
. Detailnya adalah:-
TRUE => kita akan menambahkan item ke dalam
cart
dengan struktur data sebagai berikut, default value dariamount
adalah1
{ id: 1, name: "espresso", price: 2, amout: 1 }
-
FALSE => kita akan menambah jumlah dari
amount
menjadi+1
-
- Apabila
- parameter
- Buatlah fungsi
increaseCartAmount
dengan spesifikasi sebagai berikut:- parameter
id [Number]
=>id
dari item yang akan kita beli
- description => Fungsi ini akan menambahkan jumlah item yang akan kita beli dengan
+1
, apabila ia memilikiid
yang identik dengan parameter yang telah diberikan
- parameter
- Buatlah fungsi
decreaseCartAmount
dengan spesifikasi sebagai berikut:- parameter
id [Number]
=>id
dari item yang akan kita beli
- description => Fungsi ini akan menambahkan item ke dalam
cart
. - conditions
- Perlu melakukan pengecekan apakah jumlah item yang ingin kita beli itu lebih dari 1:
- TRUE => Kita akan mengurangi jumlah item tersebut dengan
1
- FALSE => kita akan menghapus item tersebut dari
cart
- TRUE => Kita akan mengurangi jumlah item tersebut dengan
- Perlu melakukan pengecekan apakah jumlah item yang ingin kita beli itu lebih dari 1:
- parameter
- Buatlah
useEffect
yang mana ia akan memantau perubahan dari variablecart
, apabila ada perubahanan pada variable tersebut maka:- Kita perlu menghitung total harga dari item yang kita masukan ke dalam variable
cart
kemudian memasukan hasilnya ke dalam variabletotal
- Kita perlu menghitung jumlah item yang kita telah masukan ke dalam variable
cart
kemudian masukan hasilnya ke dalam variablepurchasedItem
- Kita perlu menghitung total harga dari item yang kita masukan ke dalam variable
- Peserta memahami cara menggunakan ReactJS
- Peserta memahami cara instalasi project ReactJS yang sudah ada
- Peserta memahami dan mampu melakukan implementasi
prop-types
ke dalam Functional Component - Peserta memahami dan mampu melakukan implementasi
useState
- Peserta memahami dan mampu melakukan implementasi
useEffect