Program Studi Bisnis Digital • FEB

Lab Pemrograman

Pertemuan 3 — Komponen Aplikasi dengan HTML, CSS, JavaScript & React Native

Dari halaman web statis menuju blok bangun aplikasi mobile: memahami empat bahan dasar yang membentuk hampir semua aplikasi digital yang Anda pakai sehari-hari.

RPS MINGGU 3 • 2×50 MENIT

Tujuan Pembelajaran Hari Ini

Setelah pertemuan ini, Anda diharapkan mampu menjelaskan peran HTML, CSS, JavaScript, dan React Native serta menyusun komponen aplikasi sederhana.

PEMAHAMAN KONSEP

bahan dasar aplikasi

HTML sebagai kerangka, CSS sebagai tampilan, JavaScript sebagai interaktivitas, React Native sebagai jembatan ke aplikasi mobile.

KEMAMPUAN PRAKTIS

komponen aplikasi sederhana

Membaca dan menyusun struktur komponen (tampilan + gaya + perilaku) untuk sebuah tombol atau kartu produk sederhana.

Mengapa Anda Perlu Paham Empat Bahan Dasar Ini?

Sebagai calon manajer produk digital, Anda akan berbicara dengan developer setiap hari — memahami bahan dasarnya membuat Anda partner diskusi yang setara.

Bayangkan Anda product owner sebuah aplikasi UMKM. Developer bilang, "fitur keranjang belanja sudah selesai UI-nya, tapi logic tambah-kurang jumlah barang belum jalan." Kalau Anda tahu bahwa "tampilan" itu ranah HTML/CSS sedangkan "logic" atau perilaku itu ranah JavaScript, Anda langsung paham apa yang masih kurang — tanpa perlu developer menjelaskan ulang dari nol.

Kasus nyata: aplikasi seperti Tokopedia dan Gojek versi mobile dibangun dengan pendekatan komponen serupa React Native — satu tim menulis satu basis kode yang berjalan di HP Android maupun iPhone, menghemat waktu dan biaya pengembangan secara signifikan.

Pertanyaan yang sering muncul adalah, "saya kuliah bisnis digital, bukan teknik informatika, kenapa saya harus paham bahasa pemrograman?" Jawabannya karena posisi Anda kelak, sebagai product manager, business analyst, atau growth associate, mengharuskan Anda duduk satu meja dengan tim developer dan ikut memutuskan prioritas fitur, menilai estimasi waktu, dan memahami mengapa sebuah perubahan kecil di tampilan bisa memakan waktu lebih lama dari yang Anda kira. Contoh aplikasi UMKM tadi menunjukkan bahwa kosakata teknis dasar — tampilan versus perilaku — membuat komunikasi Anda dengan tim jauh lebih efisien. Konsep React Native yang akan kita bahas nanti juga penting karena banyak startup Indonesia, dari yang skala kecil sampai unicorn, memilih pendekatan "satu kode dua platform" ini justru karena pertimbangan bisnis: lebih hemat biaya dan lebih cepat rilis ke pasar.

Bagian 1 dari 3

Fondasi Web: HTML, CSS & JavaScript

Tiga bahasa dasar yang membangun hampir setiap halaman web di internet — kerangka, tampilan, dan perilaku.

Tahap 1: HTML — Kerangka & Struktur Halaman

HTML (HyperText Markup Language) adalah bahasa yang menyusun apa saja yang ada di sebuah halaman — judul, paragraf, gambar, tombol — tanpa mengatur tampilannya.

<tag>isi konten</tag>

Judul dan paragraf teks
Contoh: nama produk, deskripsi

Gambar produk
Tombol "Tambah Keranjang"

<div>

Kotak pembungkus/kontainer
Mengelompokkan elemen terkait

