Home » » React Fundamental

React Fundamental

Tidak ada komentar

MODUL PEMBELAJARAN

React Fundamental

Mata Pelajaran: Pemrograman Perangkat Bergerak

Kelas XII RPL/PPLG

"React bukan sekadar framework untuk membuat tampilan. React mengajarkan cara berpikir dalam membangun aplikasi yang rapi, terstruktur, dan mudah dikembangkan."

Capaian Pembelajaran

Pada akhir pembelajaran, peserta didik mampu memahami konsep dasar React, membangun antarmuka menggunakan Component, memanfaatkan Props, mengelola State, menggunakan Hook, serta mengembangkan Dashboard sederhana sebagai implementasi konsep React.

Tujuan Pembelajaran

Setelah mempelajari materi ini, siswa mampu:

  • Menjelaskan konsep React.

  • Memahami fungsi Component.

  • Menggunakan Props untuk mengirim data.

  • Menggunakan State untuk mengubah data secara dinamis.

  • Memahami Hook (useState).

  • Membuat Dashboard sederhana.

Apersepsi

Guru membuka pembelajaran dengan bertanya.

"Ketika membuka Instagram, apakah seluruh halaman berubah saat ada notifikasi baru?"

Jawaban siswa:

"Tidak."

Yang berubah hanya bagian tertentu.

Contohnya:

  • jumlah like

  • jumlah komentar

  • foto profil

  • chat baru

Mengapa?

Karena aplikasi modern menggunakan Component.

Apa itu React?

React adalah JavaScript Library yang digunakan untuk membuat User Interface (UI) secara cepat, modern, dan mudah dipelihara.

React dibuat oleh Meta (Facebook).

Sekarang React digunakan oleh banyak perusahaan besar seperti

  • Facebook

  • Instagram

  • Netflix

  • Airbnb

  • Discord

  • Shopify

Sedangkan untuk aplikasi mobile digunakan React Native.

Mengapa Belajar React?

Tanpa React

Satu halaman terdiri dari ribuan baris HTML.

Sulit diperbaiki.

Sulit dikembangkan.

Sulit digunakan kembali.

Dengan React

Halaman dipecah menjadi bagian-bagian kecil.

Lebih rapi.

Lebih mudah dipelihara.

Lebih cepat dibuat.

Konsep React

Bayangkan sebuah rumah.

Rumah terdiri dari

  • pintu

  • jendela

  • atap

  • ruang tamu

  • kamar

  • dapur

Semuanya adalah bagian kecil.

Jika pintu rusak

Tidak perlu membangun rumah baru.

Cukup mengganti pintunya.

Begitu juga React.

Aplikasi dibangun dari bagian-bagian kecil.

Bagian kecil inilah yang disebut

Component

MATERI 1

Component

Pengertian

Component adalah bagian kecil dari tampilan aplikasi yang dapat digunakan kembali (Reusable).

Misalnya aplikasi Shopee.

Logo

Search Bar

Banner

Kategori

Produk

Footer

Semuanya merupakan Component.

Contoh Dashboard Sekolah

Dashboard terdiri dari

Header

↓

Sidebar

↓

Card Jumlah Siswa

↓

Card Jumlah Guru

↓

Grafik

↓

Footer

Masing-masing dibuat sebagai Component.

Keuntungan Component

✔ Kode lebih rapi

✔ Mudah diperbaiki

✔ Bisa digunakan kembali

✔ Mudah dikembangkan

Analogi

Lego.

Satu keping Lego kecil.

Jika disusun.

Menjadi mobil.

Rumah.

Pesawat.

Begitu pula React.

Component kecil.

Disusun menjadi aplikasi besar.

MATERI 2

Props

Setelah Component dibuat,

bagaimana jika isinya berbeda?

Misalnya

Card pertama

Jumlah Siswa
1500

Card kedua

Jumlah Guru
120

Apakah harus membuat dua Component?

Tidak.

Cukup satu Component.

Datanya dikirim menggunakan

Props

Pengertian

Props adalah data yang dikirim dari Parent Component ke Child Component.

Props bersifat

Read Only.

Tidak boleh diubah oleh Child.

Analogi

Guru memberi soal kepada siswa.

Guru

↓

Memberikan soal.

↓

Siswa mengerjakan.

↓

Siswa tidak mengubah soal.

Props seperti itu.

Contoh

