Belajar dan memahami React - tutorial praktis

Di sini akan diperkenalkan topik-topik yang akan dibahas selanjutnya, serta akan dibahas tentang motivasi di balik kursus ini.

Saat ini ada banyak kerangka antarmuka pengguna (UI) untuk JavaScript - mengapa sekarang harus memilih React? Selain popularitas yang tak terbantahkan dari pustaka ini, ada juga beberapa alasan yang lebih mendasar yang mendukung penggunaan React.

Kami akan menyiapkan lingkungan pengembangan dalam pelajaran ini dan dengan cepat membuat aplikasi React pertama kami dengan npm create vite.

Setelah kita membuat aplikasi React "segar" di pelajaran terakhir, sekarang kita akan membahas tentang memahami struktur dari aplikasi ini dan menjelaskan bagaimana React dapat disematkan ke dalam halaman web.

Sedikit penyegar mengenai var vs. let/const.

Destructuring memungkinkan ekstraksi elemen-elemen dari objek dan array secara terarah. Jika dilihat dengan seksama, ada banyak kemungkinan penggunaan yang akan membuat kode JS menjadi lebih elegan dan ringkas.

Fungsi-fungsi penting dalam JS dan sebelumnya hanya dideklarasikan dan didefinisikan melalui kata kunci function. ES6 memperkenalkan cara penulisan yang elegan dan singkat yang membuat kode menjadi lebih mudah dibaca dan memberikan solusi untuk masalah yang menjengkelkan dengan this.

Di NodeJs, modul telah digunakan sejak awal, namun pada awalnya hanya menggunakan format modul CommonJs dengan require. Sejak ES6, ada definisi modul dalam standar dan dengan demikian kata kunci baru import/export. Saat ini, format ini didukung oleh hampir semua (baru) perpustakaan JS, dan juga NodeJs dapat menanganinya dalam versi terbaru.

Dengan JSX, kamu menggambarkan antarmuka pengguna (UI) dari sebuah komponen dan mengintegrasikan ekspresi JavaScript di dalamnya. File proyek untuk video tersebut berisi kode siap pakai untuk bagian tutorial ini.

Komponen React kustom dapat ditulis dengan mudah menggunakan fungsi yang mengembalikan JSX.

Pelajaran ini menjelaskan bagaimana data dan ekspresi JavaScript dapat diintegrasikan ke dalam JSX.

Tanpa adanya sebuah state yang dapat berubah, hampir tidak mungkin untuk mengimplementasikan aplikasi yang bermakna. Di React biasanya digunakan useState untuk hal tersebut. Pelajaran ini memperkenalkan Hook tersebut dan menjelaskan cara penggunaannya.

Props digunakan untuk mengirimkan data ke komponen anak. Di sini dijelaskan bagaimana hal ini dilakukan dan apa yang perlu diperhatikan.

Jika props berubah secara dinamis, fungsi render komponen yang sesuai akan dipanggil kembali.

Jika sebuah komponen anak ingin memberi tahu komponen induk, hal tersebut dilakukan melalui sebuah prop Callback.

Rencana harus dilakukan suatu saat nanti. Di sini kita akan membahas bagaimana hal itu berfungsi dalam kode.

Tampilan antarmuka pengguna (UI) tanpa ragu sangat penting. Oleh karena itu, saya akan menjelaskan di sini bagaimana cara kerjanya dengan menggunakan pustaka Emotion dan bagaimana cara menggunakan Prop className dengannya. Selain itu, akan dibahas juga atribut style-, yang memungkinkan untuk menyesuaikan gaya setiap elemen secara terpisah.

Dengan menyaring array to-do, to-do dapat dibagi menjadi dua grup.

Tentu saja, kita juga harus dapat menghapus To-dos. Di sini dijelaskan bagaimana cara kerjanya melalui filter Array.

Sejauh ini, kita selalu membungkus komponen dalam DIV. Namun, dalam kasus-kasus tertentu, hal ini juga bisa dihindari.