HTML, singkatan dari HyperText Markup Language, adalah bahasa paling dasar yang menentukan apa saja yang muncul di sebuah halaman web — tapi perhatikan, HTML hanya mengurus keberadaan elemen, bukan bagaimana rupanya. Setiap potongan konten dibungkus dalam apa yang disebut tag, seperti sepasang kurung siku pembuka dan penutup yang menandai jenis elemennya. Judul produk memakai tag h1, deskripsi produk memakai tag p untuk paragraf, foto produk memakai tag img, dan tombol beli memakai tag button. Ada juga tag div, yang fungsinya seperti kotak kardus kosong untuk mengelompokkan beberapa elemen yang berkaitan, misalnya membungkus foto, nama, dan harga sebuah produk di aplikasi seperti Bukalapak menjadi satu "kartu produk". Tanpa CSS, halaman HTML murni akan terlihat sangat polos: teks hitam di atas latar putih tanpa warna atau tata letak yang rapi — itulah tugas CSS yang akan kita bahas selanjutnya.

Tahap 2: CSS — Mendandani Tampilan

CSS (Cascading Style Sheets) mengatur bagaimana rupa elemen HTML — warna, ukuran, jarak, dan tata letak.

Glosarium: box model — cara browser menghitung ukuran setiap elemen: content + padding + border, dikelilingi margin di luar.

CSS, singkatan dari Cascading Style Sheets, adalah bahasa yang mengatur rupa dari elemen-elemen HTML tadi — warna latar, jenis huruf, ukuran, dan yang paling penting untuk Anda pahami hari ini adalah konsep box model. Setiap elemen di halaman web, sesederhana apa pun, sebenarnya diperlakukan browser sebagai sebuah kotak berlapis. Lapisan paling dalam adalah content, yaitu isi sebenarnya seperti teks atau gambar. Di sekelilingnya ada padding, jarak antara isi dan tepi kotak, seperti bantalan di dalam kardus supaya barang tidak menempel ke dinding kardus. Setelah padding ada border, garis tepi kotak itu sendiri. Dan paling luar ada margin, jarak antara kotak ini dengan kotak-kotak elemen lain di sekitarnya. Memahami box model ini krusial karena hampir semua masalah "kenapa tata letak berantakan" di dunia nyata bersumber dari kesalahpahaman soal padding, border, dan margin ini. Sebentar lagi kita akan berlatih menghitungnya langsung dengan angka.

Hitung dari Nol: Total Lebar Sebuah Kotak Produk

Studi kasus: sebuah kartu produk punya width: 200px, padding: 20px tiap sisi, border: 5px tiap sisi, dan margin: 10px tiap sisi.

Langkah	Perhitungan	Nilai
1. Lebar konten (width yang ditulis)	langsung dari kode	200px
2. Tambahan padding kiri + kanan	20px × 2 sisi	40px
3. Tambahan border kiri + kanan	5px × 2 sisi	10px
4. Total lebar kotak yang tampak	200 + 40 + 10	250px
5. Total ruang termasuk margin (jarak ke kotak sebelah)	250 + (10px × 2 sisi)	270px

RUANG YANG SEBENARNYA DIPAKAI

270px

bukan 200px seperti yang tertulis di "width" — jebakan paling umum pemula

Sekarang mari berlatih menghitung angka nyata, karena ini adalah kesalahpahaman paling sering saya temukan pada mahasiswa yang baru belajar CSS. Banyak yang mengira kalau menulis width dua ratus piksel, maka kotak itu akan memakan ruang persis dua ratus piksel di layar — padahal itu keliru. Kita mulai dari lebar konten yang ditulis eksplisit, dua ratus piksel. Lalu kita tambahkan padding, jarak bantalan di dalam kotak, dua puluh piksel di kiri dan dua puluh piksel di kanan, totalnya empat puluh piksel tambahan. Kemudian border, garis tepi kotak, lima piksel di tiap sisi, totalnya sepuluh piksel tambahan. Jumlahkan ketiganya dan Anda dapat total lebar kotak yang benar-benar tampak di layar, yaitu dua ratus lima puluh piksel, bukan dua ratus. Kalau kita tambahkan lagi margin, jarak ke kotak tetangga, ruang total yang "dipakai" oleh elemen ini di tata letak halaman menjadi dua ratus tujuh puluh piksel. Inilah sebabnya developer sering berkata "layout-nya geser karena padding," dan sekarang Anda paham persis kenapa.