<Card
judul="Jumlah Siswa"
nilai="1500"
/>

<Card
judul="Jumlah Guru"
nilai="120"
/>

Component tetap sama.

Yang berubah hanya datanya.

Keuntungan Props

Mengurangi penulisan kode.

Lebih fleksibel.

Reusable.

MATERI 3

State

Props tidak bisa berubah.

Lalu bagaimana jika datanya berubah?

Misalnya

Like Instagram

100

↓

101

↓

102

↓

103

Bagaimana caranya?

Menggunakan

State.

Pengertian

State adalah data yang dimiliki oleh sebuah Component dan dapat berubah selama aplikasi berjalan.

Contoh

Jumlah Like

Keranjang Belanja

Saldo

Jam Digital

Counter

Semuanya menggunakan State.

Analogi

Gelas.

Awalnya

Air = 0

Ditambah

Air = 1

Ditambah

Air = 2

Nilainya selalu berubah.

Itulah State.

Fungsi State

✔ Menyimpan data

✔ Mengubah tampilan otomatis

✔ Membuat aplikasi interaktif

MATERI 4

Hook

Sebelumnya

State hanya ada di Class Component.

Sekarang

React menyediakan

Hook.

Pengertian

Hook adalah fitur React yang memungkinkan Function Component memiliki kemampuan seperti State dan Lifecycle.

Hook paling dasar

useState()

Fungsi useState

Menyimpan data.

Mengubah data.

Meng-update tampilan otomatis.

Contoh Penggunaan

Counter

0

↓

Klik

↓

1

↓

Klik

↓

2

↓

Klik

↓

3

Tanpa me-refresh halaman.

Hook Lain

useEffect()

Digunakan ketika

  • mengambil data API

  • menjalankan proses saat halaman dibuka

  • timer

  • sinkronisasi data

Pada materi awal, fokuskan pembelajaran pada useState(), sedangkan useEffect() dikenalkan secara sederhana sebagai jembatan menuju materi API pada pertemuan berikutnya.

Hubungan Antar Konsep

Dashboard

↓

Terdiri dari banyak

Component

↓

Setiap Component menerima

Props

↓

Sebagian Component memiliki

State

↓

State dikelola menggunakan

Hook (useState)

Inilah alur berpikir React yang harus dipahami siswa sebelum mulai membuat aplikasi yang lebih kompleks.

PROJECT

Dashboard Sekolah

Buat Dashboard sederhana yang menampilkan:

Header:

  • Logo sekolah

  • Nama sekolah

Sidebar:

  • Beranda

  • Data Siswa

  • Data Guru

  • Kelas

  • Pengaturan

Konten:

  • Card Jumlah Siswa

  • Card Jumlah Guru

  • Card Jumlah Kelas

  • Card Jumlah Jurusan

Tambahkan:

  • Jam digital.

  • Tanggal hari ini.

  • Tombol Tambah Siswa yang menambah angka pada card "Jumlah Siswa" menggunakan useState().

Gunakan Props agar setiap Card menerima judul dan nilai yang berbeda tanpa membuat Component baru.

Refleksi

Jawablah pertanyaan berikut.

  1. Apa manfaat Component dibandingkan menulis semua tampilan dalam satu file?

  2. Mengapa Props membuat kode lebih efisien?

  3. Apa perbedaan Props dan State?

  4. Mengapa State diperlukan dalam aplikasi modern?

  5. Bagaimana Hook membantu Function Component menjadi lebih interaktif?

  6. Jika Anda membuat aplikasi sekolah, Component apa saja yang akan Anda buat agar aplikasi mudah dikembangkan?

Kesimpulan

React mengajarkan cara membangun aplikasi dari bagian-bagian kecil (Component) yang dapat digunakan kembali. Props memungkinkan setiap Component menerima data yang berbeda tanpa menulis ulang kode, sedangkan State menyimpan data yang dapat berubah selama aplikasi berjalan. Perubahan State dikelola menggunakan Hook, terutama useState(), sehingga antarmuka dapat diperbarui secara otomatis. Dengan memahami empat konsep dasar ini, siswa memiliki fondasi yang kuat untuk melanjutkan ke materi React Native, REST API, autentikasi, dan pengembangan aplikasi mobile yang sesuai dengan praktik industri.

Share:

Tidak ada komentar:

Posting Komentar

Blogger Tricks

Blogger Themes

Klik untuk mencari...