Pemrograman Berbasis Framework 2024 | |
---|---|
NIM | 2141720266 |
Nama | Alfan Marcel Mulyawan |
Kelas | TI-3A |
Prakktikum 1 : Membuat Variasi Ukuran Teks Heading dengan context
Langakah 1 : Buat project baru dan repo baru di github
Langkah 2 : Buat Struktur Folder dengan prinsip atomic design
Pada langkah ke 2 ini saya mengiinput kode yang sesuai dengan panduan praktikum.
Soal 1
Capture hasilnya dan buatlah laporan di README.md. Jelaskan apa yang telah Anda pelajari dan bagaimana tampilannya saat ini?
Dengan menggunakan atomic design ini, struktur penulisan kode untuk sintaks lebih mudah digunakan dan untuk component yang memiliki struktur yang mirip ataupun class yang sama dapat menggunakan function component yang sudah dibuat tanpa harus menulis kode yang sama berulang kali, sehinga lebih meudahkan dalam penulisan kode atau pemangilan kode berikutnya . hanya perlu memasukkan parameter untuk kedinamisan tampilkan yang dihasilkan dari kode yang dibuat. Tampilan laman yang ditampilkan dapat seperti hasil dari kode html yang umum digunakan, dengan variasi penggunaan heading.
Langkah 3 :Buat dan gunakan Contect
Soal no 2 :
Meneruskan suatu value dapat dilakukan dengan menggunakan context, sehingga child hanya perlu mengakses value dari node atas terdekat atau parent, tanpa perlu diberi value untuk masing-masing child. Meskipun menggunakan context, tampilan laman yang dihasilkan masih sama seperti sebelumnya.
Langkah 5: Menggunakan dan menyediakan context dari komponen yang sama
Soal No 3:
Selain dapat membagikan value ke child secara manual, context dapat mengirimkan data dengan operasi atau pola yang sama, seperti pada langkah keenam ini, dapat dilakukan pengiriman value secara auto increment, namun perbedaan tampilan saat ini adalah, ukuran font lebih kecil, dikarenakan dengan value default 1, maka saat sampai ke child nya sudah dilakukan penambahan.
Praktikum 2: Membuat Context melewati komponen perantara
Langkah 1:Buat komponen atom baru
Langkah 2: Tambahkan ProfilePage ke page.tsx lalu run
Praktikum 3: Membuat Context Tema Light/Dark
Langkah 1: Membuat variabel tema
Langkah 2: Buat komponen atom NavBar
Langkah 4: Buat masing-masing page
soal No 5
apakah toggle button tema sudah berfungsi ? jika belum, silakan perbaiki!
Mengapa ketika refresh atau berpindah halaman tema tidak permanen ? Buatlah menjadi permanen walaupun page sudah direfresh dan pindah halaman!
Hal tersebut dapat terjadi karena tidak disimpannya state tema dalam browser, masalah ini dapat diatasi dengan kode sebagai berikut.