Coba Sendiri: Hitung Total Lebar Kotak Anda

Ubah nilai width, padding, border, dan margin, lalu amati bagaimana ruang total yang dipakai kotak berubah.

Tahap 3: JavaScript — Membuat Halaman "Hidup"

JavaScript menambahkan perilaku — merespons klik, mengubah isi halaman tanpa reload, memvalidasi input pengguna.

Tanpa JavaScript

Tombol "Tambah Keranjang" tidak merespons
Halaman statis, seperti brosur digital
Setiap aksi butuh muat ulang halaman

Dengan JavaScript

Klik tombol langsung menambah jumlah item
Notifikasi "berhasil ditambahkan" muncul instan
Form login memberi peringatan sebelum submit

Glosarium: DOM (Document Object Model) — representasi halaman HTML di dalam memori browser yang bisa "diutak-atik" JavaScript secara langsung, misalnya mengubah teks atau warna tanpa memuat ulang halaman.

Kalau HTML adalah kerangka dan CSS adalah tampilan, JavaScript adalah yang membuat sebuah halaman terasa hidup dan interaktif. Tanpa JavaScript, sebuah halaman web hanyalah seperti brosur digital — Anda bisa membacanya, tapi tidak bisa benar-benar berinteraksi dengannya. Coba bayangkan aplikasi seperti Tokopedia tanpa JavaScript: setiap kali Anda menekan tombol tambah keranjang, seluruh halaman harus dimuat ulang dari awal, sangat lambat dan tidak nyaman. Dengan JavaScript, browser bisa langsung mengubah sebagian kecil halaman, misalnya angka jumlah item di keranjang bertambah dari nol menjadi satu, tanpa memuat ulang apa pun. Kemampuan JavaScript untuk mengubah halaman secara langsung ini bekerja lewat sesuatu yang disebut DOM, singkatan dari Document Object Model, yaitu representasi struktur HTML yang disimpan browser di dalam memorinya sehingga bisa "diutak-atik" secara instan. Inilah tiga serangkai dasar web: HTML menentukan apa yang ada, CSS menentukan rupanya, dan JavaScript menentukan bagaimana ia merespons Anda.

Alur Sebuah Klik Tombol: Bagaimana JavaScript Bekerja

Studi kasus: pengguna menekan tombol "+" untuk menambah jumlah barang di keranjang belanja.

Langkah	Yang terjadi	Analogi
1. Pengguna menekan tombol "+"	Browser mendeteksi event "click"	Menekan bel pintu
2. JavaScript "mendengar" event tersebut	Fungsi event listener aktif	Orang di dalam rumah mendengar bel
3. JavaScript menjalankan fungsi terkait	Nilai jumlah barang ditambah 1	Orang itu berjalan membuka pintu
4. DOM diperbarui, layar berubah	Angka jumlah tampil baru, tanpa reload	Pintu terbuka, tamu langsung terlihat

Mari kita telusuri langkah demi langkah apa yang sebenarnya terjadi ketika Anda menekan tombol tambah di sebuah aplikasi belanja, karena proses ini adalah pola paling fundamental dalam pemrograman interaktif. Semuanya dimulai dari event, yaitu kejadian yang dideteksi browser, dalam hal ini klik pada tombol tersebut — seperti seseorang menekan bel pintu rumah Anda. Di dalam kode JavaScript, ada yang disebut event listener, sebuah fungsi yang sejak awal "menunggu" atau "mendengarkan" kejadian tertentu, persis seperti penghuni rumah yang menunggu bel berbunyi. Begitu event listener mendeteksi klik, ia menjalankan fungsi yang sudah disiapkan, misalnya menambah nilai variabel jumlah barang dari nol menjadi satu. Langkah terakhir dan paling terlihat oleh pengguna adalah pembaruan DOM — JavaScript langsung mengganti angka yang ditampilkan di layar tanpa perlu memuat ulang seluruh halaman, sama seperti pintu yang langsung terbuka begitu bel ditekan. Pola dengar-proses-perbarui inilah yang mendasari hampir semua interaksi di aplikasi modern, dari tombol like di Instagram sampai keranjang belanja di Shopee.