Sekarang menjadi menarik: To-dos dapat disimpan secara persisten dengan mudah di penyimpanan browser dan tentu saja dapat dimuat kembali, sehingga mereka "bertahan" saat me-refresh halaman.

Dengan useEffect, efek samping dapat diintegrasikan. Pemasangan sebuah komponen juga dapat diatur dengan fungsi ini.

Ringkasan singkat mengenai aplikasi To-do kami dan perbaikan terakhir.

Aplikasi pemutar video dibuat dengan create vite dan dijelaskan bagaimana aplikasi seharusnya dibangun. File proyek yang dilampirkan dengan video berisi kode siap pakai untuk pemutar video.

Dengan atribut ref, elemen DOM dapat dirujuk dan diakses dengan useRef. Di sini kita melakukannya dengan elemen Video.

Kami membuat pemutar video sebenarnya, yang sudah memiliki tombol untuk Putar, Jeda, dan Berhenti.

Karena tidak pernah membutuhkan tombol Putar dan Jeda secara bersamaan, kita menggabungkannya menjadi satu tombol.

Kontrol Video sendiri mengendalikan video juga, tetapi menyebabkan status Play/Pause button tidak disesuaikan dengan benar. Kita memperbaikinya dengan menggunakan event handler pada elemen video.

Kita juga bisa mengubah volume menggunakan pengaturan khusus.

Lompat ke posisi apa pun di video (Seek) bisa dilakukan dengan mudah dengan mengatur Properti currentTime.

Panjang video hanya akan diketahui setelah metadata video dimuat, oleh karena itu kita harus menunggu acara yang tepat.

Playlist diimplementasikan melalui daftar yang dapat diimplementasikan dengan elemen HTML pilih.

Sekarang saatnya untuk memproses daftar video: Kami akan menambahkan penambahan entri video.

Apa yang ditambahkan harus bisa dihapus lagi. Hal ini dilakukan dengan cara yang mirip dengan aplikasi To-do melalui penyaringan.

Playlist seharusnya tidak hanya berfungsi sebagai "daftar bookmark", tetapi juga memutar video-video secara otomatis secara berurutan. Hal ini diimplementasikan dalam pelajaran ini.

Bagi yang tak sabar: Tombol untuk video berikutnya dan sebelumnya.

Perlakuan khusus untuk video pertama dan terakhir akan diimplementasikan: tombol Next dan Previous harus dinonaktifkan sesuai.

Sekarang kita akan menyimpan dan memuat playlist kita. Ini dilakukan secara analog dengan aplikasi To-do di local storage browser.

Video-video yang digunakan sebagai contoh dalam aplikasi pemutar video dapat dilihat di sini dalam versi aslinya (semua lisensi CC-Attribution, lihat halaman web yang sesuai):

Elephants dream: https://orange.blender.org/
Big Buck Bunny: https://peach.blender.org/
Sintel: https://durian.blender.org/

Dengan contoh useJsonFetch-Hooks, dijelaskan di sini cara menulis fungsi Hook sendiri.

Perubahan status dengan setter dari useState bisa jadi rumit. Namun, dengan useImmer tidak lagi menjadi masalah.

Antarmuka pengguna akan dibangun lebih cepat dan merespons lebih cepat terhadap masukan pengguna, ketika tidak ada panggilan yang tidak perlu ke fungsi render. Dengan memo, dapat mencegah komponen dirender jika prop mereka tidak berubah.

Dengan useCallback, kita dapat mencegah rendering yang tidak perlu dari komponen-anak ketika prop Callback digunakan.

Perhitungan yang rumit di dalam fungsi render sebaiknya hanya dilakukan jika diperlukan. Dengan menggunakan useMemo, hasil perhitungan tersebut dapat disimpan dalam cache dengan mempertimbangkan dependensi.

Saya akan merangkum hasil kursus di sini dan memberikan petunjuk tentang apa yang seharusnya dilihat peserta setelah kursus.