Kursus React

Pengenalan Kursus React:

• Kata pembuka.

• Apa itu React dan sedikit tentang sejarah perpustakaannya.

• Penekanan pada bekerja dengan sistem basis kode.

Komponen Dasar React:

• Belajar apa itu JSX di React.

• Cara menulis komponen pertama yang dasar.

• Membangun komponen dengan data statis dan memahami dasar-dasarnya.

Membangun Daftar dengan Data Dinamis:

• Membangun elemen secara dinamis.

• Menggunakan kemampuan Array.prototype.map untuk pembangunan dinamis.

• Mengimpor dan mengekspor komponen dari sebuah file.

Membangun Tabel dengan Data Dinamis:

• Struktur tabel dan komponennya dalam HTML.

• Menggunakan loop bersarang untuk membangun tabel.

• Menggunakan fungsi map secara bersarang.

• Menggunakan data dinamis dari file yang diimpor.

Pengaturan Gaya dengan Objek Style:

• Memahami perbedaan antara HTML dan JSX.

• Belajar mengatur gaya elemen di halaman.

• Berlatih membangun elemen dinamis dengan cara yang menantang dengan gaya yang telah dipelajari.

Mengintegrasikan File CSS di React:

• Menggabungkan dunia gaya sebagai bagian integral dari pembuatan komponen.

• Memahami apa itu className dan perbedaannya antara HTML dan JSX.

• Menggabungkan latihan komprehensif dari semua materi yang telah dipelajari hingga saat ini dalam kursus.

• Menekankan aturan CSS dan bagaimana mereka mengintegrasikan ke dalam sistem yang kita bangun.

Mengintegrasikan Props dalam Komponen:

• Apa itu props di React dan kapan menggunakannya.

• Membangun komponen dengan props dan metode penulisan umum.

• Menggunakan komponen yang kita tulis dalam pembangunan dinamis.

Membangun Tabel dengan Props:

• Membangun tabel menggunakan props.

• Menciptakan komponen pintar dalam konstruksi tabel.

• Menggabungkan pembangunan dinamis dengan beberapa komponen menggunakan props dan pengaturan gaya dengan CSS.

Menggunakan Events dan useState:

• Cara menghubungkan event bertipe onClick ke elemen.

• Apa itu komponen pintar dan mengapa kita membutuhkannya.

• Apa itu react hook bertipe useState dan bagaimana menggunakannya.

• Menciptakan kondisi boolean dalam JSX dari sebuah komponen.

• Menghubungkan penciptaan event dan penyimpanan state untuk membangun komponen React yang pintar.

Menggunakan Event onChange:

• Cara menambahkan input ke halaman dan menggunakan useState untuk menyimpan nilai input.

• Membangun daftar dinamis dengan data input pengguna.

• Penjelasan mendalam tentang array dan perbedaan antara value dan reference.

• Memahami cara bekerja dengan array yang disimpan pada state komponen.

Membangun Tabel Dinamis dengan Events:

• Memahami cara mengintegrasikan semua yang telah dipelajari sejauh ini untuk membangun tabel secara dinamis.

• Menggunakan useState untuk menyimpan sejumlah input.

• Contoh penggunaan state kompleks dengan array objek.

Menggunakan useEffect Hook:

• Apa itu react hook bertipe useEffect dan bagaimana serta kapan menggunakannya.

• Melakukan komunikasi server menggunakan fetch.

• Menunjukkan metode untuk mengamankan kode kita agar terhindar dari kesalahan yang tidak perlu.

• Membangun komponen pintar yang menggabungkan kedua hook useState dan useEffect.

Contoh Penggunaan useEffect dalam Pencarian Server-Side:

• Menjelajahi penggunaan tambahan untuk useEffect.

• Memahami bagaimana siklus hidup komponen memengaruhi implementasi kode kita.

• Menyajikan contoh kompleks penggunaan useEffect.

Menggunakan Input Tambahan:

• Apa itu input checkbox dan bagaimana menggunakannya.

• Apa itu input radio dan bagaimana menggunakannya.

• Apa itu input datetime dan datetime-local dan kapan menggunakannya.

Membangun Tabel dari API dengan Penyaringan Hasil:

• Melakukan permintaan API untuk mengambil data tentang sebuah tabel.

• Membangun tabel secara dinamis.

• Belajar cara melakukan pencarian melalui penyaringan hasil yang cerdas.

• Mendiskusikan arsitektur kode.

Menggunakan Filter Lanjutan:

• Membangun tabel yang menampilkan informasi tentang penerbangan.

• Memperluas penggunaan tabel dengan komponen baris yang cerdas.

• Menggunakan input untuk membangun filter untuk tabel, menggunakan checkbox, datetime, dan input teks.

Perpustakaan Bulma untuk Gaya Lanjutan:

• Belajar menyematkan gaya yang sudah jadi.

• Menggunakan paket bulma untuk menambahkan warna dan gaya ke proyek React yang dibangun bersama.

• Menyematkan gaya dalam komponen yang ada dan melalui dokumentasi dari perpustakaan yang akan kita gunakan.

Pengurutan di JavaScript:

• Meningkatkan komponen tabel yang ada dan menambahkan kemampuan pengurutan ke dalamnya.

• Memahami secara mendalam bagaimana pengurutan bekerja pada array dengan angka, string, dan objek.

• Melihat cara mengatasi pengurutan khusus ketika bidang kita bukanlah perbandingan yang sederhana.

Saluran Komunikasi Antara Komponen:

• Belajar bagaimana komponen anak dapat berkomunikasi dengan komponen induk.

• Menerapkan gaya bulma pada beberapa komponen.

• Membangun komponen serbaguna yang memungkinkan kita menyematkan tab dalam aplikasi.

• Melihat contoh penggunaan props bertipe fungsi.

Kesimpulan