Bagian 2 dari 3

Dari Web ke Aplikasi Mobile: React Native

Bagaimana pengetahuan HTML, CSS, dan JavaScript dipakai kembali untuk membangun aplikasi yang berjalan di HP.

Tahap 4: React Native — Satu Kode, Dua Platform

React Native adalah kerangka kerja (framework) untuk menulis aplikasi mobile memakai JavaScript, yang bisa berjalan di Android dan iOS sekaligus.

Bandingkan: cara lama (native) mengharuskan tim menulis kode Kotlin untuk Android dan kode Swift untuk iOS secara terpisah — dua tim, dua basis kode, dua kali biaya perawatan.

React Native lahir dari sebuah masalah bisnis yang sangat konkret. Sebelumnya, kalau sebuah startup ingin punya aplikasi di Android dan iPhone sekaligus, mereka harus membangun dua aplikasi yang benar-benar terpisah: satu ditulis dengan bahasa Kotlin atau Java untuk Android, satu lagi ditulis dengan bahasa Swift untuk iOS. Ini berarti dua tim developer berbeda, dua basis kode yang harus dirawat terpisah, dan setiap kali ada perubahan fitur, pekerjaan itu harus dikerjakan dua kali. React Native menawarkan solusi yang lebih efisien: developer menulis satu basis kode memakai JavaScript, dan React Native yang menerjemahkannya menjadi aplikasi asli, baik untuk Android maupun iOS. Bukan berarti hasilnya adalah aplikasi web yang dibungkus, tapi benar-benar aplikasi native yang bisa mengakses kamera, GPS, dan notifikasi HP seperti aplikasi biasa. Inilah mengapa banyak perusahaan seperti Bukalapak dan sejumlah startup Indonesia lainnya memilih pendekatan ini di tahap awal, karena mempercepat waktu rilis dan menghemat biaya pengembangan tim.

Tahap 5: Komponen, JSX & Props — Blok Bangun Aplikasi

Aplikasi React Native disusun dari komponen — potongan kode yang bisa dipakai berulang, ditulis dengan sintaks mirip HTML bernama JSX.

Komponen & JSX

Komponen = "cetakan kue" yang bisa dipakai berkali-kali
JSX = campuran JavaScript + tampilan mirip HTML
Contoh: komponen <TombolBeli /> dipakai di banyak halaman

Props (Properties)

"Isian" yang dikirim ke sebuah komponen
Mis. warna, teks tombol, harga produk berbeda-beda
Satu komponen, tampilan bisa bervariasi lewat props

Glosarium: props — singkatan dari properties, yaitu data yang "dititipkan" ke sebuah komponen supaya tampilannya bisa disesuaikan tanpa menulis ulang kodenya.

Konsep paling penting dalam React Native adalah komponen — anggap komponen sebagai cetakan kue yang bisa dipakai berulang-ulang untuk menghasilkan banyak kue dengan bentuk sama tapi isian berbeda. Misalnya, dalam aplikasi e-commerce seperti Blibli, satu komponen "KartuProduk" dipakai untuk menampilkan ratusan produk berbeda, karena setiap kali dipanggil, komponen itu diberi data yang berbeda. Cara menulis komponen ini memakai sintaks bernama JSX, yang sekilas terlihat seperti HTML biasa tapi sebenarnya bercampur dengan JavaScript di baliknya. Nah, data yang "dititipkan" ke sebuah komponen supaya tampilannya berbeda-beda inilah yang disebut props, singkatan dari properties. Misalnya komponen tombol yang sama bisa dipakai untuk tombol "Beli Sekarang" berwarna merah dan tombol "Tambah ke Wishlist" berwarna abu-abu, hanya dengan mengubah props warna dan teksnya, tanpa harus menulis dua komponen terpisah. Konsep pakai-ulang seperti inilah yang membuat pengembangan aplikasi jauh lebih efisien dibanding menulis setiap tampilan dari nol.

