Laporan Praktikum

	Pemrograman Berbasis Framework 2025
NIM	2241720096
Nama	Muhammad Yoanvari Al Farizi
Kelas	TI - 3B

Praktikum 1: Menyiapkan Lingkungan Pengembangan

1. Jelaskan kegunaan masing-masing dari Git, VS Code dan NodeJS yang telah Anda install pada sesi praktikum ini!

   • Git merupakan Sistem kontrol versi untuk melacak perubahan kode, kolaborasi tim, dan menyimpan proyek di repository seperti GitHub.
   • VS Code merupakan code editor yang digunakan untuk menulis, mengedit, dan mengelola kode dengan berbagai ekstensi pendukung pengembangan aplikasi.
   • NodeJS merupakan runtime JavaScript untuk menjalankan JavaScript di luar browser, berguna untuk pengembangan backend, serta menyediakan NPM untuk mengelola package dan dependensi proyek.

2. Buktikan dengan screenshoot yang menunjukkan bahwa masing-masing tools tersebut telah berhasil terinstall di perangkat Anda!

   

Praktikum 2: Membuat Proyek Pertama React Menggunakan Next.js

1. Pada Langkah ke-2, setelah membuat proyek baru menggunakan Next.js, terdapat beberapa istilah yang muncul. Jelaskan istilah tersebut, TypeScript, ESLint, Tailwind CSS, App Router, Import alias, App router, dan Turbopack!

   • TypeScript merupakan bahasa pemrograman berbasis JavaScript dengan tipe data statis untuk mencegah error saat coding.
   • ESLint merupakan alat untuk memastikan kode tetap rapi dan mengikuti standar penulisan yang baik.
   • Tailwind CSS merupakan framework CSS yang menyediakan class siap pakai untuk mempercepat desain tampilan.
   • App Router merupakan sistem routing Next.js terbaru yang menggunakan folder app/ untuk mengatur halaman.
   • Import Alias merupakan cara mempersingkat path saat mengimpor file dalam proyek, misalnya ../../components/Navbar menjadi @/components/Navbar.
   • Turbopack merupakan pengganti Webpack yang lebih cepat dalam memproses dan menjalankan proyek Next.js.

2. Apa saja kegunaan folder dan file yang ada pada struktur proyek React yang tampil pada gambar pada tahap percobaan ke-3!

   • .next/ merupakan folder hasil build Next.js yang dihasilkan secara otomatis setelah menjalankan proyek.
   • node_modules/ merupakan folder untuk menyimpan semua dependensi atau package yang diinstal melalui npm atau yarn.
   • public/ merupakan file statis seperti gambar, ikon, atau aset lain yang dapat diakses langsung oleh browser.
   • src/app/ merupakan folder utama dalam sistem App Router Next.js yang berisi halaman dan komponen utama proyek.
   • layout.tsx merupakan komponen utama yang menangani layout dasar aplikasi, seperti header dan footer.
   • page.tsx merupakan file utama yang berisi halaman utama dari aplikasi.

3. Buktikan dengan screenshoot yang menunjukkan bahwa tahapan percobaan di atas telah berhasil Anda lakukan!

   

Praktikum 3: Menambahkan Komponen React (Button)

1. Buktikan dengan screenshoot yang menunjukkan bahwa tahapan percobaan di atas telah berhasil Anda lakukan!

Praktikum 4: Menulis Markup dengan JSX

1. Untuk apakah kegunaan sintaks user.imageUrl?

   Sintaks user.imageUrl digunakan untuk mengambil nilai dari properti imageUrl dalam objek user, nilainya berisi URL gambar yang nanti ditampilkan sebagai sumber pada elemen img.

2. Buktikan dengan screenshoot yang menunjukkan bahwa tahapan percobaan di atas telah berhasil Anda lakukan!