Halo semuanya Selamat datang kembali di channel pip code studio bersama saya Apip saifulo di video kali ini kita akan memulai sebuah series baru yang mana merupakan sebuah series lanjutan dari react JS di mana mungkin teman-teman udah pernah nonton atau belajar dari series tersebut ya Nah ini merupakan series lanjutannya ya sehingga saya namakan series ini sebagai react JS lanjutan di mana Di dalam series ini kita akan membahas topik-topik yang mungkin belum kita coba di Series react dan beber berapa topik di antaranya itu ada yang cukup Advance ya sehingga kalau teman-teman mau ikutin series Ini saran saya adalah ikutin dulu series react JS di channel YouTube ini banyak materi yang sebetulnya masih belum kita bahas di series tersebut dan kita akan coba untuk tamatkan di series ini ya selain itu juga series ini saya buat untuk menunggu rea 19 rilis ya jadi sambil menunggu rea 19 rilis sebetar nya kan sekarang baru rilis versi rc-nya atau rilis candidate gitu ya Ketika nanti sudah dirilis react 19 kita akan coba untuk masuk ke situ jadi sambil nunggu kita akan belajar dulu konsep-konsep react yang belum kita pelajari Nah jadi materi yang pertama yang akan kita coba untuk pelajari di series ini adalah ID nah Apa itu ID ya use Id ini kalau kita buka di dokumentasi react-nya katanya di sini ID merupakan sebuah rect ghook yang bisa digunakan untuk menggenerate unique ID yang bisa kita gunakan untuk aksesibility attributes ya sebetulnya bukan hanya untuk accessibility attribut saja tapi fungsinya banyak nanti kita akan coba untuk kupas satu persatu Nah di sini langsung ada cara penggunaannya yaitu adalah menggunakan use ID yang tentu diimpimport dari react itu sendiri ya Tapi sebelum kita mencoba use Id ini kita akan coba untuk instal terlebih dahulu react-nya ya kita akan coba gunakan Visual Studio code nah silakan dibuka saja untuk foldernya kemudian kita akan coba untuk install react ya teman-teman kalau mau pakai react vid boleh ya Atau mau pakai nextjs juga boleh ya sama saja karena kita akan belajar konsepnya aja ya tidak akan membuat app secara utuh Nah jadi Mungkin saya akan coba gunakan react Vi aja ya untuk menjalankan projectnya Nah kita akan coba untuk pakai react viit ya ini langsung aja buka di viitjs.dev Ya nanti teman-teman tinggal cari masuk ke dalam getting started-nya lalu Scroll ke bawah ada cara instalnya Nah di sini contoh untuk menginstalnya ini kalau untuk view ya ini tinggal diganti aja nanti template-nya jadi react Oke kita akan coba sini kita install ya NPM create withd latest kemudian diikuti dengan nama projectnya dan juga template-nya mau pakai apa ya kita akan coba di sini nama projectnya react lanjutan aja ya oke kemudian template react ya tinggal enter oke di sini ditanya katanya in the installing package yes oke langkah berikutnya di sini sudah ada foldernya kita coba change directory ya CD ke react lanjutan Nah jadi CD react Das lanjutan oke sekarang sudah masuk ke dalam foldernya ini kita akan coba untuk install ya sekarang NPM i Entar tunggu sampai instalasinya selesai ini untuk menginstal package-package yang dibutuhkan sekali lagi kalau teman-teman mau pakai react Vi boleh mau pakai nextjs juga boleh pakai nextjs akan lebih simpel dari sisi instalasi ya Karena dia sudah tinggal langsung npx create next app secara fungsionalitas Harusnya sama saja nah ini sudah berhasil terinstal ya untuk react-nya kita cek di package.json ini ada cara untuk menjalankannya kalau kita lihat ada NPM Run Def ya kita akan coba untuk jalankan jadi di sini mungkin saya langsung aja NPM Run oke ya kita sudah bisa buka di local host 5.173 portnya ya nah ini sudah bisa ditutup untuk react vit-nya dan kalau sudah berhasil diinstal harusnya seperti ini Nah kita akan coba untuk perbaiki dulu sedikit ya untuk tampilannya ini ada di bagian sini Nah ya ini saya mau hapus-hapusin dulu untuk stylingnya karena saya enggak butuh stylingnya ya Oke kita cek dulu nah ini ini semuanya aja kita hapus oke biarkan kosong dulu ya Yang ini juga mungkin sama ya kita biarkan kosongan dulu import app ini juga hapus di app.jsx yang ini import next index CSS sama juga ya kita enggak butuh nah ini sudah ada ya untuk codingan react-nya nah ini adanya di bagian sini Oke kita akan coba untuk hapus ini karena kita tidak memerlukannya ya J kita hapus saja Oke Mungkin saya akan tulis di sini H1 hello world dulu ya oke di sini saya Hapus yang ini juga sama saya hapus oke Ya sudah ada hanya disisakan hello world saja Nah selanjutnya kita akan coba untuk baca dulu use ID ya Nah ini Cara pakainya adalah gunakan use id di dalam Project react kita ya di ini diimpimport dari react-nya Nah bisa dipakai untuk apa aja ya di sini ada contoh-contohnya untuk menggenerate unique ID untuk accessibility attributes katanya Ya terus juga bisa dipakai untuk menggenerate ID untuk Beberapa elemen ya dan lain-lain ya kita akan coba untuk lihat dulu ya di sini untuk Cara pakainya gimana jadi katanya di sini Panggil use ID itu di bagian paling atas dari komponen ya yang digunakan untuk menggenerate unique ID nah jadi gini Cara pakainya ya harus digenerate di paling atas sebetulnya bukan paling atas ya tapi di atas sintaks html-nya ya kalau di dalam sebuah function jsx Nah katanya di sini use ID itu tidak membutuhkan parameters apapun ya jadi benar-benar pure dipanggilnya hanya use ID saja use ID itu mereturn sebuah ID unique berupa string yang terasosiasi terhadap komponen yang dipanggil ya Nah use ID itu mer-return sebuah unique ID berupa string Nah di sini ada catatannya ya katanya di sini use Id adalah sebuah Hook sehingga dia bisa dipanggil hanya di bagian atas dari komponennya saja ya Di mana kita juga tidak bisa memanggil ini di dalam looping atau condition Nah kalau kita membutuhkan hal tersebut maka kita harus mengekstraknya menjadi sebuah komponen baru kemudian di sini use ID itu tidak boleh digunakan atau tidak dianjurkan digunakan untuk menggenerate Keys dari list ya Jadi kalau kita membuat list biasanya itu harus ada keysnya ya Nah teman-teman yang belum tahu konsep tersebut mungkin teman-teman bisa cek di YouTube saya ya Ada materi terkait dengan list dan Keys ini rendering list katanya di sini Keys should be generated from your data jadi harus digenerate berdasarkan data kita Nah sekarang kita akan coba untuk coding ya di sini katanya untuk memanggil ID kita harus simpan dia di paling atas dari sebuah komponen misal kita punya komponen in Nah jadi di dalam sini saya akan bikin satu lagi function ini harusnya dipisah ya best practice-nya tapi enggak apa-apa ini biar cepat aja dulu nanti kita akan coba pindahkan Nah jadi saya punya input di sini di sini ada input mungkin kita coba untuk bungkus ini jadi label aja ya label kemudian ini tutupnya Jangan lupa oke di dalam label kita bikin input tipenya teks misalnya ya oke kemudian ini saya bikin poke span aja misalnya name gitu ya kemudian saya akan bikin P di sini untuk ngasih tahu inputan ini harus diisi Seperti apa gitu ya name Mas atau should ya should contain at least first name and last name gitu ya Nah seperti ini nah kemudian misalnya saya mau ngasih ID di sini ya ini kan bisa saja kita bikinnya kayak gini jadi ID input ID ya idama input gitu ya nah sini berarti saya akan berikan input ID gitu ya terus saya panggil di sini ini saya ganti jadi input Nah kayak gini harusnya sudah muncul ya Dan ini input yang ini l saya inspect nah ini dia ya dia punya ID input gitu ya terus kalau saya tambah satu input lagi ya dengan komponen yang sama maka otomatis ID input Jadi dua hal ini tidak boleh terjadi di dalam sebuah halaman yang sama ada dua input yang sama gu ya nah gimana cara ngakalinnya ngakalinnya kan sebenarnya bisa aja lewat props ya jadi sini saya define props ya dan cons ID misalnya sama dengan props gitu ya kemudian ini diganti aja kan misalnya n jadi ID kalau enggak dikirimin itu mungkin kasih input gitu ya Nah ini diganti aja jadi ID gu ya ini missing props validation ini karena dia tidak pakai prop types ya Jadi mungkin ini saya gunakan entire file saja dan tadi juga lupa untuk meng-set up menggunakan tsx ya oke sementara seperti ini dulu aja kita di kemudian kita coba pakai ID di sini kalau saya kirimin kan berarti id-nya adalah Misalnya first name guu ya Nah sekarang kan sudah berubah nih yang ini jadi first name ini karena tidak mengirimkan maka dia input gitu ya namun masih akan mungkin sekali terjadi kesalahan kalau kita lupa tidak mengirimkan ID e kemudian kita masukkan lagi inputnya maka akan tetap ada dua input atau Ya sudah jangan diberi nilai default gitu ya J langsung seperti ini tuh aman sebetulnya cuman kan dia jadinya enggak punya ID gitu ya nah gimana caranya kalau misalnya tadi kita gunakan yang use ID ya sehingga dia akan menggenerate secara tis id-nya Jadi kita gak perlu mikirin lagi ya caranya adalah ini saya ganti engak pakai props lagi tapi kita pakai mungkin input ID sama dengan use ID import dari react Nah kayak gini ya Dan kalau kita lihat yang ini mungkin saya bisa hapus ini saya punya buah input terus saya refresh nah perhatikan ID yang pertama itu tik2 r1.2 gitu ya ID yang kedua R3 ID yang ketiga R5 ya kalau saya punya 100 input Nah ya saya enggak perlu mikirin lagi id-nya apa Karena dia sudah pasti unik gitu ya Nah cuman kan ini jadinya saya enggak paham nih id-nya apa gitu ya Nah sebenarnya bisa di-combine juga ya kalau kita lihat di sini ada contoh kombinasinya nah kalau mau dicombine ini bisa aja misalnya sini saya tangkap props terus saya akan masukkan atau kita destructuring dulu ya Label sama dengan props Nah kayak gini labelnya ini mungkin nanti diganti di label di sini terus yang ini kita combine dia dengan input ID dan juga label Nah kayak gini ya misal nih saya kasih label first name gitu ya kita lihat nah ini ada first name ya kalau kita lihat nah ini ya Oh yang lain undevine kita cek dulu Nah ada first name cuman ini contoh yang enggak terlalu bagus ya kalau kita combine-nya dengan label atau misalnya Mau ditambahkan lagi ID juga boleh gitu ya misal kita bikin kayak gini aja first name G ya Nah ini berarti kita combineennya dengan ID Oke label boleh tetap ada ya nah jadi ada input ID dan juga ID kemudian kita lihat lagi sekarang tuh ya Ada R1 first name ya Terus nah ini und ini bisa kita coba untuk berikan default saja default id-nya adalah input dengan cara seperti ini ini tidak akan ada yang sama walaupun saya ngasih ID lagi di sini adalah first name lagi nah kalau teman-teman perhatikan id-nya sudah berbeda gitu ya Ada R3 first name ada R1 first name walaupun saya ngasih kedua-duanya adalah first name sehingga ini menghindari adanya duplicate ID kita gak perlu mikirin apa-apa lagi karena dia langsung digenerate oleh si reactnya ya menggunakan ID ini gu ya Jadi ini contohnya selain itu juga bisa digunakan untuk accesibility contoh yang paling simpel adalah menggunakan Ar nah DII misalnya area areanya kita pakai nah ini detail untuk input ID ya input ID misal seperti ini gitu ya Ini bisa juga ya biasanya area seperti ini digunakan untuk accesibility buat teman-teman yang belum tahu ya web accessibility mungkin teman-teman silakan bisa baca-baca ya bahwa ya ketika web ataupun web tools itu didesain dan dicoded gitu ya sementara orang-orang yang memiliki disabilitas juga mau menggunakan web tersebut ya Nah hal tersebut bisa dimanfaatkan ya untuk membantu meningkatkan web accessibility gu ya contohnya di sini ada area ini macam-macam ya fungsinya silakan kalau mau dibaca-baca gitu ya Dan kalau teman-teman perhatikan di sini ya ketika kita mendefinisikan sebuah ID ya maka ID tersebut akan melekat terhadap komponennya sehingga kalau kita menuliskan di sini input ID use ID maka otomatis yang ada di area details dan juga di Id ini akan sama gitu ya contohnya seperti itu walaupun ini sebetulnya mungkin bisa dicoba dicek lagi ya Apakah betul kita sudah memasukkan area details ini atau salah gitu ya Nah Contohnya seperti itu ya ini untuk accessibility gu nah kemudian kalau kita mau custom nih karena kan tadi cuman R1 ya di sini R2 dan lain sebagainya ini sebenarnya bisa juga kalau kita mau misalnya punya beberapa aplikasi yang berbeda gitu ya di dalam satu codingan yang sama Nah ini bisa dicustom cara custom-nya buka aja masuk ke main.jsx kemudian Nah di sini setelah root ini kita berikan koma terus tambahkan kurung kurwal lalu kita lihat di sini ada identifier prefix ya tambahin aja di sini identifier prefix mau apa misalnya react lanjutan ya Nah Jadinya kalau kita buka tuh ya Ada react lanjutan R1 tu kalau mau lebih bagus lagi mungkin kasih Dash lagi di sini ya jadi react lanjutan R1 first name re lanjutan R3 first name gitu ya sekarang tidak akan ada satuun ID yang sama ya ketika kita merrender komponen nah ini untuk menghindari nantinya domome manipulation yang gagal atau misalnya kita memasang analiytics ya terhadap website-nya dan ketika dibuka tidak konsisten karena id-nya ada banyak gitu ya misal nih Saya mau masang di sini nih ya untuk menganalisis form-form ini gitu ya user ngetikin form ini isinya apa gitu ya dan lain sebagainya Nah itu kan bisa diraacking ya sebetulnya nah ketika kita men-racking ID maka otomatis dia harus unik ya kalau tidak unik nanti bingung ya ngraackingnya input yang mana input yang pertama atau input yang kedua kalau dia id-nya sama misal nya ya Nah kalaupun sekarang kita tadi masukkan ya di sini dengan ID yang sama ini tidak jadi satu masalah kemudian juga kalau kita tidak memberikan ID otomatis kan dia akan mendapatkan nilai default input nah ini juga sama ya ini tidak akan jadi masalah juga tidak semuanya akan punya ID input jadi semuanya akan memiliki ID yang unik ya jadi itu ya sedikit mengenai use ID ya salah satu fitur yang dimiliki react mungkin ya sebetulnya jarang dipakai oleh orang gitu ya cuman ini sangat berguna sekali kalau menurut saya Ya karena di sini ya ID yang di genererate-nya unik cuman mungkin juga ada sebetulnya ya pakai cara yang lain gitu bisa saja di sini tidak menggunakan us ID tapi pakai mat.random ini juga bisa ya cuman ini ya pakai javascript biasa gitu ya Dan mungkin saja ya id-nya juga jadi panjang dan Selain itu ya ini akan pos possible mungkin saja punya ID yang sama gitu Ya walaupun dia diandomiz gitu kalau pakai use ID seperti ini ini sudah pasti tidak akan ada satupun id yang sama gitu ya walaupun kita misalnya define lagi di sini nih input ID terus saya mau bikin di sini sebuah input punya ID adalah dari input ID nah seperti ini ni kan ini ada input nih paling atas nah kalau kita lihat ya udah beda lagi r2l yang ini r2n ya r2p ini enggak akan ada satuun yang sama gitu ya karena dia selalu generated ya berbeda-beda kalau kita refresh Coba kita lihat nah ini ya R1 R3 dan sebagainya Coba refresh lagi tu R1 R3 R5 dan seterusnya gitu ya kalau kita coba build NPM Run build dia akan ng-build Oke untuk menjalankan yang hasil buildnya gunakan yang preview-nya ya clear coba NPM Run review oke ya ada di 4173 ya di sini ganti aja ini 4173 kita refresh nah r0 R1 R2 dan Seterusnya saya refresh tu dia tetap ya r0 R1 R2 dan seterusnya dia konsisten jadi kalau kita detect nanti di analytics ini tidak akan berubah-ubah gitu ya oke ya Jadi mungkin itu aja untuk video kali ini ya kita akan lanjutkan lagi materi-materi yang belum kita sentuh di sini kalau teman-teman perhatikan masih banyak sekali yang belum kita coba ya di seri react ada use callback ada use memo use Transition kemudian komponen juga kita belum pernah coba suspens ya api juga sama kita belum pernah nyoba lazy memo dan seterusnya ya pokoknya yang belum ada di series react kita akan bahas kupas di series ini sambil nunggu react 19 keluar nah yang baru dibahas sebetulnya di series react itu baru use evect Lalu ada use reducer use ref state ya baru itu aja yang lainnya belum Saya bahas Kenapa saya bahas hanya beberapa yang tadi itu karena yang sering dipakainya gitu ya kayak use Id ini kan sebenarnya jarang dipakai cuman Nice to know dan juga sebenarnya ada beberapa konsep yang cukup Advance seperti misalnya use Memo ini cukup Advance nanti kita akan coba pelajari juga ya itu aja mungkin untuk video kali ini ya jangan lupa untuk subscribe comment like dan share video ini kita ketemu lagi di video berikutnya