Dari HTML ke JSX: Perbandingan Bertahap

Studi kasus: mengubah sebuah tombol sederhana dari HTML web menjadi komponen React Native.

Langkah	HTML (Web)	JSX (React Native)
1. Elemen dasar tombol	<button>Beli</button>	<Pressable><Text>Beli</Text></Pressable>
2. Menambahkan gaya/warna	class="tombol-merah" (CSS terpisah)	style={styles.tombolMerah} (StyleSheet)
3. Menangani klik	onclick="tambahKeranjang()"	onPress={tambahKeranjang}
4. Hasil akhir	Berjalan di browser (web)	Berjalan sebagai aplikasi native di HP

Mari kita bandingkan langsung supaya terasa betapa miripnya pola berpikirnya, meskipun kodenya sedikit berbeda. Di HTML web, tombol ditulis dengan tag button yang membungkus teksnya langsung. Di React Native, karena ini bukan browser melainkan aplikasi native, kita memakai komponen bernama Pressable yang membungkus komponen Text untuk tulisannya — strukturnya beda penulisan, tapi fungsinya identik: sesuatu yang bisa ditekan dan menampilkan teks. Untuk gaya, di web kita biasanya memakai atribut class yang merujuk ke aturan CSS terpisah, sedangkan di React Native kita memakai atribut style yang merujuk ke objek StyleSheet, sebuah cara menulis gaya langsung di dalam file JavaScript itu sendiri. Untuk menangani klik, di web kita menulis onclick, di React Native polanya mirip tapi ditulis onPress dengan huruf besar di tengah, mengikuti konvensi penulisan JavaScript. Hasil akhirnya yang paling penting berbeda: kode HTML berjalan di dalam browser, sedangkan kode JSX React Native dikompilasi menjadi aplikasi asli yang benar-benar terinstal di HP pengguna.

Tahap 6: Styling di React Native — StyleSheet vs CSS

React Native memakai StyleSheet, objek JavaScript yang meniru cara berpikir CSS — tanpa file .css terpisah.

CSS (Web)

File terpisah (.css) atau di dalam <style>
Properti: color, padding, margin
Satuan: px, %, rem, em

StyleSheet (React Native)

Objek JavaScript di dalam file komponen
Properti serupa: color, padding, margin
Satuan: angka polos (tanpa "px"), otomatis pas layar HP

Kabar baik: karena konsepnya nyaris identik dengan CSS, mahasiswa yang sudah paham box model tadi (padding, border, margin) tinggal menyesuaikan sedikit cara penulisannya di React Native.

Salah satu alasan React Native ramah untuk dipelajari setelah Anda paham CSS adalah karena cara berpikirnya sangat mirip, hanya penulisannya sedikit berbeda. Di web, gaya biasanya ditulis di file CSS terpisah atau di dalam tag style, dengan properti seperti color untuk warna dan padding untuk jarak dalam. Di React Native, konsep yang sama diwujudkan lewat StyleSheet, yaitu semacam kamus atau objek JavaScript yang berisi pasangan properti dan nilai, ditulis langsung di dalam file komponen itu sendiri, bukan file terpisah. Properti yang dipakai pun hampir sama persis: color, padding, margin, backgroundColor. Perbedaan kecil yang perlu Anda ingat adalah satuan ukuran — di CSS web kita menulis angka dengan satuan seperti piksel atau persen, sedangkan di React Native cukup menulis angka polos tanpa satuan, karena sistem akan otomatis menyesuaikannya dengan kerapatan layar HP yang berbeda-beda. Karena kemiripan konseptual inilah, pemahaman box model yang kita bahas di CSS tadi akan langsung berguna ketika Anda menulis StyleSheet di React Native.

Hitung dari Nol: Efisiensi Waktu React Native vs Native Terpisah

Studi kasus: tim mengembangkan fitur "Login" untuk aplikasi. Bandingkan total waktu jika ditulis native terpisah vs React Native.

Langkah	Perhitungan	Nilai
1. Waktu tulis fitur Login native Android (Kotlin)	estimasi tim	20 jam
2. Waktu tulis fitur Login native iOS (Swift)	estimasi tim, terpisah dari Android	20 jam
3. Total waktu jika native (2 basis kode)	20 + 20	40 jam
4. Waktu tulis fitur Login di React Native (1 basis kode)	estimasi tim, untuk 2 platform sekaligus	25 jam
5. Persentase waktu yang dihemat	(40−25) ÷ 40 × 100%	37,5%

EFISIENSI WAKTU DENGAN REACT NATIVE

37,5%

hemat 15 jam dari 40 jam, untuk satu fitur saja — ilustrasi, bukan angka baku industri

Sekarang kita hitung sendiri mengapa banyak startup Indonesia memilih React Native sebagai keputusan bisnis, bukan sekadar tren teknis. Anggap tim developer memperkirakan menulis fitur login versi native Android memakan waktu dua puluh jam kerja, dan menulis versi native iOS terpisah juga dua puluh jam, karena keduanya ditulis dengan bahasa dan tim yang berbeda. Jika keduanya dikerjakan terpisah, totalnya empat puluh jam kerja untuk satu fitur yang sama. Bandingkan dengan React Native, di mana tim hanya menulis satu basis kode yang otomatis berjalan di kedua platform, diperkirakan memakan waktu dua puluh lima jam — sedikit lebih lama dari satu basis kode tunggal karena ada penyesuaian ekstra, tapi jauh lebih singkat dibanding menulis dua kali. Selisihnya lima belas jam, atau setara tiga puluh tujuh koma lima persen penghematan waktu untuk satu fitur ini saja. Kalikan penghematan ini dengan puluhan fitur dalam sebuah aplikasi nyata, dan Anda akan paham mengapa keputusan memilih React Native bisa berarti penghematan biaya pengembangan yang sangat besar bagi sebuah startup.

Coba Sendiri: Bandingkan Waktu Native vs React Native

Ubah estimasi jam kerja tiap pendekatan, lalu amati persentase waktu yang dihemat.

Bagian 3 dari 3

Merangkai Komponen Jadi Aplikasi

Menyatukan HTML, CSS, JavaScript, dan React Native dalam satu gambaran besar, lalu berlatih langsung.

Peta Alur Lengkap: Dari HTML ke Aplikasi Mobile

Sub-CPMK minggu ini: Anda mampu menjelaskan peran HTML, CSS, JavaScript, dan React Native, serta mengenali struktur, gaya, dan perilaku dalam sebuah komponen aplikasi.

Sekarang mari kita lihat seluruh perjalanan hari ini sebagai satu peta utuh. HTML membangun struktur dasar, CSS mendandani tampilannya, dan JavaScript memberinya perilaku serta interaktivitas — ini adalah tiga serangkai fondasi web yang sudah berdiri sejak awal internet modern. Ketika kita ingin membawa ketiga konsep ini ke dunia aplikasi mobile, React Native hadir sebagai jembatan, menggabungkan struktur, tampilan, dan perilaku ke dalam satu kesatuan yang disebut komponen, ditulis dengan sintaks JSX. Komponen-komponen inilah yang kemudian dirangkai menjadi aplikasi mobile lengkap yang bisa diinstal dan dijalankan di HP pengguna, persis seperti Gojek atau Tokopedia yang sehari-hari Anda pakai. Perhatikan bahwa alur berpikirnya konsisten dari kiri ke kanan — yang berubah hanyalah wujud penulisan kodenya, bukan logika dasarnya. Inilah gambaran besar yang saya harap tertanam di kepala Anda setelah pertemuan hari ini.

Latihan Kelas: Diagnosis Komponen Sederhana

Kerjakan berpasangan (5 menit), lalu kita bahas bersama.

Kasus: Sebuah komponen "KartuProduk" di aplikasi mobile UMKM batik menampilkan foto, nama produk, dan tombol "Beli". Foto dan nama sudah tampil rapi, tapi tombol "Beli" tidak merespons saat ditekan.

Pertanyaan Diskusi

Bagian mana (struktur/gaya/perilaku) yang kemungkinan bermasalah?
Bahasa/konsep apa yang perlu dicek developer?
Apakah ini soal HTML/JSX, CSS/StyleSheet, atau JavaScript?

Yang Perlu Anda Cek

Apakah komponen Pressable/onPress sudah terpasang?
Apakah fungsi event listener-nya sudah ditulis?
Apakah props teks tombol sudah benar diterima?

Rangkuman: Cheat Sheet Empat Bahan Dasar

Bahan	Peran	Pertanyaan Kunci
HTML	Struktur/kerangka halaman	Apa saja yang ada di layar?
CSS	Tampilan (box model: content-padding-border-margin)	Bagaimana rupanya?
JavaScript	Perilaku & interaktivitas (event, DOM)	Apa yang terjadi saat diklik?
React Native	Komponen (JSX + props) untuk aplikasi mobile lintas platform	Satu kode, jalan di Android & iOS?

Kata kunci hari ini: komponen (blok bangun), JSX (sintaks tampilan), props (data titipan), StyleSheet (gaya di React Native).

Sebagai penutup materi inti, mari kita rangkum empat bahan dasar ini dalam satu tabel yang bisa Anda jadikan cheat sheet belajar. Perhatikan pola pertanyaan kunci di kolom kanan — pola inilah yang akan membantu Anda memetakan sebuah masalah aplikasi ke bahan dasar yang tepat, mulai dari "apa saja yang ada di layar" untuk HTML sampai "satu kode, jalan di Android dan iOS" untuk React Native. Empat istilah yang wajib Anda ingat dari pertemuan hari ini adalah komponen sebagai blok bangun aplikasi yang bisa dipakai berulang, JSX sebagai sintaks penulisan tampilan komponen, props sebagai data yang dititipkan ke komponen supaya tampilannya bisa bervariasi, dan StyleSheet sebagai cara menulis gaya di React Native. Kalau empat istilah ini sudah lekat di kepala Anda, berarti tujuan pembelajaran hari ini sudah tercapai, dan Anda siap melangkah ke materi integrasi Python minggu depan.

Penutup: Tugas & Persiapan Minggu Depan

Tugas Individu

Amati 1 aplikasi mobile yang sering Anda pakai
Identifikasi 3 komponen di dalamnya (struktur/gaya/perilaku)
Tuliskan props apa saja yang mungkin dipakai tiap komponen

MINGGU DEPAN

Integrasi Python ke React Native

Bagaimana script Python dasar bisa "berbicara" dengan komponen aplikasi React Native yang sudah kita kenal hari ini.

Sebelum kita akhiri pertemuan hari ini, ada tugas individu ringan yang saya minta Anda kerjakan sebelum pertemuan berikutnya: amati satu aplikasi mobile yang sering Anda pakai sehari-hari, misalnya Gojek, Shopee, atau Instagram, lalu identifikasi tiga komponen di dalamnya dan coba pisahkan mana bagian struktur, mana bagian gaya, dan mana bagian perilakunya. Tugas ini akan melatih Anda menerapkan kerangka berpikir hari ini ke aplikasi nyata yang sudah familiar, bukan sekadar menghafal teori dari slide. Minggu depan kita akan melangkah lebih jauh dengan mengintegrasikan script Python dasar ke dalam aplikasi React Native yang komponennya sudah Anda pahami hari ini — jembatan penting menuju materi state, props interaktif, dan koneksi data yang akan kita bahas di pertemuan-pertemuan selanjutnya. Terima Kasih atas partisipasi Anda hari ini, sampai jumpa di pertemuan berikutnya.