Transcript for:
Pengantar Dasar React JS

Halo teman-teman selamat datang di kelas rea JS ya Nah di mana Di sini kita akan mulai kelas pertama dari kelas react JS ya yang pertama kita bahas tentang dasar-dasar dari react js-nya Oke Sebelum kita mulai kita kenalan dulu ya jadi Nama saya adalah Eko Kurniawan saat ini kerja sebagai tchnikal arsitek di salah satu e-commerce terbesar di Indonesia nah saya sendiri sudah kerja lebih dari 14 tahun biasanya di sela-sela kesibukan saya bekerja saya juga biasa menyempatkan diri berbagai konten soal programming ya di website programmer zaman now atau di youtube channel programmer zaman now Oke kalau teman-teman ingin diskusi dengan saya teman-teman bisa kontak saya lewat telegram atau jangan lupa juga follow sosial medianya programmer zamanau ya ada di Linkin Facebook Instagram YouTube telegram channel ada juga di tiktok atau misalnya teman-teman butuh konsultasi dari perusahaannya teman-teman bisa juga email ke email pribadi saya oke sebelum teman-teman mengikuti kelas ini pastikan teman-teman sudah mengikuti kelas sebelumnya ya jadi pastikan teman-teman sudah mengikuti dasar-dasar kelas dari contohnya javascript notdejs Fit ya Dan kalau teman-teman sudah mengerti typespt itu juga lebih bagus ya walaupun di kelas ini kita akan praktiknya menggunakan javascript tidak akan menggunakan typesript jadi ini adalah kelas-kelas yang pastikan teman-teman harus kuasai terlebih dahulu ya jadi tidak bisa teman-teman langsung belajar react JS jadi teman-teman harus pelajari dasar-dasarnya dulu dari javascript nodejs dan juga Fit kalau misalnya teman-teman sudah selesai semua ya mempelajarinya yuk kita langsung masuk ke materi sekarang kita berkenalan dulu dengan react JS itu sendiri oke mungkin teman-teman butuh pertanyaan ya e jadi misalnya Kenapa sih kita butuh Framework atau library untuk front end Nah jadi mungkin bakal jadi banyak pertanyaan Apakah tidak cukup menggunakan cuma misalnya html CSS javascript saja Kenapa kita masih butuh Framework atau library seperti contohnya react JS ini nah salah satu alasannya adalah agar ada yang namanya standarisasi ya saat pembuatan Project terutama kalau nanti kita kerjanya dalam satu tim kalau teman-teman kerjanya cuma sendiri mungkin teman-teman bebas aja ya Jadi teman-teman mau bikin semuanya sendiri menggunakan HTML CSS javascript gitu ya itu teman-teman tidak ada masalah tapi nanti ketika teman-teman bekerja di dalam satu tim mau tidak mau kan teman-teman harus punya standarisasi ya biar semua orang itu bekerja ya bisa punya standar yang sama nah problemnya adalah kadang-kadang ketika kita membuat standar sendiri itu mungkin tidak ini ya tidak eh bagus ya atau tidak e mengikuti best practice nah salah satunya adalah dengan cara yang paling gampang adalah kita gunakan library atau Framework yang sudah ada nah contohnya kita menggunakan react JS misalnya nah tanpa adanya Framework atau library yang kita gunakan gitu ya maka setiap orang nanti bisa membuat kode dengan gaya masing-masing dan ini sangat Bahaya kalau nanti di Project besar ya punya timnya itu banyak karena nanti Tiap orang akan punya gaya masing-masing jadi nanti agak membingungkan ya kode programnya nah harapannya kalau kita misalnya menggunakan Framework atau misalnya library harapannya nanti semua orang ketika membuat aplikasinya itu bakal menggunakan standarisasi yang sama Oke kita bahas sekarang ya E tentang sejarah react JS itu sendiri jadi reak JS sendiri itu awalnya namanya adalah fax JS ya jadi F JS ini ya atau ya Saya kurang tahu apa apa dibacanya fax JS atau fax JS gitu ya itu mulai dikembangkannya di Facebook ya itu sekitar tahun 2010 jadi ini memang rea JS itu e dimulai dari Facebook ya sekitar tahun 2010 namanya fajs ya Nah ini untuk menangani masalah update halaman feed atau timeline-nya di Facebook ya tanpa harus refresh jadi itu asal mulanya nah tapi sekitar tahun 2011 fjs ini diintegrasikan dengan x HP ya atau pengembangan dari PHP jadi eh Facebook kita tahu menggunakan PHP tapi mereka mengembangkan PHP sendiri ya Jadi tidak menggunakan bawaan php yang biasanya Jadi mereka bilang adalah xhp ya Nah akhirnya tahun 2011 itu namanya diganti menjadi react JS nah sekitar tahun 2013 itu Facebook merilis react JS itu ke umum atau ke publik sebagai open source tool ya atau Project open source itu pada acara javascript conference pada tahun 2013 jadi saat saya buat videonya ini tahun 2024 Jadi mungkin baru sekitar 11 tahun ya untuk umur library atau Framework react JS ini nah saat ini react JS menjadi salah satu front end Framework yang paling populer saat ini ya dan banyak orang sekarang sudah tidak menggunakan react JS namanya tapi namanya menggunakan react kenapa ya karena sekarang tidak hanya menggunakan javascript aja ya nah jadi teman-teman bisa menggunakan srip misalnya gitu ya Bahkan ekosistemnya sudah mulai banyak sekarang react itu ya jadi contohnya ada react natif dan lain-lain Jadi sekarang banyak orang bilangnya cukup react aja jadi enggak menggunakan react JS lagi nah teman-teman bisa lihat ya jadi kode e library atau Framework si react ini ada di sini jadi dia open source dia ada di Facebook ya Nah di sini Nah ini teman-teman bisa lihat ya ya jadi saat ini lihat startnya aja itu sekitar r30.000 ya Jadi ini merupakan salah satu front end eh Framework atau front library yang paling populer saat ini ya oke Dan teman-teman kalau pengin lihat website-nya itu teman-teman bisa buka di react.dev ya Jadi ini adalah website react-nya Nah di sini oke saat teman-teman menggunakan react atau belajar react kita harus terbiasa dengan istilah yang namanya komponen saat teman-teman misalnya belajar menggunakan HTML kita tahu ya Ada yang namanya elemen atau kalau dalam dokumen obek model di javascript kita bilang adanya node seperti itu Nah kalau di react istilahnya itu adalah komponen jadi komponen itu apa komponen itu adalah kumpulan kode yang bisa digunakan secara independen jadi nanti saat kita develop aplikasi e frontend menggunakan react itu nanti kita biasanya akan develop ya Atau bikin dalam bentuk komponen-komponen komponen itu bisa berisikan satu atau lebih html elemen Nah makanya Kenapa tidak namanya elemen aja karena kan kalau elemen itu satu elemen aja ya di html-nya Nah kalau komponen itu isinya Ya itu bisa satu atau bahkan banyak html elemen jadi bisa kumpulan Yang penting nanti dia bisa digunakan si komponennya nah di dalam e elemennya Sor di dalam komponen juga bisa tidak hanya html elemen bisa juga ada kode javascript atau bukin teman-teman mau menambahkan CSS silakan Nah tidak ada aturan kalau teman-teman harus bikin komponen seberapa kecil atau seberapa besar gitu ya tidak ada aturannya ya jadi ee memang tidak adaur annya nah tapi gitu ya kalau bisa sih teman-teman nanti Saat bikin komponen seini mungkin ya reusable mungkin jadi gimana caranya bisa digunakan ulang si komponennya nah Anggap saja Contohnya seperti teman-teman membuat function ya kita bisa membuat function yang besar atau juga yang kecil ya Karena tujuan dari function adalah agar bisa digunakan secara berulang-ulang Nah itu juga tujuan dari komponen jadi agar bisa digunakan berulang-ulang J contohnya nanti teman-teman bikin E komponen tombol apa gitu ya nanti teman-teman bisa bisa gunakan berulang-ulang tuh komponen tombolnya seperti itu Nah struktur komponen itu sebenarnya mirip dengan eh doom ya atau dokumen object model ya Nah itu di mana kita bisa membuat komponen di dalamnya ada komponen lagi ada komponen lagi dan seterusnya jadi strukturnya benar-benar mirip seperti dokumen object model ya atau Dom Oke jadi seperti ini contohnya kita punya komponen namanya app ya atau application lalu di dalamnya ada komponen header misalnya lalu di dalamnya ada komponen menu misalnya nah itu ini ini benar ee strukturnya mirip seperti ini ya Eh dokumen objectek model ya jadi contohnya di app ada komponennya itu ada header ada content ada footer di mana Di footer tuh ada komponen copyright dan lain-lain nah di header juga ada komponen menu dan lain-lain di contonent misalnya ada komponen apa gitu ya dan sebagainya jadi ini strukturnya hampir mirip seperti dengan dokumen objectek model Oke saat teman-teman nanti belajar react itu teman-teman akan menggunakan yang namanya jsx ya Jadi tidak pure atau murni menggunakan javascript tapi kita akan menggunakan jsx ya Ketika teman-teman nanti membuat komponennya nah pertanyaannya Apa itu jsx jsx itu singkatan dari javascript xml atau javascript syntax extension Nah jadi ini dua-duanya benar ya Jadi ada yang bilang ini javascript xml atau javascript syntax extension ini adalah kombinasi kode javascript dan xml ya atau ya kita bilang html juga nah tapi tidak murni HTM ML jadi harus xml ya Nah di mana kita bisa membuat komponen dengan mudah menggunakan kode xml dan javaspt dalam satu file Jadi kalau teman-teman misalnya mau bikin eh elemen-elemen html Biasanya kan kalau di kode javaspt kita harus bungkus dalam string Nah itu ribet banget kalau misalnya ee komponen html-nya itu besar kalau kita menggunakan nanti xml ya itu lebih gampang seperti kita bikin html biasanya nah jsx sendiri diperkenalkan oleh Facebook di Ya nah tapi saat ini jsx itu sudah banyak diadopsi oleh framework-framework yang lainnya tidak hanya di react Nah jadi ini adalah sejarah tentang react Jaz Sebelum kita mulai kita akan buat Project terlebih dahulu ya Jadi kita akan buat Project untuk belajarnya untuk membuat Project react kita bisa menggunakan fit ya sebagai build tool-nya sebenarnya teman-teman bisa buat secara manual ya tapi di sini saya akan gunakan feed ya Yang banyak orang gunakan ya saat ini untuk build tool-nya Nah kita bisa membuat Project react menggunakan beberapa perintah Nah untuk membuat Project react yang kita akan gunakan javascript misalnya kita bisa gunakan perintah ini ntm ya kita gunakan nodejs create Fit eh add latest jadi kita ambil yang paling terbaru lalu di sini nama aplikasi kita nanti akan dibuat jadi nama folder lalu strip strip spasi strip strip lagi lalu template l di sini teman-teman Tentukan template-nya ada adalah react nah bedanya kalau teman-teman nanti menggunakan bahasa pemogramannya typesript itu teman-teman gunakan react TS ya atau typesript nah detailnya teman-teman bisa lihat di sini Jadi ini cara membuatnya Nah di sini ya Nah teman-teman bisa lihat di bagian sini Jadi ini gunakan NPM create Fit lest Misalnya ini nama aplikasinya lalu di sini tambahkan stripstrip lalu stripsrip lagi lalu template di sini jenis template-nya Nah ada banyak di bawah kita bisa lihat di sini ada react ada react S misalnya nah ini kalau teman-teman menggunakan NPM ya Nah teman-teman juga bisa menggunakan yarn build tool-nya misalnya atau PNPM atau bahkan teknologi baru contohnya ban seperti ini teman-teman bisa pilih Nah di sini saya akan gunakan yang paling sederhana dulu yang biasanya sudah ada ya Di notjs itu menggunakan NPM kalau teman-teman nanti mau menggunakan Yar atau PNPM atau ban silakan saja ya tapi di sini saya akan menggunakan yang NPM Oke jadi di sini kita akan buat Project contohnya di sini saya akan gunakan perintah NPM create Fit latus misalnya belajar react dasar ya lalu di sini strip strip spasi stripsip lagi template template-nya adalah react nanti sudah e terinstal contohnya di sini otomatis dibuatkan nama foldernya adalah belajar react dasar nanti teman-teman tinggal instal kalau teman-teman mau jalankan aplikasinya teman-teman bisa gunakan NPM Run Dev Oke kita akan coba praktiikkan Oke saya akan gunakan perintah PM create ya lalu di sini Fit add latest lalu di sini belajar reak dasar stripstrip spasi stripsp lagi template lalu di sini adalah react ya eh seperti Oh sorry letest salah ya letest kurang t nah oke apak mau diinstal ya ya oke selesai jadi sekarang saya sudah ada folder belajar rea dasar Oke Selanjutnya teman-teman silakan masuk di sini ya Nah di sini belajar reak dasar nah tapi sebelumnya teman-teman pastikan dulu dia menggunakan versi terbaru dari react js-nya karena saat saya buat videonya ini react itu baru banget rilis ya versi terbarunya yaitu versi 19 jadi di sini kita akan praktiknya menggunakan react 19 kalau teman-teman nanti cek template-nya masih menggunakan react 18 teman-teman silakan update ke react dulu ya nah saya akan buka dulu contohnya saya akan gunakan webstor untuk membukanya kalau teman-teman mau menggunakan Visual Studio code silakan saya akan coba buka dulu ya Nah nanti kita akan coba saya akan coba perbesar di [Musik] sini saya akan coba perbesar dulu ya Nah ini ee teman-teman silakan liat lihat di bagian package json ya Nah di sini kalau temanan perhatikan ini e ada dua dependensi react dan juga react domnya nah reactnya itu masih versi 18 nah ini react dom-nya juga ya di sini reactnya juga nah saya akan upgrade ke versi 19 jadi di sini saya akan ganti ke versi 19 ya 1900 yang terbaru ini juga yang rea domnya saya ganti ke 1900 lalu di sini eh reactnya apps-nya juga Sama ini 19 Nah ini Kebetulan 01 yang terbaru ini 1902 yang terbaru nah selesai Nah jadi saya akan update dulu ke yang terbaru ya Nah Oke jadi nanti struktur projectnya seperti ini kurang lebih ya Nah kalau teman-teman sudah belajar Fit ya harusnya sudah mengerti jadi nanti di sini ee ada public untuk eh aset dan sebagainya Lalu ada src ya atau source ini untuk kode Project kita dan ini adalah file index html-nya sebagai filennya Oke selanjutnya pastikan juga teman-teman harus update versi react JS yang terbaru ya nah jadi teman-teman pastikan update react dan juga react domnya nah saya tadi pakai yang versi 19 ya Nah kalau sudah silakan teman-teman e buka terminalnya teman-teman instal menggunakan NPM instal ya selesai kita tunggu Nah nanti setelah sukses diinstal nah teman-teman silakan Jal jalankan ya E projectnya menggunakan perintah ini NPM NPM Run Dev nah ini ada di sini ya Sebenarnya dia waktu Dev dia ngejalanin pakai Fit seperti ini Oke sudah nanti teman-teman silakan gunakan NPM Run Dev ya Nah nanti dia akan running di port 5173 nah teman-teman silakan buka aja ya E di port 5173 contohnya kita akan coba buka nah hasilnya seperti ini ini adalah Fit ya dan react Nah nanti kita akan coba belajar dari awal ya sampai semua fitur Diak kita akan coba bahas di kelas ini biasanya kalau kita belajar pertama kali kita akan bikin aplikasi hello world misalnya ya Nah kita akan coba bikin aplikasi sederhana hello world ya menggunakan react Oke jadi seperti biasa hal yang biasa kita buat ketika belajar pertama kali itu bikin aplikasi hello world Sekarang kita coba bikin halaman web ya yang isinya cuma tulisan hello world itu menggunakan react Oke jadi yang pertama yang biasa kita lakukan itu saat kita belajar react itu adalah membuat komponen Jadi biasanya komponen itu akan dibuat dengan nama file-nya ya atau menggunakan File adalah jsx ya Nah namanya biasanya sesuai dengan nama komponennya nama komponen itu biasanya menggunakan ini ya menggunakan camel cas camel cas itu artin nya di kata-kata pertama itu selalu menggunakan huruf kapital huruf besar jadi kalau kita misalnya membuat komponen namanya adalah hello world itu digabung semua tapi hello-nya h-nya itu huruf besar dan word-nya w-nya huruf besar jadi ini biasanya kalau e komponen biasanya huruf kapital di depannya ya Jadi ini e istilahnya adalah camel cas Nah jadi kita akan buat nanti nama file-nya adalah helloord.jsx ya jadi file jsx itu extension-nya nya adalah jsx kalau teman-teman menggunakan typescript ya itu ada juga tsx ya jadi teman-teman gunakan nanti tsx Nah kita di sini praktiknya menggunakan javascript saja Nah selanjutnya kita perlu membuat default function ya Nah default function di dalam si jsx ini nah biasanya nama default function ini menjadi nama komponennya nah Biasanya sih disamakan dengan nama file-nya ya Jadi kalau nama file-nya adalah hello world kita juga bikin default function-nya adalah hello world juga Nah nanti ya Return dari function tersebut itu berupa elemen UI yang nanti akan kita tampilkan Nah nanti kita akan coba lihat contohnya Oke ini contohnya misalnya ya kita akan buat namanya adalah Hello world. jsx ya Nah nanti di sana kita akan bikin sebuah function biasanya namanya Hello world ya disamakan biasanya lalu di sini kita returnkan Nah di sini kita returnkan ini adalah elemen ya elemen dari si komponennya contohnya di sini menggunakan Div gitu ya lalu H1 Lalu ada paragraf dan seterusnya Nah kalau jsx itu cuma bisa mengembalikan ya return-nya itu eh satu elemen ya jadi artinya kalau Div ini Div di sini jadi dalamnya jadi teman-teman enggak bisa h1p di paling atas di sini enggak bisa jadi enggak bisa dua elemen jadi harus satu elemen seperti ini jadi teman-teman harus bungkus Nah kalau teman-teman Oh saya memang tidak mau menggunakan Div misalnya nah teman-teman bisa bungkus menggunakan yang namanya fragmen ya Nah FR ini itu nanti tinggal kurung e ini E kurang dari lebih dari sudah selesai seperti itu nanti kita coba praktikkan Nah setelah itu biasanya kita akan export ya default-nya si yang function ini nah ini adalah elemen hello world ya jadi elemen yang paling sederhana Nah jadi seperti ini oke nah kita akan coba ya praktikkan dulu ya Nah nanti kita akan bikinnya ini teman-teman nanti Bikinnya di ini ya di eh Misalnya saja kita akan Min nanti file hello world ya sorryi folder hello world Ya misalnya ya Jadi kita akan buat misalnya di src Nah di sini saya akan bikin sebuah folder namanya Hello word ya Nah seperti ini Nah kita akan bikin di sini jadi di sini Biasanya kita akan bikin misalnya helloord.jsx ya Nah kita akan bikin jadi teman-teman bisa gunakan function Hello word misalnya seperti ini ya lalu teman-teman eh export default hello bisa teman-teman seperti ini atau mau langsung aja deh gitu ya jadi di sini export default function Hello word nah ini seperti ini langsung silakan aja nanti kita return kan di sini ya jadi teman-teman return di sini misalnya nah biasnya kita akan tambahkan kurung buka kurung tutup ya biar lebih E ini kebaca Nah teman-teman bisa langsung langsung gunakan seperti ini ini adalah fragmen namanya ya Eh fragmen atau kalau teman-teman Oh saya memang mau pakainya Div misalnya nah kita bisa gunakan Div tapi yang penting dia cuma bisa balik satu elemen aja tapi satu elemen tuh bukan berarti di dalamnya tidak boleh ada elemen lain ya Nah teman-teman bisa tetap tambahkan elemen lain tapi kalau teman-teman bikinnya seperti ini misalnya ya E H1 misalnya gitu ya ini misalnya hello world lu teman-teman bikin P di sini misalnya Selamat belajar react JS nah seperti ini ini enggak bisa ya jadi memang jsx itu cuma bisa mengembalikan satu elemen Jadi kalau teman-teman Oh saya maunya dua elemen teman-teman harus bungkus dalam fragmen misalnya nah seperti ini nih atau Oh saya maunya ini Div aja nah silakan pakai Div seperti ini Oke saya akan coba perbesar sedikit lagi kayaknya kurang besar nah seperti ini Oke jadi teman-teman bisa lakukan seperti ini juga ya Jadi ini kita sudah bikin komponen namanya adalah hello world nah kebetulan di sini cuma ada eh ini ya Eh ini sebenarnya kalau teman-teman bilang apakah ini html ini enggak disebut html juga karena ini harus xml ya xml tuh bedanya dengan HT xml kalau xml itu tag-tag-nya itu harus ditutup contohnya kan kita biasa bikin contohnya teman-teman e bikin image gitu ya itu kan biasanya kita cukup seperti ini gitu ya kalau di html enggak wajib ditutup Nah kalau di xml itu enggak bisa teman-teman harus tutup ya atau tutupnya langsung di ujung sini nah seperti ini jadi itu wajib kalau di xml tapi kalau di html itu tidak wajib ya Nah makanya ini bilangnya javascript xml bukan javascript html Oke ini kita sudah bikin jadi ini adalah komponen hello world jadi kita bikin sebuah function namanya Hello world ya lalu kita return kan si isi dari elemen-elemennya jadi simpel sekali oke sekarang pertanyaannya Gimana caranya kalau kita mau menampilkan si komponen yang sudah kita buat untuk menampilkan komponennya kita perlu bikin Instance dari react root-nya jadi nanti kita bikin anggap aja bikin aplikasi react-nya jadi kita harus bikin dulu nih eh objek dari si react-nya Nah kita bisa membuat e objek dari rea root ini menggunakan method namanya create root Oh di sini Tentukan elemennya elemen di sini adalah elemen di mana Nanti teman-teman mau menampilkan si komponennya ya jadi di html-nya mau di mana nih nah kita bisa gunakan metod namanya create root Nah kita bisa lihat di sini kalau teman-teman lihat ya jadi di sini nah jadi simpel banget jadi cukup gunakan create root Nah di sini adalah doom-nya ya atau elemennya nanti mau ditampilkan di mana Nah di sini ada option-nya tapi opsional jadi teman-teman wajib atau Ee tidak wajib ya Sorry Oke kita akan coba ya jadi Selanjutnya saat teman-teman sudah bikin E reakrot-nya kalau teman-teman mau menampilkan dari si komponen yang teman-teman sudah buat kita bisa gunakan metod yang namanya render dari si reakrot tadi Nah untuk membantu ya karena kita sekarang lagi belajar untuk membantu mencari masalah nanti Saat development react menyediakan komponen namanya striak mode Nah kita bisa gunakan strick mode untuk menampilkan komponen di root-nya ini sebenarnya E ini ya ketika mode development untuk membantu saja kalau misalnya ada masalah biar nanti si rect-nya yang bisa mencarikan e ininya ya memberiahu kira-kira Ada masalah apa teman-eman bisa tambahkan nanti striak mode ini J Nanti sebelum menampilkan komponennya teman-teman tambahkan striak mode contohnya striak mode Oh di sini komponen teman-teman seperti itu ya Nah nanti kita bahas juga ya secara bertahap kegunaan dari stak mode ini dan Ken apa eh sesuatu itu terjadi di stak mode misalnya Oke jadi seperti itu Nah jadi sekarang untuk mempraktikkannya jadi yang pertama kita akan bikin kode main jsx dulu ya jadi nanti ini yang akan digunakan untuk e membuat reactnya dan juga akan menampilkan dari si elemen yang sudah kita buat atau komponen yang sudah kita buat jadi kita gunakan create root lalu di sini adalah node-nya teman-teman pilih contohnya di sini kita gunakan documen get Element by ID id-nya nanti root J teman-teman nanti di html-nya harus bikin satu buah elemen yang id-nya root ya Jadi nanti semua elemen dari si react akan ditampilkan di root tersebut Lalu kita gunakan render untuk menampilkan ya di sini teman-teman tinggal tambahkan elemen Mana yang mau dirender nah simpelnya Di sini kita bisa misalnya gunakan strick mode ya kalau teman-teman mau ya Ini juga tidak wajib ya Ini cuma untuk membantu proses development aja kalau teman-teman tidak mau menggunakan striak mode teman-teman bisa langsung panggil si komponen teman-teman jadi cara pemanggilannya pun mirip seperti Seti eh html ya Jadi teman-teman tinggal panggil hello world teman-teman di sini tinggal import hello world ya nama komponennya dari file yang tadi kita buat nah seperti ini Nah kita akan coba praktiikkan Oke kita akan bikin dulu ya di dalam hello world di sini saya akan bikin nama file-nya main e main.jsx ya bebas nama file-ya Nah kita akan eh create root ya jadi teman-teman gunakan create Root Eh import dari react Dom eh clien Oh di sini Nah teman-teman tinggal mau Tampilkan di mana Saya akan Tampilkan di dokumen misalnya get Element by ID nanti id-nya saya mau e namanya adalah root misalnya ya nanti setelah itu kita akan coba render Nah kita render si elemennya nah teman-teman kalau mau langsung aja gitu ya itu silakan contohnya hello world elemennya nah seperti ini ya ini bisa langsung seperti ini nah jadi ini kita import dari hello world yang jsx-nya atau Oke saya mau bungkus dalam strick mode ya striak mode seperti ini Nah teman-teman bisa lakukan seperti ini juga Oke jadi kita sudah siapkan ya Ee main jsx-nya ya Nah nanti main jsx ini yang akan di-oad sama file html yang kita buat Oke jadi kita akan buat file html namanya adalah hello world ya Nah di sini simpelnya kita siapkan dulu ya di sini elemen id-nya root jadi nanti semua e komponen yang tadi kita mau Tampilkan itu nanti akan Tampilkan di dalam elemen ini nah seperti itu lalu kita coba panggil si main jsx-nya ya Jadi kita gunakan di sini script type-nya adal module ya lalu kita tambahkan yang di sini hello world main jsx Oke kita akan coba Oke saya akan copy yang index html ya biar lebih gampang saya akan paste di sini menjadi hello world oke Ini e sudah sama ya Ini juga sudah root nah ini Tinggal kita ganti ini jadi -nya ke Hello main jsx selesai sudah ya Nah karena kita menggunakan fit ya secara default itu Fit itu kan cuma dia eh untuk handle satu file ya index html nah kita kan sekarang sudah bikin file baru nih namanya Hello world nah ini pernah saya jelaskan di classfeed ya Jadi kalau teman-teman eh mau punya beberapa halaman eh html ya untuk nanti dicompile oleh Fit Nah kita bisa eh gunakan yang multiile ya untuk fed-nya caranya teman-teman tinggal update di Fed config-nya Nah di sini teman-teman tambahkan build ya lalu roll up option input-nya kita tambahkan filenya kan defaultnya adalah index html kita tambahkan yang lainnya contoh di sini hello world namanya adalah Hello world.html biar nanti ketika dicompile ya itu jadinya e filenya enggak cuma index html nanti kita akan coba lihat contohnya Oke saya akan coba buka Terminal dulu saya akan stop dulu ya saya akan gunakan ctrl c ini misalnya kalau teman-teman C coba eh build ya menggunakan Fit kita coba lihat di sini package gestion dia ada build ya Jadi ini perintahnya Fit e build ini kalau temantan coba misalnya NPM NPM misalnya eh Run build nah dia akan nge-build ya dan kalauan perhatikan kita akan lihat di distribution file itu cuma ada index html Nah kenapa index html aja karena tadi default-nya memang Fit itu cuma menggunakan fil-nya index html nah kita kan pengin menambahkan file lain ya yaitu adalah hello world tadi kita sudah buat nih hello world Nah jadi di Fit config-nya kita perlu tambahkan di sini jadi di sini kita tambahkan yang build-nya Nah kita Tambahkan lagi di sini roll off option kita tambahkan input-nya Nah jadi kita tidak cuma index Misalnya ini index.html Nah kita Tambahkan lagi namanya Hello world Misalnya ini adalah Hello Wat html nah seperti ini nah jadi kita sekarang ada ada dua file jadi nanti kalau teman-teman mau menambahkan beberapa file beberapa file html lagi teman-teman silakan tambahkan di sini Oke kita coba lagi ya Jadi kita gunakan perintah yang sama NPM Run build Nah sekarang harusnya sudah ada juga nih ya file hello world dan juga semua yang kita pakai tadi ya elemennya contohnya hello world di sini nah jadi Sudah ada jadi caranya seperti itu Oke tapi itu kalau teman-teman nanti ya ketika kita eh compile e jadi satu file-nya Nah sekarang kita mau running mode development aja jadi NPM Run Dev Oke sekarang kita akan coba ya buka Nah kita akan coba lihat lagi Nah di sini Jadi kita akan coba buka tadi nama file-nya adalah hellowor.html nah saya akan coba perbesar 200% biar jelas nah sekarang kita lihat hello world Selamat belajar react JS nah ini hot reload ya Jadi kalau teman-teman coba edit misalnya elemen di sini sebelamat belajar react JS dari programmer zaman now misalnya Saya save nah dia ada hot reload-nya teman-teman bisa lihat langsung di browsernya berubah Selamat belajar react JS dari programmer zamanau Nah jadi kita sudah berhasil ya membuat satu elemen ya ya sori satu komponen ya yaitu adalah hello world memang kelihatannya sedikit lebih panjang ya Nah dibanding kita seperti biasa Nah karena memang tujuan dari reak itu memang penginnya dibikin per elemen ya nah jadi nanti keuntungannya apa kita sudah bikin nih hello world ya Nah teman-teman kalau mau contohnya di main JS Oke saya mau panggil lagi hello world kedua kalinya saya mau panggil lagi hello world ketiga kalinya Nah kita bisa lihat ya Nah lihat dia muncul tiga kali Nah makanya memang tujuan dari eh elemen e sor komponen itu adalah bisa digunakan berulang-ulang nah jadi itu tujuannya Nah jadi kita bisa gunakan sekali misalnya seperti ini hasilnya satu atau digunakan berkali-kali itu juga bisa kita lakukan jadi ini adalah aplikasi hello world ya menggunakan react sekarang kita bahas tentang komponen ya react compponen itu mendukung semua elemen html dan juga svg ya Jadi kalau teman-teman bikinnya itu eh html itu diupport kalau tem mau bikinnya svg juga dia disupport nah jadi kita tidak perlu khawatir ketika teman-teman membuat komponen di react karena semua elemen itu pasti didukung Nah teman-teman bisa lihat diailnya di sini ya Jadi teman-teman bisa lihat di bagian react Doom componen ini Jadi ini ada banyak ya komponen-komponen yang diupport ya jadi all html componen Jadi teman-teman enggak usah khawatir Oh saya mau menggunakan tag apapun di html itu didukung oleh si react Nah jadi teman-teman tidak perlu khawatir jadi nanti kita praktiikkkan kode-kode HTM ML yang biasa teman-teman buat ya di dalam SI react komponen itu bisa didukung Oke selain itu react juga mendukung yang namanya multiple komponen Jadi sebelumnya kita membuat satu file jsx Itu untuk satu komponen nah walaupun itu adalah praktik yang baik jadi bagusnya tuh memang default-nya satu file itu satu komponen gitu ya Nah kadang-kadang gitu ya Ee kita mungkin pengin bikin satu file itu banyak komponen walaupun sebenarnya itu jarang dilakukan ya Biasanya sih satu file ya satu komponen nah tapi bukan berarti itu ee tidak bisa dilakukan jadi kalau teman-teman mau buat misalnya satu file ada banyak komponen itu bisa aja tidak ada larangannya ya Nah komponen sebenarnya hanyalah sebuah function yang mengembalikan react elemen jadi ketika kita balikkan dalam bentuk eh tag HTML yang tadi itu sebenarnya dia adalah react elemen nah Oleh karena itu jikalau kita ingin membuat komponen kita hanya cukup membuat function yang mengembalikan react elemen yang sebelumnya kita praktikkan nah contohnya yang Hello world Sebelumnya kita akan coba pecahkan jadi beberapa function misalnya ya Jadi sebelumnya kan kita langsung eh balikkan hello world ya Eh Lalu ada paragrafnya juga nah kita akan pecahkan jadi beberapa contohnya di sini ada header hello world ya Nah return-nya adalah h1-nya saja Lalu kita bikin lagi di sini paragraf hello world lalu di sini return paragrafnya saja Misalnya seperti itu Nah nanti komponen atau atau misalnya E yang sudah sebelumnya kita buat yaitu adalah hello world kita akan balikan di sini menggunakan Div l di dalamnya di sini kita Panggil yang Hello world eh header dan juga paragraf hello world nah seperti ini ini juga bisa teman-teman lakukan nah ini kita simpan di dalam filennya adalah hello world kita coba ya Nah Oke kita coba misalnya jadi di sini sebelumnya ya di dalam hello world kita punya hello world Nah di sini ya Jadi kita akan coba jadi kan sebelumnya di sini cuma ada satu function ya teman-teman bisa mau bikin function yang lain juga bisa ya contohnya kita bikin function namanya header hello world Ya seperti ini l di sini function misalnya paragraf ya E hello world nah ini juga bisa ini kita saya akan copy yang ini pindahkan ya ini return misalnya nah seperti ini ya lalu yang ini saya akan Cut juga return misalnya nah seperti ini ini juga bisa ya Jadi kalau kita save Nah ini kan kosong ya halamannya hilang nah saya akan Panggil di sini dia adalah Hello e header Hello word sorry Nah lalu di sini paragraf hello world nah saya save Nah lihat dia muncul seperti sediakala Nah jadi tidak ada aturannya sebenarnya kalau teman-teman mau bikin eh banyak Eh elemen function ya di dalam satu file itu boleh aja Ya silakan Nah jadi teman-teman bisa lakukan seperti ini juga sekarang kita bahas tentang jsx ya atau javascript xml pertanyaannya Kenapa jsx ah web dibuat menggunakan HTML CSS dan juga javascript nah Biasanya kita akan menyimpan kontennya itu itu di dalam halaman html Nah kalau kita membuat desain itu biasanya kita simpan di CSS ya Dan kalau kita bikin logika dari aplikasinya kita biasa simpan di javascript dan biasanya kita akan simpan di file-file yang terpisah-pisah antara html css-nya dan juga javascript-nya nah tapi saat ini web itu sudah lebih interaktif seringnya konten html ditampilkan berdasarkan logika dari aplikasi javascript-nya Jadi kalau misalnya javascript logicnya a nanti dia kontennya b gitu ya javascript logic-nya b kontennya c dan lain-lain Jadi biasanya saat ini tuh dinamis ya Nah itu yang saat ini jadi jarang sekali sekarang itu statis ya kalau web Jadi sekarang itu pasti banyakan dinamis nah Oleh karena itu react melakukan logika aplikasi dan pembuatan konten di satu tempat yang kita bilang namanya adalah jsx Oke pertanyaannya Apakah Gampang kalau kita transisi dari HTML biasa ke jsx nah saat mengubah kode html ke jsx kita tidak bisa melakukan semua copy paste dari kode html ke jsx Nah kenapa karena jxx memiliki aturan yang lebih ketat dibanding html nah sebelumnya ya kita sudah tahu ya contohnya misalnya hak wajib ditutup ya tag-nya seperti itu jadi contohnya kalau kita menggunakan image source sama dengan ini ini di html jalan tapi kalau teman-teman gunakan di jsx ini tidak jalan Kenapa karena yang belakangnya itu tidak ditutup tag-nya Nah jadi wajib ditutup jadi contohnya seperti ini nah jadi beberapa hal pun kadang-kadang ya contohnya di dalam E jsx itu berbeda contohnya beberapa atribut di tag elemen itu berbeda juga jadi kita tidak bisa gunakan ee namanya itu bulat-bulat ya Nah jadi kita harus ee Ini harus benar-benar perhatikan mana yang bisa dicopy paste dari HTML ke jsx mana yang kita harus ketikkan ulang oke Ini adalah aturan dari jsx jadi komponen hanya boleh mengembalikan satu elemen Jadi sebelumnya kita sudah bahas ya Jadi kalau teman-teman di dalam komponen mengembalikan lebih dari satu elemen kita bungkus menggunakan fragmen seperti itu nah J jadi kalau kita mau mengembalikan Beberapa elemen kita eh harus bungkus dalam parent elemen ya entah itu contohnya teman-temangunakan yang Div atau yang fregment tadi Nah lalu teman-teman juga wajib menutup semua tag elemen jadi ini wajib nih jadi teman-teman tidak bisa tidak menutup ya karena itu mungkin misalnya Oh html bisa berarti jsx bisa nah sayangnya tidak seperti itu jadi wajib nah Selain itu atribut itu menggunakan camel case nah ini yang agak sedikit mungkin e berbeda ya jadi atribut di elemen jsx itu sebenarnya dia akan dikonversi ke variabel di javascript nah Oleh karena itu nama variabel harus mengikuti cara pembuatan nama variabel di javascript jadi atribut di dalam jsx itu harus mengikuti nama variabel di javascript contohnya tidak bisa ada spasi misalnya tidak bisa menggunakan strip gitu ya harusnya menggunakan undersore gitu ya atau ya Biasanya sih rata-rata menggunakan camel cas nah Oleh karena itu ya Contohnya penggunaan strip itu tidak bisa ya kenapa karena keterbatasan dari ee ini ya nama variabel di javascript nah Oleh karena itu kebanyakan nanti atribut di elemen jxx itu akan menggunakan camel case contohnya adalah class name bukan class name seperti ini kalau di html itu ada yang namanya class name ya atau di ee ini di bawaan dari dom-nya ya Nah dokumen object modelnya nah sayangnya kalau di jsx itu tidak bisa karena ini ada strip di tengah-tengah ya kalau ada strip di tengah-tengah itu enggak bisa jadi kita harus gunakan class name makanya tidak bisa bulat-bulat di copy paste ke dalam SI jsx kalau teman-teman punya kode html Nah kalau misalnya kita sudah terlanjur punya kode html dan teman-teman ingin konversi ke jsx secara gampang disarankan teman-teman menggunakan converter ya sehingga kita tidak perlu lakukan secara manual ini contohnya adalah tool converter yang banyak digunakan yaitu di sini adalah HTML to jsx Nah kita bisa gunakan ini ini adalah aplikasi yang open source teman-teman bisa lihat di github-nya nah ini contohnya Ya teman-teman ada kode html saya akan coba perbesar Eh nah seperti ini ini kode html misalnya ada Div class awesome misalnya style dan sebagainya nah ketika dikonversi menjadi jsx Nah lihat ya Ini kan ada dua elemen ya Ada Div dan juga ada P nah ini enggak bisa makanya dibungkus di atasnya di sini pakai fragmen contohnya lalu di sini class itu enggak bisa ya Karena kassas itu adalah keyword di javascript ya jadi dia pakainya adalah class name seperti ini nah lalu di sini style juga Sama ini kan key value key value contohnya kalau di e CSS ini juga harus dikonversi jadi javascript object Contohnya seperti ini nanti kita bahas Lebih Detail ya tentang kurungkawal seperti ini nah jadi teman-teman bisa lihat eh for juga sama for itu kan dia ini ya Eh keyword di javascript ya Nah di sini tidak bisa juga jadi pakainya e labelnya html 4 jadi beberapa kayak keyword di Java ip itu enggak bisa juga ya teman-teman harus ganti nah tenang aja detailnya harusnya teman-teman Nanti bisa lihat di halaman dokumentasinya react jadi ini ini hampir mirip ya input type-nya e ID ini enggak ada ya ini enggak ada yang beda maksudnya nah ini juga tidak ada yang beda nih yang ini P nah paling yang ini ya yang label for-nya Beda Dan ini kassasnya beda Nah jadi seperti ini jadi kalau teman-teman pengin gampang teman-teman juga bisa menggunakan yang html ee Sori jsx converter ya jadi kita bisa paste e html script-nya di sini nanti bisa dilihat kira-kira jsx-nya bakal Seperti apa sekarang kita bahas kode javascript di jsx kadang-kadang ya Eh kita ada kasus di mana ingin mengakses kode javascript di jsx misalnya ya Nah pada kasus ini kita bisa menggunakan kurung kurawal jadi kita gunakan ini kalau ke teman-teman di kode yang ininya ya di e kode jsx-nya ya ya teman-teman tinggal tambahkan kurung kurawal Nah nanti di dalam kurung kurawal tersebut teman-teman tinggal gunakan atau akses kode javascript-nya nah misal saja ya kita akan coba misal aja nanti yang kode Yang sebelumnya Yang Hello world kita akan keluarkan misalnya ya jadi tulisan di dalam sini misalnya saya akan keluarkan di sini menjadi variabel javascript contohnya di sini text sama dengan hello world nah saya mau mengakses teks ini Nah untuk mengakses teks ini Nah di sini ketika teman-teman gunakan e kode jsx seperti ini itu teman-teman tidak bisa langsung ketikkan teks kalau ketikkan teks berarti jadi teks biasa Nah kalau kita mau mengakses variabel di javascript Artinya kita mau bikin kode javascript di sini teman-teman harus gunakan kurung kurawal jadi dalam kurung kurawal ini teman-teman silakan masukkan ya kode javasip-nya ya sebagai expression ya Jadi teman-teman bisa gunakan contohnya text ya kita ambil yang text contohnya di sini to upper casase kita naikkan misalnya seperti itu Nah atau yang ini misalnya kita buat teks nah ini kita teman gunakan teman-teman e kurungk awal juga lalu text to lower cas misalnya seperti ini Oke kita akan coba ya nah jadi yang Hello world tadi nah misalnya di sini saya akan buat ya Jadi ini kita pindahkan misal saja con Tex sama nah seperti ini nah kalau teman-teman mau akses itu tidak bisa teks seperti ini eh teks gitu ya ini kalau saya save Nah lihat di sini jadinya Teks seperti ini ya nah saya mau mengakses teks ini jadi kita gunakan kurung kur Awal jadi kita gunakan teks titik misalnya to uppercase Nah Lihat jadinya seperti ini nah termasuk yang ini ya ini saya akan coba pindahkan tag sama dengan nah ini lalu kita coba tampilkan di sini text to lower case misalnya nah lihat hasilnya seperti ini nah jadi kalau teman-teman mau mengakses kode javascript teman-teman gunakan kurung kurawal lalu di dalamnya tinggal masukkan kode javascript-nya Nah kalau teman-teman nanti Perhatikan ya Nah penggunaan kurung kurawal di jsx itu hanya bisa dilakukan pada dua lokasi nah yang pertama itu sebagai teks Ya seperti pada contoh sebelumnya itu kan sebagai teks gitu ya Nah atau sebagai nilai atribut pada tag elemen jadi misalnya image source sama dengan nah ini location-nya seperti ini jadi tidak bisa sebagai contohnya nya sebagai tag elemen gitu ya Nah itu enggak bisa jadi teman-teman gunakannya sebagai teks contohnya isi dari teks nah atau teman-teman gunakan sebagai value dari si atributnya Nah jadi seperti itu jadi teman-teman tidak bisa gunakan di tempat yang lain oke saat nanti teman-teman bikin atau menggunakan kode jsx itu teman-teman mungkin nanti akan sering ngelihat ada orang kok yang bikin kurung kurawalnya dobel nah sebenarnya tidak ada gitu ya kurung kurawal dobel nah jadi itu sebenarnya adalah javascript object nah cuma ditempatkan di dalam SI kurung kurawal jadi seakan-akan kelihatannya kayak kurung kurawal doble padahal lain ya nah jadi lain seperti itu sebenarnya jadi pada beberapa atribut contohnya atribut style kita bisa menggunakan javascript object sebagai parameter nah Oleh karena itu kadang sekilas terlihat seperti kurung kurawal doble nah padahal sebenarnya hanya satu kurung kurawal saja dan kurukurawal yang keduanya itu adalah javascript objek Nah kita lihat contohnya nah misalnya Saya mau tambahkan H1 ditambahkan style Nah untuk style ini itu kan tipenya di dalamnya adalah objek ya Nah objek itu kita bisa gunakan di sini kurung kurawal Nah berarti kan kurung kurawal lagi nih ini objeknya nah contohnya color red lalu background color Nah lihat ya ini kan eh karena kan di javaspt tidak bisa pakai strip ya jadi background Color pakainya yang seperti ini camel case ya Nah seperti ini nah jadi background color seperti ini Oke Nah selanjutnya sebenarnya kode ini itu mirip seperti ini jadi contohnya teman-teman bikin style ini adalah javascript object lalu style-nya ini teman-teman tambahkan ke sini style sama dengan style seperti ini nah tapi kalau teman-teman bikinnya Inline seperti ini ya di dalam E tag-nya itu seakan-akan kayak dobel kurung kurawal padahal sebenarnya dia bukan Doel kurung kurawal Oke kita coba praktiikkkan oke di sini misalnya H1 saya akan tambahkan style nah style kurung kurawal ya lalu saya akan tambahkan objek ya jadi kita tambahkan kurung Kurawa lagi di sini contohnya eh colornya adalah red Lalu setelah itu background colornya contohnya Aqua Nah lihat hasilnya berubah ya Nah sebenarnya ini eh bikin objek ya style sama dengan seperti ini saya akan buat di sini misalnya colornya blue lalu back eh ground colornya ini contohnya yellow nah ini sebenarnya kita tambahkan ke p style yang Style ya Nah seperti ini saya save Nah lihat hasilnya berubah Nah jadi ini adalah kalau teman-teman mau mengakses kode javascript ya di dalam jsx jadi teman-teman gunakan si kurung kurawal lalu di sini adalah kodenya ya teman-teman bisa gunakan di bagian teks ya sebagai teks atau sebagai value di atribut seperti ini sekarang kita bahas tentang props ya atau properties react component itu menggunakan props untuk berkomunikasi jadi kalau teman-teman mau mengirimkan data ke komponen itu teman-teman gunakan yang namanya props nah parent komponen atau komponen yang memanggil si komponennya Ya itu bisa mengirimkan informasi ke child component dengan menggunakan props props ini sebenarnya mirip seperti atribut di html elemen nah tapi kita bisa mengirim nilai javascript seperti objek Aray function dan yang lain-lain Nah jadi sebenarnya mirip seperti atribut di html elemen jadi ketika teman-teman Panggil komponennya teman-teman bisa tambahkan atribut-atributnya untuk menambahkan properties ya atau props ya pada komponen kita hanya perlu menambahkan satu parameter objek saja ke dalam SI komponennya jadi saat teman-teman bikin function untuk Komponen itu teman-teman cukup tambahkan satu parameter namanya adalah props ya jadi itu parameter pertamanya sebenarnya namanya bebas mau apa aja itu dia akan menjadi sebagai props jadi semua nanti atribut yang dikirimkan ketika teman-teman Panggil komponennya itu akan disimpan di dalam satu objek ke parameter di function-nya nah parameter props Ya itu namanya eh sori e parameter props ini itu bentuknya adalah javascript object Jadi bukan jadi multi parameter ya Jadi kalau teman-teman nanti kirimkan dua atribut dia akan jadi dua parameter bukan bukan seperti itu jadi semua atribut nya akan dikumpulkan jadi satu objek nanti objeknya dikirim ke function di komponennya nah sehingga teman-teman kalau mau mengakses detail-nya ya teman-teman tinggal gunakan si Parameter props tersebut Oke misalnya ya Misalnya kita akan coba ya kita akan coba modifikasi yang header hello world itu kita tambahkan di sini parameter props nama parameternya bebas ya tapi intinya adalah nanti props-nya itu akan dikirim ke sini ya Nah selanjutnya di sini ini kan adalah objek ya nah misalnya kita nanti akan punya namanya adalah teks misalnya jadi kita mau di sini ambil props ya titik teks ya lalu to upperc misalnya nah jadi teman-teman bisa ambil di props di sini Oke kita akan coba modifikasi ya yang header hello world Oke kita akan modifikasi di sini nah kita akan coba di header hello world ini saya akan tambahkan di sini adalah props ya Nah lalu di sini Saya tidak mau bikin teks lagi di sini nah saya mau misalnya nanti tinggal dikirim Ketika saya panggil header hello world jadi ini saya ambil dari props ya Nah nanti ada atribute texs misalnya seperti ini ya nanti itu uppercase nah seperti ini Oke saya akan coba save Nah kalau kita lihat di sini kosong ya hilang ya Kenapa karena ini error Sebenarnya kalau saya coba inspect ya nah saya akan coba print di bawah kita lihat konsolnya ini harusnya error nah lihat teman-teman ya perhatikan nah ini error ya Nah kenapa error Nah karena dia tidak dapat lihat di sini undefine to uppercase jadi yang teks ini enggak ada kenapa teks ini enggak ada karena saat kita memanggil header hello world itu kita tidak mengirimkan atribut teks-nya ini saya coba perbesar dulu biar jelas nah ya di sini teman-teman bisa lihat error ya oke enggak masalah karena memang itu sudah ekspektasinya bakal error oke nah saat kita menggunakan props itu kebanyakan programmer react itu biasanya menggunakan destructuring ya jadi salah satu yang biasa dilakukan oleh programmer react itu adalah melakukan destructuring parameter pada props-nya nah hal ini untuk mempermudah Ketika nanti membaca ya sehingga kita tahu atributnya nanti apa aja sih yang tersedia yang ada di komponen tersebut Nah karena props ini adalah javaspft object jadi kita bisa menambahkan fitur Seperti contohnya default value-nya pada props-nya kalau teman-teman mau jadi ini mirip seperti javascript object biasanya nah contohnya kita akan modifikasi misalnya ya untuk header Hello world-nya ini kita langsung aja destructuring ya si objeknya jadi nanti harapannya parameter ini nanti adalah objek ya Nah nanti ada atribut teks dan ini default-nya kalau kita lupa mengirimkan atribut teksnya misalnya di sini teksnya sama dengan Ups misalnya ya lupa kasih teks jadi nanti harapannya di sini kita tinggal langsung ambil teksnya aja jadi ini adalah destructuring dari si objeknya jadi kita biasanya banyak programmer react langsung melakukan destructuring biar tahu ya Oh ternyata hello world eh yang header ini dia butuh atribut text Oke kita akan coba jadi di sini dibanding saya gunakan props lalu saya ambil di sini teksnya saya langsung aja di sini ya Jadi kita gunakan destructuring seperti ini jadi pokoknya nanti dia harus ada teks nah misalnya seperti ini jadi di sini saya tinggal panggil teks nah seperti ini nah misalnya di sini saya mau Oh saya mau kasih default misalnya ya di sini misalnya eh Ups lupa kasih eh teks nah misalnya seperti ini Nah Lihat keluar ya di sini Ups lupa kasih teks Nah jadi seperti ini oke nah kalau teman-teman perhatikan ee Berarti di sini tidak ada ee pengiriman atribut ya Ibu teks nanti kita akan coba lihat contohnya Oke jadi pertanyaannya Gimana cara mengirim props-nya untuk mengirim props-nya kita bisa gunakan atribut seperti layaknya di html elemen ya ketika teman-teman memanggil si komponennya jadi contohnya misalnya kita lihat di sini saat kita gunakan header hello world di sini nah teman-teman bisa tambahkan teksnya di sini jadi sesuai dengan nama tadi ya props-nya jadi teks di sini sama dengan hello world misalnya seperti ini nah jadi otomatis nanti dia akan berganti Oke jadi kita bisa di sini oke saya ganti aja teksnya contohnya di sini saya pakai string hello world Oh Sor di sini saya lupa tutup Nah lihat hasilnya dia menjadi hello world jadi dia tidak menggunakan default lagi nah jadi seperti itu ya Oke sekarang kita bahas tentang spread syntax Nah kadang-kadang ya mengirim props dari parent komponen ke child component itu sangat merepotkan kalau terutama misalnya yang child-nya itu banyak sekali sih e ininya ya atributnya ya atribut untuk props-nya nah jikalau kita hanya ingin melakukan yang namanya forward Ya semua properti ke child component ya kita bisa gunakan spread syntax di javascript Nah jadi kita bisa gunakan spad syntax juga jadi contohnya seperti ini Nah kita tahu Misnya di sini ada komponen hello world misalnya nah tapi di sini kita punya props misalnya teks nah saya mau kirim ke hello world itu kan biasanya kita langsung teks sama props titik texs misalnya seperti itu Nah kadang-kadang merepotkan nih ya Karena kita tahu sebenarnya jadi isinya cuma pengin diforward aja Nah kita bisa gunakan yang spread synx seperti ini Oke kita akan coba contohnya misalnya di sini ya di hello world kita sudah punya misalnya ya props misalnya nah object text nah ini adalah hello world misalnya seperti ini nah Biasanya kan kalau kita mau ngirim kita gunakan misalnya tag sama dengan ini berarti jadi javascript object misalnya eh props titik TS nah Biasanya seperti ini ya Nah kita lihat di sini hello world seperti ini nah Biasanya kita lakukan seperti ini nah tapi misalnya gitu ya Nah malas nih kalau ternyata di sini ada misal aja ada 10 atribut kita harus mention satu-satu gitu ya Nah dibanding kita mention satu-satu kita bisa gunakan ee ini ya spread syntax misalnya titik tiga kali lalu di sini props nah selesai lihat hasilnya sama aja nah ini untuk jelas Apakah benar Hello World from eh spread syntax misalnya nah lihat ya Nah dia berubah seperti ini nah jadi teman-teman juga bisa lakukan seperti ini Nah kalau teman-teman di teks editornya ada error seperti ini ini tidak masalah ini adalah eh error dari linter ya Jadi linter kalau teman-teman membuat props itu teman-teman harus dikasih tahu di sini ya Ee ada props validation-nya nah sayangnya di sini contohnya harus pakai tipenya adalah string misalnya seperti ini ya Nah sayangnya kan di sini kita pakainya javascript ya bukan pakai Tab script jadi kalau teman-teman mau teman-teman tinggal eh hilangkan aja yang react prop steps-nya misal saya akan coba hilangkan ya karena kan Kebetulan saya menggunakan e javascript ya Jadi kita copy yang react prop types jadi kita tidak perlu menentukan tipenya n ini karena kan kebetulan bukan javascript ini ya sorry bukan typesript ya Jadi kita buka di Aslin config Nah di sini saya akan tambahkan di bagian rules ya yang paling bawah kita tambahkan rules-nya yang tadi yang react prop types itu kita offkan saja nah selesai jadi seperti itu ya Nah ini sekarang hilang ya nah selesai jadi seperti ini ya kalau teman-teman mau ee melakukan atau menggunakan atau mengirim ya atribut ke komponen jadi kita bisa gunakan props sekarang kita bahas tentang nested component jsx itu mendukung pembuatan nested compponen jadi kalau teman-teman mau membuat komponen terus dalamnya teman-teman pengin tambahkan komponen lagi misalnya nah itu juga didukung di jsx nah hal ini memungkinkan kita bisa membuat komponen yang di dalamnya itu bisa ditambahkan komponen lainnya secara dinamis agar komponen bisa memiliki komponen lain di dalamnya kita bisa menggunakan atribut yang namanya children ya jadi children ini teman-teman bisa gunakan ya children lalu teman-teman tambahkan di dalam props nanti ketika teman-teman tambahkan e dokumen di eh sori maksudnya komponen di dalam komponen itu nanti SEC otomatis komponen di dalamnya itu akan masuk ke properties ya atau props children ini nah misalnya Sekarang kita akan membuat komponen namanya adalah container ya Dan nanti di dalamnya kita akan isikan komponen sebelumnya hello Bu yang sudah kita buat kita akan coba Oke jadi nanti kita akan buat nama fileenya adalah conontainer jsx Nah kita buat di sini sebuah e komponen ya namanya adalah kontainer Nah di sini di props-nya teman-teman tambahkan children seperti ini Jadi ini nanti ketika teman-teman memasukkan eh data ini ya data eh komponen lain maksudnya Nah itu otomatis akan masuk ke dalam children ini Nah di sini teman-teman tinggal Tampilkan contohnya maunya di sini misalnya jadi di sini kita returnkan Div ini H1 programmer zaman now Nah nanti children-nya ada di sini ya dia akan tampilnya di sini Oke kita akan coba langsung praktikkan Oke saya akan buat ya di sini file baru namanya adalah container jsx Nah kita buat export default function namanya adalah container Oke selanjutnya di sini kita akan e returnkan ya Nah contohnya Saya maunya Div di sini lalu di sini H1 programmer zaman now nah lalu di sini saya akan tambahkan footer misalnya nah di dalamnya saya akan tambahkan Eh P misalnya di sini eh 2024 misalnya programmer zaman now nah seperti ini oke di sini ya saya akan tambahkan children jadi saya akan buat di sini props ya Eh children jadi namanya memang harus children ya Nah ini kita tambahkan children seperti ini Oke Nah selanjutnya kita akan coba gunakan yang komponen kontainer tadi jadi di main jsx-nya kita akan ubah di sini saya akan gunakan kontainer Nah jadi ini kita gunakan kontainerkontainer di dalamnya nah semua yang ada di sini itu akan dimasukkan ke atribut children-nya jadi dalam props-nya jadi otomatis ya teman-teman tidak perlu Sebutkan nama childrennya Oke kita akan coba nih jadi di sini saya langsung aja ya di main jsx-nya ini kita ganti saya delete dulu misalnya ya Nah itu hilang ya nah saya akan tambahkan di sini container nah kontainer seperti ini saya save Nah lihat ya dia akan muncul kontainer di tengahnya Di sini kontennya masih kosong saya akan tambahkan di sini adalah hello world ya Nah seperti ini Nah Lihat ya nah jadi seperti ini jadi seperti ini kalau teman-teman mau membuat komponen yang di dalamnya bisa teman-teman tambahkan nested komponennya atau istilahnya adalah childrennya sekarang kita bahas tentang style sampai saat ini kita hanya baru membahas tentang html dan juga javascript di jsx Gimana kalau teman-teman mau menambahkan CSS nah CSS sendiri Sebenarnya bukan bagian dari jsx ya Nah jadi kalau kita ingin membuat style CSS maka kita perlu membuat file CSS terlebih dahulu Nah nanti teman-teman Misalnya kalau udah bikin file CSS teman-teman bisa import ke dalam SI jsx-nya nah atau teman-teman bisa langsung ya bikin atribut style menggunakan kurung kurawal double yang sebelumnya sudah kita Contohkan nah tapi sekarang kita akan cobanya dalam bentuk file CSS ya Nah nanti teman-teman bisa menggunakan style pada jsx ya tidak menggunakan atribut class melainkan namanya adalah CL name Kenapa karena kan kita sudah bahas di awal kelas ini merupakan kata kunci di javascript jadi tidak bisa digunakan makanya nanti namanya berubah menjadi class name Nah kita bisa lihat di sini kalau teman-teman mau ya jadi untuk menambahkan CSS Styles teman-teman gunakannya adalah class name bukan class ya nah jadi seperti itu Oke kita akan coba nih sekarang oke misalnya saya akan buat dulu hello world CSS seperti ini jadi kita pindahkan yang tadi yang sebelumnya kita bikin CSS langsung di dalam jsx-nya saya akan pindahkan ke hello world CSS misalnya di sini Oke kita akan coba langsung praktiikkkan di sini kita buat Hello world. CSS ya Nah kita buat style-nya di sini contohnya title ini colornya eh red misalnya ya Lalu nanti background eh color itu misalnya Aqua lalu content kita tambahkan juga colornya adalah blue lalu background colornya misalnya yellow Oke sudah selesai ya kita sudah buat hello world css-nya Nah sekarang gimana caranya kalau kita mau ambil di jsx-nya nah simpel banget ya teman-teman cukup lakukan import aja jadi import nama css-nya file css-nya maksudnya jadi di sini import file css-nya selesai nanti ketika teman-teman pengin gunakan ya teman-teman tinggal gunakan contohnya di ini class name pakainya Jadi bukan class ya tapi class name sama dengan di sini contohnya title ini misalnya class name adalah content Jadi cukup seperti itu aja Nah kita akan coba modifikasi yang Hello world-nya di sini ya Nah ini berarti style-nya saya akan Hapus dulu ya di sini ini kita hapus Nah berubah lagi ini juga kita hapus style-nya ini kita hapus oke selesai jadi sekarang kita akan import dulu ya Jadi teman-teman tinggal eh import contohnya di sini nah kita akan impimport titik/ hello world CSS selesai Nah sekarang kita tinggal gunakan H1 misalnya class name-nya itu kita gunakan di sini title ya title tadi ah sor ini kurang spasi e kurang tutup maksudnya nah seperti ini ini juga kita tambahkan class name seperti ini nah ini adalah contonten nah selesai Nah jadi seperti ini kalau teman-teman mau memisahkan ya style-nya dalam file CSS Ya nanti tinggal teman-teman import atau teman-teman tinggal gunakan menggunakan class name Jadi bukan class sekarang kita bahas tentang kondisional saat kita membuat halaman web itu sering sekali kita menampilkan tampilan berbeda pada kondisi tertentu ya Jadi biasanya kondisinya beda ya tampil ya juga beda nah Biasanya kita bikin seperti itu Nah hal ini juga bisa dilakukan di jsx Nah kita bisa menambahkan kondisi menggunakan javascript ya dan mengembalikan komponen yang berbeda berdasarkan kondisi yang kita inginkan nah contohnya kita akan membuat halaman to do list ya dan jikalau to do-nya sudah selesai misalnya kita akan coret elemen teksnya Kalau belum selesai tidak akan kita coret jadi kan ada kondisi ya kalau selesai kita coret kalau belum selesai tidak akan kita coret Oke jadi sekarang kita akan bikin dulu ya yang pertama misalnya kita akan bikin eh to do list to do ya Jadi ini untuk Komponen to do-nya Nah Biasanya kita lakukan seperti ini Kita bikin misalnya di sini to do ini misalnya kita gunakan props ya Ada text dan juga ada is completed nanti kita ini tipenya misalnya nanti Bulian nah Biasanya kita cek seperti ini If Ya is completed maka kita returnkan elemennya seperti ini pakai yang delete Ya seperti ini tapi kalau ternyata dia belum komplit ya kita balikkan elemennya misalnya Le lalu teksnya seperti ini nah jadi simpel banget jadi teman-teman tinggal tambahkan ee kode javaspt biasa aja kalau teman-teman memang mau membuat kondisi yang dinamis di komponennya Oke kita akan coba praktiikkkan oke di sini saya akan bikin sebuah folder baru namanya to list ya Oke kita akan buat di sini file-nya adalah to do jsx oke di sini ya berarti kita bikin eksort ee default function to do ya oke di sini kita akan tambahkan props yang pertama adalah teksnya ya Yang nanti ditampilkan lalu di sini is completed nah seperti ini Oke selanjutnya di sini tinggal kita cek kalau is completed ya Nah kita Mau ngapain else-nya Kita mau ngapain seperti itu jadi simpel banget jadi contohnya di sini kalau komit ya kita akan returnkan misalnya eh pakainya Li misalnya ya Lalu nanti kita akan eh delete atau Strike ya Eh sor ini tinggal kita hapus Nah ini kita tampilkan misalnya teksnya nah seperti ini Nah kalau ternyata dia belum komete tinggal kita returnkan nah ini delete-nya kita hapus ya Jadi tinggal teks aja nah seperti ini jadi kita bisa lakukan seperti ini Oke tadi kita buat yang komponen toun-ya Nah sekarang kita akan bikin komponen to list-nya Nah di sini kita akan eh buat ya nama file-ya adalah to list ya lalu kita buat di sini isinya cuma Eh ini ya E elemen e Ul lalu kita Panggil to do-ya jadi di sini contohnya to do yang pertama is completed-nya true misalnya Belajar apa Belajar apa Belajar apa dan lain-lain J teman-teman silakan tambahkan ya e beberapa komponen to do di sini Oke kita akan langsung praktiikkkan Oke kita buat di sini file baru namanya adalah Tod list ya jsx oke di sini kita buat eh export function Oh sorry default lalu di sini namanya to list nah oke nah seperti biasa kalau teman-teman mau eh tambahkan ini ya kalau teman-teman tambahkan props silakan tambahkan di sini kita enggak pakai props dulu ya di sini kita langsung return nah Nah di sini Ul misalnya nah lalu di sini kita pakai yang Tou ya Nah kita ambil yang Tou jangan lupa diimport lalu di sini is completed-nya misalnya true ya pakai javascript lalu teks-nya nah ini langsung aja di sini teks-nya nah seperti ini Oke teksnya misalnya di sini learn html ya lalu learn CSS learn javascript ya lalu di sini learn react JS nah ini kita set false nah selesai Nah sekarang kita sudah buat ya yang komponen to list-nya Nah sekarang kita akan coba E bikin ininya ya kode untuk main-nya Oke untuk main-nya kurang lebih seperti ini ya Nah kita gunakan di sini misalnya kontainer lalu di sini ada Hello world yang tadi lalu kita tambahkan to list kalau teman-teman mau tambahkan ini kita berarti masih pakai file yang sama ya file yang yang Hello world kalau teman-teman mau bikin file yang berbeda silakan aja kita akan pakai file yang sama dulu ya agar lebih cepat aja jadi di sini di main di sini ya Nah di sini saya akan tambahkan to list nah seperti ini saya save Nah ini Lihat di bawah sini sudah ada nih Nah lihat ya Ini saya tutup dulu Nah lihat di sini learn html-nya dicoret ya Karena Dia kebetulan nilai eh is completed-nya adalah true ini juga sama dicoret ini juga sama dicoret dan ini ya ini tidak dicoret Nah jadi seperti itu Jadi teman-teman bisa bikin ya komponennya to do dan juga to do list jadi teman-teman bisa tambahkan kondisi seperti ini juga oke kita bahas sekarang N komponen pada kasus tertentu mungkin ada kondisi di mana kita ingin mengembalikan komponen atau tidak mengembalikan komponen kalau yang tadi kan kita kembalikan komponen ya dua-duanya ya kalau komplit kita kembalikan komponen kalau tidak juga kita kembalikan komponen ya Nah kadang-kadang kita misalnya Oh saya maunya kalau true misalnya balikan komponen kalau fse saya enggak mau balikan apa-apa Nah bisa enggak seperti ini ya Nah kita bisa buat namanya null komponen ya jadi kita bisa mengembalikan dengan N0 jadi kita tinggal balikan N0 aja seperti itu jadi simpel banget jadi secara otomatis kalau N0 itu berarti yang komponen tidak ada isinya sama sekali oke misalnya gitu ya kita akan bikin eh satu Flag baru namanya adalah is deleted ya Jadi ini sudah dihapus atau belum misalnya nah kalau misalnya dia sudah dihapus Kita akan returnkan N0 artinya tidak ada data sama sekali ya tidak ada komponen isinya sama sekali Nah kalau tidak ya baru kita cek seperti yang tadi Oke kita akan coba tambahkan jadi misalnya di sini saya akan tambahkan yang baru di sini is deleted misalnya ya Nah kita cek dulu kalau is deleted misalnya kita returnkan N0 nah nah seperti ini Else ya kita balikkan yang seperti ini nah teman-teman juga bisa lakukan seperti ini Nah tapi di sini misalnya saya mau kasih default ya eah jadi contohnya di sini false Nah biar nanti e enggak wajib memasukkan is delated-nya Nah jadi sekarang kalau teman-teman mau misalnya jadi teman-teman misalnya mau e tambahkan is delated-nya tinggal teman-teman tambahkan is deleted contohnya misalnya di to list di sini saya akan tambahkan yang E ini misalnya is deled true ya Nah seperti ini saya coba save Nah lihat yang learn html-nya dia hilang dari sini nah jadi ketika ada yang is delednya true otomatis dia hilang dari sini nah jadi teman-teman bisa gunakan yang N0 komponen sekarang kita bahas kondisi kalau kita menggunakan ternary operator nah kadang adang pada kasus yang lebih sederhana kita bisa menggunakan yang namanya ternaryy operator di javascript ya Jadi teman-teman bisa juga gunakan ternary operator entah itu di javascript atau juga di jsx Nah kita bisa lakukan Contohnya seperti ini Jadi sebelumnya misalnya kan kita menggunakan if Else ya Nah kalau misalnya contohnya sudah dielete kita returnkan NL tapi kalau belum didelete nah Biar lebih simpel kita ceknya menggunakan ternary operator contohnya jadi kita gunakan kurungk awal is completed ya lalu kita tambahkan tanda tanya ya ini ternary operator kalau dia benar berarti kita tambahkan elemennya yang ini kalau dia salah titik du kita tambahkan yang teks seperti ini nah jadi teman-teman bisa lakukan seperti itu juga jadi ini lebih simpel ya dibandingkan kita menggunakan yang if else jadi teman-teman bisa gunakan yang ternary operator saja Oke kita akan coba Jadi yang tudunya ini ya ini lumayan panjang nih kita gunakan else misalnya Oke jadi kita cek ya ya return contohnya di sini eh Le di sini kita coba is completed kalau dia complete Nah kita pakainya delete contohnya teks Ya seperti ini Nah kalau sorryi eh teks seperti ini ya Nah kalau misalnya tidak ya kita pakainya yang texs nah seperti ini Nah Lihat Saya save Oh ini bukan Dev ya tapi Delete nah seperti ini Nah lihat ya hasilnya sama aja seperti ini Oke selanjutnya kita bahas tentang logical n nah di beberapa kasus ya yang lebih sederhana lagi nah dibanding if atau juga ternary operator kita bisa menggunakan logical n ya jadi kadang di jsx sering memanfaatkan logical n di javascript misalnya kalau kondisi terpenuhi maka akan menampilkan apa jikalau tidak maka ya menampilkannya apa misalnya seperti itu ya Nah kita bisa lakukan seperti ini nah jadi contohnya misalnya saya mau tambahkan tanda seperti ini nih ya ya Flag e checklist misalnya kalau tapi dia is complete jadi kita bisa gunakan seperti ini ya yang logical n is completed and tanda tanda ceklist seperti ini artinya kalau ini nilainya true ya maka ini akan di ee ini ya ditampilkan kalau nilainya false ya ini tidak akan ditampilkan Nah kita akan coba misalnya ya tambahkan jadi di sini misalnya kita tidak menggunakan delete lagi nah kalau saya gunakan ini ee teks misalnya ya Nah di sini Oh ya sor ini bukan teks ya Jadi maksudnya ini teks di sini Nah ya knya seperti ini tapi saya pengin yang sudah selesai saya mau Tampilkan tanda ceklis misalnya ya Nah seperti itu ya di sini saya bisa gunakan is completed misalnya ya nn nah teman-teman tinggal tambahkan di sini ya Nah di sini kita tambahkan contohnya saya tambahkan ee karakter misal aja ee ini ya cek list nah ceklist seperti ini Oh sori cek nah saya tambahkan karakter nah seperti ini ya nah saya coba save Nah lihat hasilnya sekarang kalau yang sudah is complete maka dia ada ceklis hijau seperti ini Nah teman-teman bisa lakukan seperti ini juga jadi Ini adalah cara menambahkan conditional di jsx ya Jadi ada banyak caranya bisa pakai if else bisa pakai ternary operator atau logical n seperti ini sekarang kita bahas tentang collection component kita pasti akan sering menampilkan komponen yang sama ya berkali-kali Sesuai dengan koleksi data misalnya nah jsx sendiri itu tidak memiliki fitur yang namanya perulangan jadi tidak ada tuh perulangan di dalam jsx Nah untuk menampilkan multiple komponen ya sama seperti contohnya kondisional kita akan memanfaatkan kode javascript biasanya Nah kita bisa menggunakan javascript Aray biasanya ya untuk mengubah data Aray menjadi komponen misalnya teman-teman bisa menggunakan metod Map ya pada Aray nah misalnya Sekarang kita akan Coba ubah data toul list yang sebelumnya kita buat ya kita kan Sebelumnya kan lakukan satu persatu ya tudulisnya Nah kita akan Ubah menjadi Aray nanti kita akan coba tampilkan ya dalam bentuk komponen ya jadi setiap detail aray-nya Oke jadi caranya misalnya jadi teman-teman bisa lakukan seperti ini jadi kita buat dulu datanya misalnya text misalnya E learn html is completed-nya true dan lain-lain misalnya seperti ini nah lalu kita akan konversi ya menjadi contohnya tous di sini caranya kita gunakan map misalnya Sori data titik map lalu di sini to do-nya kita konversi menjadi komponen to do nah lalu di kita masukkan spread operator seperti ini ya agar semua data ini kita masukkan ke sini Nah selanjutnya teman-teman tinggal di sini returnkan Ul lalu di sini tous tous ini kan e ini ya Aray dari elemen jadi si jsx sudah ngerti kalau dia Aray dari elemen sor komponen maksudnya Nah otomatis dia akan ditampilkan seperti itu Oke kita akan coba sekarang ya Jadi kita ganti nih yang to list tadi ya ini kita ganti dibanding satu-satu kita akan buat di sini cons to eh sor data misalnya sama dengan ini array ya of object teks misalnya di sini learn atml lalu di sini is eh saya pakainya ini aja nah seperti ini is completed ini misalnya true ya Nah seperti ini ini saya copy paste CSS JavaScript react JS Misalnya ini false ya nah selesai Nah jadi yang kita lakukan kita akan konversi ya Dari sini Dari data ini ini menjadi contohnya saya konversi menjadi Eh tous misalnya ya Nah ini kita tinggal gunakan data titik Map ya Nah lalu di sini toudun-ya kita gunakan errow function ini kita tinggal langsung konversi menjadi to do nah seperti ini Nah ini kan teman-teman bisa lakukan e teksnya misalnya to do titik Tex gitu ya lalu is completed to do titik is completed nah tapi kan lama ya kebanyakan ya apalagi kalau nanti ada puluhan eh props-nya jadi saya gunakan spread operator aja Tou nah seperti ini ya selesai Nah sekarang saya tinggal Tampilkan di sini tous-nya tous eh sorryi langsung pakai javascript tous seperti ini oke nah seperti ini ya Nah kalau teman-teman perhatikan di sini ada error ya errornya apa kita cek di sini Oh sorryi kita lupa di sini ya Eh returnkan nah karena Kebetulan saya pakai kurung kurawal di sini ini harusnya ee langsung seperti ini Nah ya sukses ya nah oke atau e kalau di contoh Saya di sini enggak pakai kurung kurawal ya di sini saya pakai tanda ee kurung buka kurung tutup langsung jadi teman-teman juga Bisa langsung seperti ini jadi Pokoknya dia harus returnkan nah seperti ini ya ya teman-teman bisa lakukan seperti ini juga selesai Nah lihat hasilnya sama aja seperti tadi Nah jadi seperti ini jadi tidak ada yang namanya Collection of eh componen ya sebenarnya Jadi seakan-akan sebenarnya teman-teman cukup bikin Aray isinya adalah dari komponen Maka hasilnya teman-teman tinggal Tampilkan dan lihat hasilnya seperti ini Oke sekarang kita bahas tentang komponen key jikalau misalnya kita perhatikan di tek editor mungkin kita akan melihat pesan peringatan seperti ini missing key props for Element in itator jadi kalau kita lihat di sini ini ada tanda merah kalau saya coba ke sini ya Nah di sini ada es link-nya ya Jadi ada linternya di sini bilang missing key prop e for Element in iterator eh react jsx key Nah kenapa gitu ya Nah kita bahas jadi saat kita membuat collection componen jadi kita bikin Aray of component tiap komponen itu diperlukan Id Id ini adalah unique ya dan dia bisa string atau juga number nah tapi untuk menentukan id-nya itu kita tentukan menggunakan atribut key Nah kenapa pertanyaannya kok butuh componen key atau Kenapa butuh ID hal ini agar react bisa mengenali komponen ketika dia berubah seperti contohnya posisinya teman-teman ubah ee dari posisi di atas ke bawah misalnya atau teman-teman hapus atau teman-teman tambahkan ya ke dalam collection jadi react-nya itu bisa mengerti ya Oh Ternyata ada perubahan komponen dari mana ya perubahannya dari qy-nya Kalau tidak ada Q maka react akan bingung ya ketika ada perubahan seperti tadi Nah makanya sebenarnya kalau teman-teman perhatikan masih tetap bisa ditampilkan Cuma tidak direkomendasikan rekomendasinya adalah kalau teman-teman bikin of eh elemen komonen seperti ini itu teman-teman gunakan yang key ya Nah biasanya komponen ke akan diambil dari datanya ya sehingga lebih konsisten aja Jadi jangan terlalu random ya Jadi teman-teman bisa ambil dari datanya Nah kebetulan ya sebelumnya kita tidak tambahkan ID dari datanya teman-teman bisa tambahkan contohnya di sini datanya kita tambahkan ID ya 01 2 3 misalnya Nah nanti ya di sini teman-teman e tambahkan to do lalu di sini tambahkan qy Nah teman-teman bisa tambahkan seperti itu Oke jadi teman-teman bisa tambahkan di sini saya tambahkan ID dulu misalnya 0 ya lalu saya tambahkan di sini 1 Lalu 2 dan ini 3 misalnya nah biasanya di sini kita akan tambahkan Q sama Nah di sini to do misalnya ID nah seperti ini jadi Biasanya kita lakukan seperti ini nah Biasanya sih kalau teman-teman pakai jsx itu jarang banget orang akan bikin variabel dulu nanti baru variabelnya tambahkan di sini biasanya kalau butuh collection seperti ini biasanya akan langsung dilakukan di dalam SI jsx-nya jadi contohnya Biasanya kita lakukan langsung seperti ini ya Jadi kita tidak membuat variabel to do tapi kita langsung dari datanya lalu tinggal map seperti ini nah jadi nanti dia hasilnyaah ini auto generate ya saya tidak akan pakai auto generate dulu jadi Ini Tou misalnya seperti ini nah Biasanya kita langsung pakai kurung buka kurung tutup ya jangan pakai kurung kurawal Nah di sini Tou nah Q sama dengan Tou titik id ya lalu di sini kita tambahkan spread operator Tou nah biasanya Kebanyakan orang akan membuatnya seperti ini nah jadi langsung di dalam SI jsx-nya jadi jarang dibuat variabelnya nah hasilnya Kalau teman perhatikan sama ya Jadi kita coba tambahkan misalnya nya di sini ups sorry copy paste Ini contohnya 4 learn react JS router Nah lihat hasilnya sama aja Nah jadi seperti ini ini adalah Collection of component sekarang kita bahas tentang pure component dalam pemrograman ya atau ya istilahnya itu ketika kita membuat kode program kita mengenal namanya adalah pure function Nah teman-teman bisa lihat detailnya di sini ya untuk pure function ini jadi kalau teman-teman pengin tahu detail ini di sini adalah view function Oke kita bahas secara sederhana aja sebuah function kita sebut sebagai yang namanya view function itu kalau memenuhi dua kriteria berikut yang pertama function akan mengembalikan nilai yang sama untuk nilai parameter yang sama jadi kalau saya kirim parameternya a balikannya a misalnya ya Jadi tidak pernah saya ee kasih a balikannya misalnya bisa A bisa B bisa C berubah-rubah terus misalnya jadi dia akan selalu konsisten kalau pure function itu jadi kalau saya kirimnya a misalnya dia jawabannya harus selalu contohnya kalau dia b maka selalu B terus gitu ya tidak akan berubah kecuali parameternya berubah nah Selain itu yang kedua function tidak memiliki efek samping jadi tidak ada perubahan pada variabel non lokal ya atau variabel di luar dari si function-nya contohnya Ketika teman-teman pak Panggil function-nya ternyata ada variabel lain yang berubah ketika teman-teman panggil lagi berubah lagi nah itu berarti dia bukan pure function nah function yang baik biasanya adalah pure function Jadi biasanya dia akan mengikuti dua kaidah ini ya jadi dia akan mengembalikan nilai yang selalu konsisten dengan parameter yang sama dan dia tidak memiliki efek samping atau Side Effect ya nah jadi ini adalah pure function ini contoh adalah viure function jadi contohnya di sini function kan dobel Lalu ada parameternya 6 contohnya parameternya saya masukin dua balikannya akan menjadi 4 saya masukin dua terus maka dia balikannya selalu empat terus dan dia tidak pernah mengubah variabel di luar dari si function double ini nah ini adalah function yang bukan pure function contohnya incrementen Ketika saya panggil incremen pertama kali ya tanpa parameter balikannya adalah 1 Ketika saya panggil inkremen lagi balikannya adalah du berarti dia berubah ya padahal saya panggil inkrem parameternya kosong incrementen lagi parameternya kosong tapi dia returnnya selalu berubah Nah itu tidak pure function nah Selain itu ketika saya panggil dia mengubah si variabel count ini variabel ini kan di luar function ini nah jadi yang di bawah ini ini bukanlah pure function Jadi teman-teman sekarang ngerti ya perbedaan pure function sama yang bukan pure function oke sekarang pertanyaannya Apa hubungannya nya dengan react ya atau komponen di rea react itu mengasumsikan bahwa setiap komponen yang kita buat itu halus e haruslah pure function jadi haruslah pure function Nah jadi memang idealnya saat teman-teman bikin komponen itu pastikan teman-teman bikin yang pure function juga nah ini berarti bahwa react komponen yang kita buat harus selalu mengembalikan jsx yang sama dengan input yang sama Jadi jangan sampai dia berubah-ubah terus C teman-teman inputnya satu kok balikannya kadang satu kadang dua kadang 3 kadang 4 dan seterusnya jadi bisa berubah-rubah Nah itu tidak direkomendasikan ya jadi idealnya kalau dikirim data a ya balikannya harus a terus misalnya seperti itu Nah walaupun sebenarnya kita bisa saja membuat react komponen yang tidak pure gitu ya tapi sangat tidak disarankan karena nanti setiap pemanggilan komponen ya dengan input yang sama bisa menghasilkan nilai komponen yang tidak konsisten Nah kita akan coba membuat contoh react komponen yang tidak pure contohnya ya Nah kita akan coba nih misalnya di sini saya bikin counter ya jadi di sini counter nol ya nah saya akan bikin contohnya di sini kita bikin nanti eh foldernya tabel row jsx lalu di sini kita bikin row nah lalu di sini kita tambahkan counternya plus plus ya lalu kita akan tambahkan row-nya di sini ini counternya ini teksnya Nah kita akan coba misalnya seperti ini Oke saya akan buat di sini namanya adalah table ya Nah seperti ini nah lalu di sini saya akan tambahkan row jsx ya Oke kita akan bikin dulu di sini eh namanya adalah ini ya namanya adalah eh counter sama dengan 0 lalu kita bikin export default function row lalu di sini kita tambahkan props-nya text Oke pertama kita counternya plus plus dulu dinaikkan lalu kita returnkan contohnya di sini TR e TD counternya berapa TD lagi Eh teksnya apa selesai Nah selanjutnya kita akan buat ya tabel ya komponennya lalu kita Panggil di sini misalnya table border 1 misalnya lalu di sini ada t body lalu row teksnya 1 2 dan 3 Nah kita akan buat Oke saya buat di sini ya berarti kita akan buat dulu eh table.k jsx Nah kita akan import row eh from row ya Nah seperti ini lalu kita akan export default function ini namanya adalah table Oke kita akan returnkan table di sini eh sorry border bordernya contohnya di sini sat lalu di sini t body oke lalu saya akan Panggil yang row ya lalu teksnya adalah sat nah seperti ini Lalu 2 dan 3 Nah selanjutnya adalah ya Nah kita akan coba misalnya eh Tampilkan nih saya akan gunakan yang Hello tadi saya Tampilkan di sini aja saya akan Tampilkan di sini table save Nah Lihat Kalau teman perhatikan loh kok ini beda ya 2 4 6 loh satunya mana gitu ya Nah ini saya refresh lagi saya refresh terus nah dia 2 4 6 nah padahal kan harapan saya harusnya counter pertama itu adalah 1 Lalu 2 Lalu 3 nah sebenarnya kok ini kok dobel-dobel kayak gini ya Nah ini sebenarnya bawaan dari ini kalauan perhatikan kita Sebelum nya menggunakan strick mode jadi ketika kita melakukan strick mode jadi si react itu mencoba melakukan ee istilahnya itu render tampilan si komponen itu dua kali makanya dia naiknya dua kali terus nah nah karena komponen kita yang kita buat itu dia ada side effectfeknya jadi efek sampingnya ketika dipanggil lalu dia akan mengincrementen yang counter tadi jadi ketika dua kali dipanggil maka dia naik dua kali Contohnya seperti ini ya satu keedua 3 keemp 5 keen 6 nah seperti ini Padahal plan kita harapannya adalah naiknya satu-satu Nah kalau kita bikin komponen seperti ini memang ini tidak direkomendasikan karena ini ada side e-nya ya atau ada efek sampingnya keelar variabel ini dan ini memang tidak direkomendasikan Makanya teman-teman jangan berharap datanya akan konsisten tampilannya karena dia akan selalu berubah tiap pemanggilan padahal manggilnya sama ya contohnya di sini satu satu gitu ya Nah seperti ini Nah tapi dia berubah gitu ya Nah seperti ini nah lantas Bagaimana caranya ya komponen row tadi dan juga tabel menjadi pure komonen Nah kita harus menghapus efek samping atau Side Effect dari komponen tersebut contohnya kita bisa pindahkan variabel counter menjadi lokal variabel di tabel ya lalu kita gunakan props sebagai counternya jadi kita kirimkan e si nomor counternya itu sebagai props di row Nah sekarang kita akan Coba ubah ya dari yang tadi ya yang bukan pure komponen kita akan Ubah menjadi pure komponen Oke contohnya yang rose-nya yang id-nya dibanding kita pakai counter saya akan tambahkan sebagai props Jadi nanti dia tampilnya di sini Oke kita akan coba yang R ini ini berarti kita tambahkan ID ya jadi di sini kita hapus counternya ini kita gunakan ID nah selesai ya Nah selanjutnya kita akan buat ya Yang nya itu sebagai di sini ya jadi di dalam variabel ee atau data di dalam SI tabel di sini contohnya di sini ID 1 id 2 ID 3 seperti ini jadi dengan seperti itu tampilannya bakal selalu sama jadi di sini kita tambahkan ee ID satu misalnya ya ini dua ini tig nah saya save Nah lihat dia tampilannya lebih konsisten jadi kalau saya buatnya dua kali id-nya seperti ini Nah lihat dia akan tetap konsisten selalu keluar ID 1 1 1 seperti ini nah ini adalah pure komponen jadi tidak akan berubah-rubah ya yang tidak terprediksi jadi kita bisa prediksi oh nanti itu kolomnya ada ID dan juga e satu seperti ini jadi hasilnya akan seperti ini Oke jadi pertanyaannya Apakah selalu kita harus bikin yang pure compenent idealnya itu memang iya jadiisa mungkin teman-teman buat yang pure komponen nah tapi pertanyaannya gimana kalau kita memang pengin bikin kode yang ada efek sampingnya contohnya mengubah data dan lain-lain nah pertanyaannya Di manakah kita bisa melakukan site eek ya atau efek samping nah react sendiri itu menyediakan tempat khusus kalau kita ingin membuat komponen yang bisa menghasilkan efek samping nah efek samping dari komponen biasanya ditempatkan di bagian yang namanya event handler event handler yaitu adalah aksi yang terjadi ketika kita berinteraksi dengan komponennya contohnya teman-teman ngeklik tombol gitu ya Eh ngubah input dan lain-lain Nah itu bagiannya adalah event handler nah atau ketika misalnya komponen tergantung dengan eksternal system misalnya api gitu ya maka react juga menyediakan yang namanya function eh function ya ee use effect nanti kita bahas Lebih Detail nah semua ini ya antara event handler use Effect dan lain-lain nanti kita akan coba bahas di materi masing-masing sekarang kita bahas tentang event handler seperti yang kita sudah tahu ya kalau di html elemen kita bisa menambahkan event handler nah sama juga dengan di rea komponen kita bisa menambahkan event handler pada elemen-elemen yang ada di reak komponen ini ada banyak sekali jenis sient handler yang bisa kita tambahkan Nah kita bisa lihat ya di halaman detail dari referensi rea komponennya teman-teman bisa lihat di sini ya Ya di sini ada banyak yang namanya event handler ya Nah kita bisa lihat di sini ada contohnya focus event ya Ada input event dan lain-lain nah ini simpelnya mirip seperti event yang ada di html sebenarnya nah contohnya kita lihat eh ini ya input event misalnya ya Nah di sini jadi ada input event misalnya on before input misalnya nya ya Ada juga yang keyboard event on key down on key up misalnya ada juga eh Mouse mungkin ya Mouse event Contohnya seperti ini on Click ya on Mouse enter on e on Mouse off dan lain-lain jadi ini adalah event handler Nah jadi sebenarnya hampir semua event handler di sini ini semuanya yang ada di html e event handler Jadi sebenarnya sama aja Cuma beredanya mungkin cuma penulisannya ya jadi penulisan nama contoh Contohnya seperti ini fokus nah biasanya kan kita on apa gitu ya Nah kita pakainya seperti ini on focus contohnya on blur seperti ini Oke sekarang pertanyaannya Gimana caranya kalau kita mau menambah event handler Nah untuk menambah event handler Biasanya kita akan tambahkan function sebagai handlernya Nah bisa dalam bentuk Anonymous function arrow function atau teman-teman mau bikin function terlebih dahulu di dalam scope komponennya itu juga boleh nah nama function kalau teman-teman mau bikin dalam bentuk function terpisah misalnya ya untuk handler biasanya diawali dengan nama handle jadi di depannya ada handle lalu diikuti dengan jenis eventnya biasanya ya tapi sebenarnya bebas aja tapi ini kebiasaan di react contohnya misalnya handle Click jadi kita tahu kalau ini untuk handle Click Lalu ada handle Mouse enter misalnya dan lain-lain Jadi biasanya depannya ada handle-nya belakangnya ada event-nya apa nah Nah sekarang kita akan coba ya membuat komponen namanya adalah alert button Oke kita akan coba di sini contohnya kita akan bikin nanti foldernya button lalu di sini alert button Nah kita akan bikin komponen di sini alert button lalu di sini kita bikin sebuah handler namanya adalah handle clikck lu di sini keluar alert button Click misalnya seperti ini Nah di sini teman-teman bisa cukup tambahkan contohnya button l di sini on cikck ya Nah kita sebutkan ini adalah function-nya jadi di sini onclick di sini function-nya adalah handle Click Jadi nanti dia akan manggil si function ini jadi simpel banget kalau teman-teman mau menambahkan event handler Oke kita akan coba Oke saya akan coba buat di sini button ya nama foldernya lalu kita akan buat alert button jsx Oke export default function alert button lalu di sini teksnya apa ya oke Oke kita akan bikin dulu function e handle Click ya Nah seperti itu lalu contohnya di sini alert aja button klik ya nah selesai lalu kita akan returnkan di sini button misalnya lalu di sini teksnya nah ini saya akan tambahkan on Kik ya Nah ini yang handle kliknya nah selesai Nah jadi teman-teman bisa bikin seperti ini Oke kita akan coba tambahkan di main yang Hello world Ya saya akan tambahkan di sini misalnya E alert button misalnya text Eh ini saya akan [Musik] tambahkan klik me misalnya nah selesai nah ini ada tombolnya clikck me ya Saya klik nah dia keluar ya button klik nah seperti ini nah jadi simpel banget ya kalau teman-teman mau menambahkan event handler cukup tambahkan di sini on apa ya event-nya lalu teman-teman Sebutkan function Mana yang mau dipanggil Oke misalnya di sini kalau teman-teman eh salah satu keuntungannya misalnya teman-teman membuat function e event hander di dalam komponen adalah kita bisa membaca props yang digunakan oleh komponen tersebut jadi kan sebelumnya mungkin teman-teman bertanya ya Ee gimana kalau misalnya saya mau bikin function-nya di luar gitu ya contohnya function ini di luar di sini nih Nah sebenarnya bisa aja cuma problemnya kalau teman-teman di sini kalau teman-teman pengin baca props yang ada di sini sayangnya enggak bisa ya Nah kalau kita masukkan di dalam sini nah itu kalau teman-teman mau baca props yang ada di sini itu bisa contohnya misalnya ya kita akan coba tambahkan di sini e message ya props-nya message lalu kita baca di sini nah teman-teman bisa lakukan seperti itu Jadi kita bisa baca nih di sini misalnya message ya Nah lalu di sini kita kita ganti ini jadi message nah selesai ya Nah kita akan coba yang ini kita tambahkan message-nya contohnya you Click me misalnya nah seperti ini kita coba ya klik nah keluar ya you Click me seperti ini nah jadi itu keuntungannya ya kalau teman-teman bikin eh function-nya langsung di dalam SI komponennya Oke seperti yang di materi props dibahas props itu sebenarnya adalah javascript object Nah kita tahu bahwa javascript object itu bisa memiliki atribut dengan tipe function sebenarnya tipe apapun bisa ya Nah Oleh karena itu kita juga bisa membuat event handler di props Kalau teman-teman mau ya Nah saat membuat atribut di props-nya nanti berisi event handlernya biasanya nama atributnya akan diawali dengan on contohnya on smash on hit dan lain-lain nah misal aja gitu ya Yang sebelumnya Nah kita akan bikin lagi misalnya yang baru ya Ee namanya adalah my button ya Nah di sini ada teks-nya lalu di sini ada on smash on Smash itu misalnya nanti event yang akan dieksekusi kalau button-nya diklik misalnya jadi button-nya onclick sama dengan dia akan manggil yang on Smash di sini nah jadi nanti function-nya itu tidak perlu dibikin di sini nanti dari luar ya si parent yang memanggil my button itu bisa bikin function handler sendiri nah itu juga bisa kita lakukan jadi teman-teman juga bisa menambahkan function ya di dalam SI props Oke kita akan coba Oke misalnya saya akan bikin berarti komponen baru e alert button saya akan buat copy paste menjadi e my button ya Nah seperti ini Nah selanjutnya kita akan coba di sini e ganti ya jadi di sini pakainya adalah on Smash nah ini kita hapus Nah berarti ini on ccknya adalah on Smash nah selesai seperti ini Oke lantas Gimana caranya jadi caranya contohnya ketika kita Panggil my button teks-nya apa lalu on Smash teman-teman bisa di sini kirimkan function-nya apa atau di sini contohnya pakai yang eh arrow function seperti ini ini juga bisa Oke kita akan coba ya jadi misalnya di main di sini saya akan coba tambahkan di sini ya jadi kita akan tambahkan namanya my oh tadi namanya apa ya belum kita ganti ya my button sorry ini my button nah save Oke ini my button ya lalu teksnya contohnya Smash me misalnya on Smash Nah kita bikin di sini errow function aja langsung alert misalnya nya you Smash me Nah seperti ini oke nah Ini ada tombol Smash me Ya saya akan Coba klik Nah Lihat keluar Smash me seperti ini nah jadi ini adalah event handler jadi teman-teman bisa baca di dokumentasi tadi ya ada event handler apa aja harusnya semua yang ada di html juga di-support ya sama si jsx ini Nah teman-teman tinggal tambahkan di sini entah itu function ya nama function-nya atau bikin langsung seperti ini ya itu juga teman-teman bisa lakukan sekarang kita bahas tentang event object saat kita membuat event handler function kita bisa menambahkan event object ya sebagai parameter di function-nya nah react event object itu sebenarnya compatible dengan standar e Dom ya dari event object jadi teman-teman perhatikan di sini salat teman-teman Nanti bikin eh event handler contohnya oncick dan lain-lain itu teman-teman bisa tambahkan parameter e ya di sini contohnya E atau bebas ya nama parameternya ini adalah react event object nah teman-teman enggak perlu bingung apa itu react event object sebenarnya react event object itu sebenarnya ya hampir mirip dengan event eh objeknya dari si eh Dom ya atau dokumen object model Nah jadi teman-teman enggak perlu khawatir karena dia hampir mirip dengan seperti ini jadi dengan yang event yang bawaan dari ini ya Nah dari dokumen object model jadi Sama aja seperti yang e ini seperti yang di html Biasanya jadi contohnya ketika di alert button misalnya Ketika saya pakai yang handle Click teman-teman bisa tambahkan e di sini ya ini sebagai event eh ininya event objectnya kalau teman-teman coba print ya Nanti dia keluar ini adalah event objectnya Nah kita akan coba nih oke contohnya yang alert button saya akan tambahkan di sini e misalnya jadi saya akan consol info misalnya E ya nah saya akan coba eh inspect dulu ya biar kelihatan nanti di konsolnya ini saya Coba refresh nah saya klik Nah Lihat ini ya syntetic best event nah ini adalah eventnya Jadi kalau teman-teman pengin dapetin Oh elemennya ya sama aja kayak yang event biasa tinggal tambahkan target misalnya seperti ini nah saya coba klik Oke gitu ya Nah ini Sebenarnya dia dapatin si button-nya Nah jadi seperti ini Jadi ini adalah event object-nya jadi sama aja ya dengan yang eh di html biasa sekarang kita bahas tentang event propagation ya ya kita bahas tentang event propagation ini Oke jadi event di rea compponen itu akan selalu disebarkan ke komponen yang ada di atasnya ya atau istilahnya adalah event propagation nah misalnya ya kita memiliki elemen Div misalnya nya ya Nah lalu kita tambahkan event onclick di dalam div-nya misal saja ya lalu di dalamnya kita memiliki button ya dengan event onclick juga di dalam div-nya Nah ketika button itu diklik maka on cck di button itu akan dipicu dan selanjutnya oncck di Div juga akan dipicu lagi karena dia ada di dalam SI div-nya jadi seakan-akan ketika kita mengklik tombolnya div-nya juga seakan-akan diklik juga nah ini namanya adalah event propagation nah kadang-kadang mungkin kita tidak ingin hal ini terjadi ya makanya kita bisa hentikan proses event propagation-nya itu menggunakan metode yang namanya stop propagation nah sebenarnya ini tuh bukan cuma bagian dari react Sebenarnya ya Jadi ini juga bagian dari web biasanya ya Jadi ada ada yang namanya stop propagation jadi teman-teman sama aja ya jadi ketika misalnya Oh event-nya dirigger ke elemen di atasnya Nah kita mau stop misalnya nah teman-teman gunakan stop propagation aja di event object-nya jadi simpel sekali oke misalnya ya kita akan bikin sebuah elemen yang namanya toolbar nah toolbar ini misalnya ada Div lalu dia ada on Click lalu di sini ada button yang first misalnya ya Ini juga ada oncilick Lalu ada button yang second dia oncilick Nah kalau kita klik yang second maka oncilick ini akan dieksekusi ya lalu dia akan men-rigger oncilick juga yang ada di Div di sini nah misalnya kita enggak mau hal itu terjadi kalau misalnya yang tombol nya aja yang diklik ya udah tombolnya aja yang div-nya jangan lagi ke Trigger misalnya nah itu kita harus stop propagation-nya kita akan coba dulu ya Oke saya akan buat di sini ya di button ya di di folder button yaitu toolb ya jsx Oke kita akan buat export default misalnya function toolbar ya lalu kita akan returnkan misalnya Div ya Nah lalu di sini button ini ini first misalnya lalu button lagi second Oke selanjutnya di sini ada oncick ya Nah kita akan coba kirim lewat props ya di sini nanti oncck Nah nanti kita akan kirim yang dari oncick ya lu di sini juga misalnya ada on C oncick lalu di sini juga ada oncick Ini dari on juga nah misal seperti ini Nah sekarang kita akan coba tambahkan n ya ya Jadi kita akan tambahkan ke contohnya yang Hello world Man saya akan tambahkan di paling bawah itu toolbar nah ketika on Cik nah saya mau misalnya stop propagation-nya Nah nanti kita coba hapus stop propagation-nya apa yang terjadi ya Nah kita akan coba langsung tambahkan Oke di e hello world mainjs Nah di sini saya akan coba tambahkan toolbar ya Nah seperti ini lalu saya akan tambahkan on cck ya Nah kita akan bikin E E misalnya nya seperti ini nah saya akan coba alert ya toolbar eh atau you Click toolbar nah misalnya seperti ini nah saya akan gunakan e tik stop Eh provegation nah seperti ini ya Oke ini saya close dulu nah ini ada toolbarnya ya di bawah first dan juga second Saya klik first Nah lihat ya keluar Alert aja Nah mungkin ini div-nya enggak kelihatan Ya saya akan coba tambahkan ee div-nya itu warna deh ya Jadi kita tambahkan coba eh style misalnya ya Nah kita tambahkan eh back Sorry back ground color misalnya yellow Nah biar kelihatan ya di sini kalau saya Klik div-nya di sini Nah lihat dia ada alert juga ya nah jadi artinya kalau div-nya saya klik ada alert kalau saya tombolnya Saya klik juga ada alert tapi sekali aja dia berhenti nah tapi kalau misalnya saya hilangkan stop propagation-nya ya Nah kita lihat apa yang terjadi kalau saya klik div-nya itu dia keluar alert kalau saya klik tombolnya ya dia keluar alert saya oke nah dia keluar alert lagi dua kali Kenapa karena yang e parent elemennya ya yaitu yang Div itu ke-rigger si Eh eventnya nah ini adalah event propagation ya jadi kadang-kadang kita enggak mau hal itu terjadi jadi saya bisa stop Eh propagation nah seperti ini Jadi ini sebenarnya bawaan dari ini ya bawaan dari eh elemen dari si html-nya Oke selain stop propagation Kita juga bisa menggunakan prevent default ya Jadi ini sama seperti di eh form biasanya misalnya Jadi selain menghentikan event propagation hal yang biasa kita lakukan ketika membuat event handler adalah menghentikan default action menggunakan prevent default misalnya ya Jadi ini bawaan dari ini juga ya dari eh web ya jadi Sudah ada ya teman-teman mungkin sudah biasa pakai kalau pakai kode javascript nah misalnya kita ingin membuat form ketika kita e klik event-nya ya dipicu event-nya Misalnya on Click kita ingin menghentikan default action form submit-nya Nah kita bisa gunakan si prevenent eh default ini Oke kita lihat contohnya Saya punya search form misalnya ya Nah di sini kita bikin form e inputnya di sini teks misalnya Nah di sini oncilick ya Misalnya kita mau ngelakuin apa nah misalnya kita pengen hentikan dulu nih form-nya jadi default-nya kalau kita klik gitu ya nanti ini form-nya akan otomatis keekirim ya saya enggak mau misalnya Saya pengin hentikan dulu nih ya default dari form-nya jadi kita bisa gunakan prevent default Oke kita akan coba Oke saya akan bikin berarti ya bikin sebuah eh komponen baru di sini eh saya akan buat foldernya adalah form ya Nah kita buat di sini search form Oh ya Sorry extension-nya saya lupa saya hapus dulu export default function search form ya Nah Oke kita akan returnkan di sini langsung form misalnya nah ini saya tambahkan eh input type-nya adalah text nah lalu kita tambahkan button ya Nah di sini search nah saya akan tambahkan on cck saya langsung aja tambahkan di sini ini event-nya misalnya seperti ini nah lalu saya tambahkan e titik eh prevent default ya Nah setelah itu baru alert you search nah seperti ini Oke kita tambahkan ke main ya di sini saya akan tambahkan di bawah search form nah selesai Oke kita lihat di bawah ada search form ya nah ini kalau saya tambahkan misalnya Echo Saya klik search Nah lihat lihat dia tidak ke-ubmit ya terbukti dengan data eekya tidak hilang Nah kalau saya coba hilangkan misalnya yang prevent defaultnya ini harusnya dia akan ke submit ya Jadi kalau saya coba search ya oke oke nah lihat dia ke sububmit ya masuk ke sini nih datanya Nah di sini kosong lagi nah seperti ini nah jadi kalau teman-teman ingin E prevent default ya teman-teman bisa tambahkan juga prevent default jadi ini sebenarnya mirip seperti e event objectek dari form atau e event handler biasanya yang ada di web sekarang kita bahas tentang Side Effect ya atau efek samping Apakah komponen boleh Miki Side Effect atau efek samping nah tentu saja sebenarnya Boleh ya tapi biasanya Side Effect terjadi dikarenakan adanya interaksi dari pengguna Biasanya sih menggunakan event handler misalnya kita ingin membuat form say hello nah di mana ketika button-nya diklik kita ingin menampilkan Hello plus nama pada teksnya nah artinya Apa artinya kan kita harus menunggu event dari si pengguna ya contohnya ketika tombolnya diklik baru muncul perubahannya ya Jadi sebenarnya boleh aja ya untuk set effect tapi bagusnya adalah menunggu memang ada event dari penggunanya nah harapannya adalah biar komponennya sebenarnya tetap pure compponent ya tapi side effect-nya terjadi dari proses eventnya Oke contohnya misalnya ya kita akan bikin sebuah form namanya say hello form ya lalu di sini kita akan Eh ada input ya contohnya di sini input name id-nya lalu ketika diklik tombolnya misalnya nah saya akan prevent default mis contohnya lalu lalu saya akan ambil elemen yang namanya input name lalu saya akan ambil value-nya Nah setelah itu saya akan ambil elemen H1 di sini ya Nah lalu saya akan e ganti teksnya menjadi Hello namanya yang kita input dari sini nah artinya Apa artinya sebenarnya perubahannya terjadi ketika saya Klik tombol Say hello-nya jadi ketika pertama kali muncul sebenarnya kita tetap bikin pure komponen ya tapi berubah komponennya ya isinya itu oleh aksi yang dari tombol ini Oke kita akan coba Oke di dalam form saya akan bikin sebuah komponen baru say hello form ya jsx Oke kita akan buat di sini export function e Sorry default function Di Sini say hello form nah selesai Oke kita akan bikin return Div Nah di sini kita bikin form ya lalu kita bikin input lalu di sini e id-nya adalah contohnya di sini eh input name Oke selanjutnya saya akan tambahkan button Di Sini say hello ya Nah lalu di bawahnya nanti kita akan bikin H1 ya lalu id-nya adalah text Hello Ya ini Hello word default-nya Oke dan untuk button-nya kita tambahkan action ya Nah di sini Bagusnya sih kita bikin di sini e function handle misalnya klik ya Nah ini kita ada event-nya jadi di sini button-nya itu on cck dia adalah handle Click nah seperti ini Oke selanjutnya di sini misalnya kita akan prevent default dulu ya Nah Lalu setelah itu kita ambil name-nya ya kita ambil name dari dokumen get Element by id-nya adalah input name m titik kita ambil si value-nya jadi value yang diinputkan Nah setelah itu kita akan gunakan dokumen get Element by ID yaitu teks Hello Ya lalu inner eh teksnya kita ganti menjadi contohnya Hello Ya lalu di sini adalah name nah selesai jadi ketika tombolnya diklik lalu aksi ini itu akan dipicu ya ya atau dirigger istilahnya itu Oke jadi sekarang kita akan coba tambahkan ke hello world yang main-nya di bagian paling bawah misalnya say hello form nah dia ada di sini ya say hello-nya Nah di sini default-nya keluarnya hello world saya akan coba eh chcho di sini saya akan coba say hello Nah lihat dia berubah menjadi Hello Echo lalu contohnya Budi saya say hello dia berubah menjadi Hello Budi nah jadi seperti ini Jadi biasanya Side Effect ya atau Perubahan tersebut ya itu terjadi biasanya dirigger oleh event handler Oke tadi kita melakukan eh Dom manipulation ya atau documen object model manipulation Nah jadi kode sebelumnya kita menggunakan Dom manipulation untuk mengubah komponen yang ada di react nah Sebenarnya ya hal ini itu tidak direkomendasikan untuk dilakukan kenapa karena percuma kita menggunakan react kalau kita masih melakukan Dom manipulation secara manual ya Nah terutama jikalau misalnya data yang memicu perubahan elemen di komponen bersumber dari event handlernya ya Nah Oleh karena itu hal yang direkomendasikan adalah menggunakan fitur di dalam e react namanya adalah state ya yang akan kita bahas di materi selanjutnya jadi tadi itu saya cuma memberikan contoh aja ya tapi idealnya tu nanti kita enggak melakukan hal tersebut ya nanti kita lakukannya itu menggunakan state nanti kita bahas di materi-materi selanjutnya sekarang kita bahas tentang hooks ya hooks itu adalah fitur yang ada di react yang bisa digunakan di dalam komponen jadi saat kita bikin komponen itu kita bisa menggunakan fitur-fitur di react yang namanya adalah hooks ada banyak sekali fitur yang bisa kita gunakan di react hooks ini ya Dan nanti kita bahasnya secara bertahap Nah sebagai referensi ya detail hooks-nya itu itu ada apa aja kita bisa lihat di sini jadi contohnya ada state hooks ada context hooks ada reference Hook ya Ada effect hooks ada juga performance Hook dan yang lain-lain Nah nanti semuanya akan kita bahas ya di materi ini ya dan kita akan bahas bertahap ya dari mulai di materi selanjutnya kita akan bahas tentang stat hooks Sekarang kita akan bahas tentang state ya komponen itu kadang perlu untuk berubah dikarenakan Interaksi yang dilakukan oleh penggunanya contohnya misalnya input ketika diklik gitu ya kita bisa menampilkan data contohnya counter jumlah e berapa kali klik misal saja atau tombol next ya bisa mengubah contohnya gambar banner yang sedang muncul dan lain-lain jadi Biasanya kita butuh interaksi ya dan otomatis mengubah nilai komponen saat ini nah komponen harus bisa mengingat nilai saat ini contohnya misalnya kalau counter e saat ininya berapa ketika diklik dia naik ke berapa apa dan sebagainya atau gambar contohnya ya banner ketika diklik kita pengin tahu banner saat ini yang mana gitu ya ketika diklik next harus memunculkan gambar yang mana dan lain-lain artinya kita butuh informasi atau si komponennya itu harus bisa mengingat data saat ini nah di react ya memori spesifik di komponen ya jadi misalnya ya menyimpan data di komponen itu kita bilang namanya adalah state pertanyaan Apakah lokal variabel biasa di komponen bisa digunakan untuk state nah sayangnya hal ini tidak bisa dilakukan Kenapa nanti kita akan lihat ya Kenapa tidaknya nah ketika rea melakukan render komponen ya render itu adalah menampilkan si komponen ya untuk yang kedua kalinya misalnya nah dan seterusnya jadi nanti itu reak itu akan bisa ini ya merrender Atau eh memperlihatkan atau menampilkan si komponen itu berkali-kali Nah maka semua kode komponen akan dieksekusi ulang jadi semua kodenya akan dieksekusi ulang nah Oleh karena itu kalau kita pakai lokal variabel contohnya teman-teman bikin variabel misalnya eh counter sama dengan 1 di dalam SI eh komponennya Ketika nanti ditampilkan ulang komponennya maka dia akan ke-eset lagi variabelnya ke satu lagi karena dia akan Diulangi terus-terusan ya makanya kalau kita menggunakan lokal variabel itu tidak bisa Nah mungkin teman-teman berpikir Ya udah variabelnya kita keluarkan aja dari komponennya ya kalau seperti itu jadinya komponennya punya Side Effect ya Nah kita enggak mau melakukan itu kita pengin komponennya itu adalah fure function atau fure component nah perubahan di lokal variabel itu juga tidak bisa memicu render ulang J contohnya teman-teman counternya dinaikkan dari 0 jadi 1 Nah itu kan teman-teman mungkin tampilan si komponennya pengin berubah ya Tadinya 0 jadi 1 Nah kalau kita menggunakan lokal variabel itu tidak bisa jadi tidak akan istilahnya itu bisa memicu renderul ulang istilahnya itu ya jadi Tidak bisa menampilkan ulang si komponennya nah Untungnya ada fitur yang namanya state Oke kita akan coba dulu kalau teman-teman misalnya memaksa pengin menggunakan local variabel ini adalah contoh yang salah nah kita akan bikin sebuah counter ya jadi di sini kita bikin sebuah counter l di sini kita buat local variabel namanya adalah counter ya Nah lalu kita bikin tombol di sini on Cik lalu kita counternya naikkan lalu teman-teman ee konsol log misalnya untuk debug lalu kita akan coba tampilkan counternya saat ini ada berapa harapannya ketika teman-teman klik counternya counternya akan muncul di sini ya nanti naik terus misalnya seperti itu Nah Apakah benar kita akan coba praktikkan aja langsung Oke saya akan buat di dalam form ini counter.jsx ya Nah kita buat export default function yaitu adalah Oke kita akan bikin di sini local variabel counter sama dengan 0 nah lalu kita returnkan Div misalnya Oke kita tambahkan button ya Nah seperti ini ini misalnya increment ya Nah lalu kita akan coba tambahkan di sini H1 counternya ada berapa ya di sini counternya Oh ya ini kita bungkus dalam ee Div misalnya nah nah seperti ini nah lalu kita akan coba misalnya bikin sebuah function ya eh di sini handle Click misalnya seperti itu Nah harapannya teman-teman counternya misalnya kita plus- plus ya dinaikkan lalu kita coba eh consol log counternya ada berapa gitu ya Nah nanti di sini ketika on cck itu berarti handle Click nah seperti ini Oke kita akan coba tambahkan ke hello world yang tadi ya saya akan tambahkan di bagian paling bawah di sini counter nah seperti ini Oke kita lihat di sini ya ada incrementen di sini ada counternya saya akan coba inspect ya Nah biar kelihatan di konsol saya akan Coba klik ya increment Nah dia muncul satu ya nah saya incremen lagi dia muncul 2 3 dan seterusnya mungkin kita merasa ohoh Berarti udah jalan dong tapi teman-teman perhatikan Counter di sini tetap no0 Kenapa karena kan komponennya sudah dirender ya Nah kalau gitu gimana caranya biar kita ngubah ini ya kita harus manipulasi si doom-nya jadi teman-teman ambil counternya lalu teman-teman modifikasi lagi nah Cuma tidak seperti itu cara kerja react ya Jadi teman-teman tidak melakukan seperti ini nah cara kerjanya gimana cara kerjanya adalah mer-render ulang atau menampilkan ulang si elemennya dengan harapan data yang barunya itu adalah data yang terbaru di sini ya counternya nah Cuma masalahnya kalau kita menggunakan lokal variabel ketika teman-teman Ma mengubah lokal variabelnya sayangnya komponennya tidak akan dirender ulang nah Oleh karena itu ada fitur yang namanya state di mana setate itu mirip seperti variabel cuma nanti ketika teman-teman ubah state-nya dia akan dirender ulang si komponennya jadi kita bisa dapetin nilai yang baru Oke kita akan bahas ya Oke jadi kita akan balik lagi ke state sekarang ya Nah untuk membuat state kita bisa menggunakan function yang namanya use state nah lalu di sini teman-teman masukkan iniisial datanya atau data pertama kalinya Nah di sini teman-teman bisa lihat referensinya jadi teman-teman gunakan state nanti balikannya dia berupa aray di mana Data pertama adalah data state-nya dan data kedua adalah sebuah funtion yang teman-teman bisa gunakan untuk mengubah state-nya jadi untuk mengubah state-nya teman-teman menggunakan function ini jadi tidak menggunakan ini ya tapi menggunakan function set state contohnya nah ini teman-teman namanya bebas ya nama variabelnya nah jadi nanti teman-teman tinggal panggil si set state-nya Oke function state itu akan mengembalikan Aray dengan dua nilai pertama adalah state-nya ya jadi nilainya ada di sana dan yang kedua adalah function untuk mengubah value di state tersebut nah komponen yang menggunakan state tersebut secara otomatis ya itu akan eh diender maksudnya Ya ini Oke kita akan lihat contohnya di sini contohnya ya Ee Kita akan ubah yang sebelum ya counter itu menggunakan local variabel kita sekarang gunakan state jadi di sini kita bikin contohnya ya state contohnya defaultnya pertama kali adalah 0 ya lalu kita gunakan Counter di sini lalu kita gunakan eh function untuk mengubahnya namanya adalah set counter misalnya jadi nanti ketika teman-teman ingin mengubah datanya teman-teman Panggil set counter lalu isikan data counter yang terbaru Nah jadi seperti itu Nah ketika teman-teman memanggil set counter lalu di sini data yang terb Nanti secara otomatis ya react akan mendeteksi Oh ternyata state-nya berubah maka dia akan merender ulang ketika merender ulang ya nanti si komponennya akan ditampilkan ulang tapi ketika kita gunakan state ya danah di sini dapatin data counternya maka dia akan mendapatkan data counter yang terakhir diubah jadi tidak akan menggunakan data yang inisal lagi Nah nanti kita akan coba ya kita lihat nih jadi kita akanif kasih dulu yang ini jadi kita akan gunakan sekarang ini kita hapus ya Eh ini kita ganti counter menjadi set counter dan ini use state nah use state dan di sini default-nya contohnya kosong nah seperti ini jadi nanti mengubahnya tidak menggunakan counter plus+ seperti ini tapi kita gunakan function set Counter di sini misalnya counter + 1 nah seperti ini Oke Seles ya Nah harusnya sudah jadi cuma seperti itu aja Nah sekarang perbedaannya apa ya perbedaannya adalah saya akan Coba refresh ulang dulu eh Biar hilang ininya ya Eh log-nya nah saya akan Coba klik incrementen lihat yang terjadi Nah lihat dia muncul ya Nah ini Kebetulan Kenapa ini nol karena ketika di sini nilai counternya masih nol karena yang kita ubah itu di dalam state-nya dan di sini berarti belum berubah Nah kita coba incremen lagi nah dia naik ya satu tapi di sini sudahah dapat du 3 4 dan seterusnya Nah lihat nah sebenarnya ini diender ulang ya kalau teman-teman tidak percaya Apakah benar ini dirender ulang kita coba ditambahkan di sini konsol info misalnya render counter nah seperti ini ya nah saya akan coba incrementen nah lihat dia muncul render counter incrementen render counter ya Nah Lihat render counter keluar terus pertanyaannya Kenapa dua kali ini g ggara kita menggunakan ini ya Eh striak mode nah strick mode itu memang ketika mode development dia akan Coba lakukan dua kali ya untuk melakukan debugging ya prosesnya nah tapi tidak masalah jadi teman-teman ngerti ya kenapa muncul dua kali karena eh dari striak mode tadi tapi intinya lihat dia akan render ulang terus-terusan jadi yang komponen ini dia akan dipanggil terus-terusan pertanyaannya Kenapa kok counternya tidak baik lagi ke nol Nah itulah karena dia menggunakan state karena dia menggunakan state Jadi sebenarnya nanti si counter ini ya dia akan dicek ke state-nya apakah sudah ada ya untuk counter Oh ternyata sudah ada kalau sudah ada dia akan kembalikan data counter yang sudah ada Jadi tidak akan buat dari nol lagi nah kecuali teman-teman refresh ya kalau kita refresh berarti kan data reactnya hilang semua nah dia balik lagi ke nol saya coba inkremen nah lihat dia naik lagi seperti ini nah jadi ini adalah state ya Oke kita perlu tahu bahwa state itu terisolasi dan juga private jadi state merupakan data yang terisolasi dan privat secara lokal ya terhadap komponen yang menggunakannya Jadi kalau teman-teman bikin counter lalu teman-teman bikin lagi state lagi di tempat lain namanya sama counter itu enggak masalah itu dua-duanya adalah state yang berbeda jadi set Itu beneran nempel di komponennya Ketika teman-teman pakai komponen yang sama bahkan maka set itu akan nempel di komponen yang kita gunakan nah artinya kalau kita merirender ulang komponen yang sama berkali-kali maka state dari tiap komponen tersebut akan terpisah satu sama lain Jadi tidak akan saling berhubungan jadi itu bakal aman ya Jadi tidak akan saling berhubungan kita coba nih ya kita coba misalnya teman-teman bikin counternya dua kali Nah mungkin teman-teman berpikir Apakah ini akan e sama ya state-nya tidak dua-duanya akan membuat atau menggunakan state yang berbeda kita coba ya jadi di sini saya akan tambahkan di main ya ini counter yang pertama saya akan copy paste Nah lihat di sini ada dua counter ya jadi counter ini dan counter ini nah ini kalau saya incremen Nah lihat dia cuma menaikkan counter yang di sini Jadi ini state-nya beneran eh di sini aja jadi saat saya panggil counter ini state di dalam counter ini itu cuma ada di sini aja nah Ketika saya bikin lagi di sini counter yang kedua ya dari komponen yang sama nah counter ini juga dia nempelnya di sini ya di dalam komponen ini jadi saat saya incremen Nah lihat dia berbeda jadi tidak akan sinkron antara dua ini karena memang dia e terisolasi dan juga private ya terhadap si komponennya jadi teman-teman tidak usah khawatir takut misalnya datanya tertukar jadi tidak seperti itu ya cara kerjanya Jadi ini adalah state jadi kalau teman-teman mau bikin yang Side Effect kayak tadi ya itu teman-teman tidak perlu memanipulasi domnya secara manual teman-teman cukup gunakan state seperti ini Oke sekarang kita bahas render lebih dalam ya Nah sebelum komponen yang kita buat ditampilkan di layar ya atau di halaman browsernya komponen itu harus dirender oleh si react terlebih dahulu nah Oleh karena itu kita perlu tahu bagaimana cara kerja Proses reak ini ketika menampilkan komponen yang kita buat nah terd dapat tiga tahapan proses menampilkan komponen di react yang pertama adalah Trigger atau memicu proses render ya jadi e memicu proses rendernya dulu Nah yang kedua baru melakukan proses render komponennya Nah selanjutnya ketiga setelah proses rendernya selesai maka yang ketiga adalah menempatkan hasil proses render komponennya ke Dom atau dokumen objectek modelnya Nah jadi ini adalah tiga tahapan yang dilakukan oleh react ya Jadi sebelum teman-teman benar-benar melihat di layar ya artinya kalau sudah masuk ke domnya itu sebenarnya react itu melakukan tiga tahapan ini yang pertama m-rigger dulu ya E men-trigger atau memicu proses rendernya contohnya ketika teman-teman ubah state maka dia akan memicu dulu ya proses rendernya nanti baru si react-nya melakukan proses render Nah setelah proses rendernya selesai ya Nah baru dia akan mengirimkan perubahan hasil rendernya itu ke domnya Jadi kurang lebih prosesnya seperti ini jadi diawali dengan Trigger render dulu lalu baru dirender di komponennya ya Jadi ini dirender di dalam SI reactnya jadi Tidak Langsung nampil di dom-nya Nah setelah selesai ya dirender baru nanti dia dicomit ya atau disimpan perubahannya ke Dom Oke kita bahas Lebih Detail ya yang pertama kan tadi proses Trigger rendernya jadi ini pemicu render biasanya terjadi karena dua hal yang pertama adalah inisialisasi awal komponen ya saat kita menggunakan meod render jadi saat teman-teman menggunakan metode render di sini contohnya nah nah ini dia otomatis memicu Awal jadi selalu pertama kali pasti selalu dipicu dulu ya ketika teman-teman pertama kali jadi ketika kita refresh misalnya browsernya nah ini pertama kali pasti minimal satu kali akan diender Nah jadi seperti itu Nah kedua adalah ketika ada pemicu perubahan state Nah jadi ketika pemicu perubahan state itu juga dia akan melakukan Trigger untuk melakukan render setiap terjadi perubahan state secara otomatis react akan mengirimkan antrian Untuk memicu proses render ulang jadi ketika misalnya sebelumnya eh di dalam counter kita ubah ini ya contohnya kan saya klik tombolnya lalu kan otomatis dia memicu perubahan state ya Nah ketika memicu perubahan state sebenarnya react juga akan mengirim antrian untuk mencoba memicu render ulang nah jadi setelah nanti function ini selesai maka otomatis baru rendernya akan dilanjutkan makanya ketika teman-teman klik increment Nah lihat dia muncul render lagi ya Kenapa karena memang perubahan data state di sini dia akan memicu proses render nah seperti [Musik] ini Jadi ini ya jadi Trigger untuk render biasanya ada dua cara ya yang pertama itu adalah inisialisasi awal yang kedua adalah biasanya terjadi karena perubahan state Oke selanjutnya setelah setelah dipicu ya atau di Trigger untuk melakukan render otomatis proses rendernya dilakukan jadi setelah proses Trigger render terjadi react akan memanggil komponen yang kita buat untuk mencari tahu apa yang harus ditampilkan di layar jadi nanti komponen yang tadi yang ini yang contohnya counter ini akan dipanggil function-nya ya nanti untuk e dapetin komponen kira-kira nanti elemennya apa aja ya jadi hasil returnnya itu bakal Seperti apa nah rendering adalah proses react memanggil komponen yang kita buat jadi komponen-komponen itu dipanggil ya Nah otomatis nanti balikannya berupa elemen-elemen itu adalah hasil dari proses rendernya nah pada proses inisialisasi awal react akan memanggil root komponen ya yang paling atas nah jadi pasti yang pertama kali kan Eh rendernya itu di main ini dia rendernya yang paling atas ya di sini yang menggunakan striak mode dan seterusnya Nah jadi pertama kali pasti dipanggil semuanya nah tapi untuk yang render ulang belum tentu semuanya ya nah jadi pada saat proses render ulang react hanya akan memanggil ulang komponen yang state-nya berubah ya jadi contohnya misalnya kalau saya akan ubah contohnya yang counter yang di sini ini cuma memicu perubahan di komponen ini aja ya counter ini ini tidak dipicu lagi tidak dirender ulang Kalau teman perhatikan lihat rendernya itu cuma e keluar di sini dua kali ya karena striak mode ya kalau misalnya ya beneran semuanya dirender ulang harusnya keluarnya empat kali ya counter yang ini counter yang ini tapi di sini buktinya cuma dua kali kalau kita cek lihat ya Nah dia tampilnya cuma dua kali aja jadi Harusnya kan empat kali kalau diender semuanya tapi buktinya cuma dua kali artinya Apa artinya proses render ulang itu akan dipilih komponen mana yang memang harus dirender ulang jadi tidak harus semua komponennya nah biasanya mendeteksinya adalah dari state-nya jadi komponen yang state-nya berubah aja yang akan dirender ulang kalau state-nya tidak berubah maka dia tidak akan dirender ulang Nah setelah misalnya proses rendernya selesai Nah baru react akan melakukan proses terakhir yaitu comit ke dom-nya Oke jadi terakhir adalah commit changes ya atau ya simpan perubahannya ke dom-nya jadi setelah proses rendernya selesai react akan melakukan proses commit changes atau menyimpan perubahan ke Dom untuk inisialisas awal ya karena ini pertama kali jadi pertama kali aplikasinya di load misalnya baru ditampilkan artinya elemen di dom-nya belum pernah ada Jadi belum ada tuh elemen-elemennya maka react akan menggunakan aen sheld untuk menambahkan Elemen Ke dom-nya jadi Ini pertama kali Nah tapi selanjutnya ketika proses render ulang nah R akan mencoba melakukan perubahan seminimal mungkin untuk menyamakan Dom saat ini dengan nanti hasil renderingnya Nah makanya Ketika nanti di sini proses rendering e ulang ya dikomit ke dom-nya di sini ketika di incremen Maka nanti itu e react akan compare ya yang Dom saat ini di layar dengan hasil dari rendernya nah yang berubah yang diubah di sini contohnya di sini yang berubah counter ini aja maka yang diubah itu cuma di sini nah jadi sebenarnya di tempat lain itu tidak akan berubah Nah jadi react udah pintar ya jadi dia bisa tahu komponen Mana nih yang berubah elemen mana yang berubah maka yang dia ubah di layar ya atau di komit perubahannya itu cuma yang berubah aja kalau tidak berubah maka dia tidak akan komit perubahannya ke sana ya nah jadi react hanya akan mengubah elemen di Dom yang memang kalau misalnya elemen tersebut berbeda dari hel rendernya kalau sama dia tidak akan melakukan perubahan nah Oleh karena itu maka diharapkan proses ini akan cepat ya karena cuma mengubah sebagian kecil yang elemen yang berubah saja Nah jadi ini adalah tahapan proses render ya Jadi kalau saya bilang oh nanti kita render ulang sebenarnya tiga tahapan ini yang dilakukan ya Jadi teman-teman harus tahu secara teori tentang Gimana cara kerja si proses rendernya di react sekarang kita bahas tentang snapsoot ya Oke ini penting sekali teman-teman untuk ketahui ya karena kalau teman-teman tidak mengerti paham eh tentang konsep snapshot mungkin nanti akan agak sedikit bingung ketika menggunakan State variabel state Itu sekilas mungkin terlihat seperti variabel biasa di javascript tapi sebenarnya state itu mirip seperti snapsot atau kondisi saat ini mengubah nilai variab state tidak akan mengubah snapsoot-nya jadi snapsoot-nya tetap sama itu-itu aja jadi ketika teman-teman mengubah menggunakan set state-nya itu sebenarnya datanya itu tidak akan berubah data itu akan berubah melainkan nanti dia ketika proses render ulang jadi sebenar nya ketika teman-teman mengubah data sebenarnya data yang diubahnya itu nanti di proses render ulangnya jadi jangan berharap ketika teman-teman ubah datanya saat itu juga datanya akan berubah karena datanya adalah snapshot snapshot artinya tidak akan bisa berubah lagi nah kita mungkin berpikir bahwa tampilan web berubah secara langsung karena respon dari event yang kita klik ya contohnya misalnya teman-teman klik dan lain-lain gitu ya mungkin kita berpikir Oh berarti Bisa langsung berubah nah tapi sebenarnya tidak seperti itu kita sudah tahu di materi sebelumnya nya ketika terjadi perubahan state dia akan memicu proses render ulang nah ketika misalnya proses render ulang itu dilakukan Itu otomatis Sebenarnya dia akan mengeksekusi lagi ya ulang si komponennya Jadi nanti dia akan membuat snapshot baru untuk di render selanjutnya snapshot artinya ya anggap aja di ini ya jadi semua elemennya itu difreze ya tidak ada yang berubah ketika teman-teman render ulang nah baru di render selanjutnya yang berubahnya datanya jadi di saat ini itu tidak akan berubah Oke jadi ini adalah kesalahan ketika teman-teman menggunakan state jadi paham tentang snapshoot ini akan memberi gambaran secara eh panjang ya kita terhadap data di state-nya ya Nah contohnya misalnya berikutnya berikutnya adalah contoh kesalahan yang biasa dilakukan ketika teman-teman menggunakan state Nah kita berpikir kalau kita mengubah state saat itu juga data akan berubah padahal mengubah state sebenarnya hanya mentrigger render ulang dengan nilai state yang baru di nanti ya render ulang selanjutnya kita akan coba lihat kesalahannya Oke contohnya di sini kita akan ubah yang counternya misalnya kita mau counter tapi ketika di sini tombolnya incrementen plus 3 jadi harapannya Ketika saya Klik tombol counternya Saya pengen naiknya tiga kali jadi di sini ya udah deh saya akan gunakan set counter counter plus 1 lalu saya akan naikkan lagi Set counter counter plus S lagi Set counter counter plus S lagi jadi harapannya Ketika saya set cter di sini counter plus 1 nah Berarti variabel counternya itu berubah ya naik sat lalu di sini juga naik sat di sini naik satu padahal tidak seperti itu Counter di sini ini adalah snapsot data saat ini jadi ketika teman-teman set counter dengan data baru snapsot-nya tidak akan berubah tapi nanti berubahnya Kapan di render ulang berikutnya Nah jadi ini yang sering salah ya ketika menggunakan si state kita akan coba Oke di dalam counter saya akan coba ini set counternya saya set tiga kali ya jadi saya lakukan tiga kali Nah kita lihat apa yang terjadi saya Refresh dulu nah saya akan coba incremen nah lihat dia cuma naiknya tetap satu saya coba inkremen nah lihat dia dua loh padahal kan saya ini ya panggilnya dia inkremennya tiga kali ini plus S ini plus S lagi ini plus S lagi nah sebenarnya saat teman-teman lakukan ini set counter itu tidak akan mengubah nilai Counter di sini set contol itu hanya digunakan untuk l ini Ini loh data baru Nah nanti ketika render ulang Selanjutnya silakan pakai data baru jadi saat kita Panggil tiga kali Sebenarnya bukan kita menaikkan tiga kali Sebenarnya ya nanti kita lihat nah jadi pertanyaannya Kenapa counter tidak berubah tiga kali Hal ini dikarenakan ketika kita gunakan set counter tidak akan mengubah data counter yang ada di snapshot saat ini jadi set counter itu hanya akan melakukan render ulang dengan data counter yang baru Nah tapi pertanyaannya kalau gini kan berarti kita Panggil tiga kali kenapa tidak dirender tiga kali Enggak seperti itu cara kerjanya Jadi nanti dia akan nunggu sampai ini selesai handle kliknya Jadi kalau udah selesai nanti reanya akan cek Apakah pernah ada perubahan state kalau udah ada baru diender ulang ya bukan berarti saya panggil langsung dirender ulang saat itu juga enggak Ketika saya panggil langsung dirender saat itu juga enggak enggak kayak gitu ya tapi dia tunggu sampai selesai dulu setelah selesai baru diender ulang karena ternyata di sini ada yang mengubah data state-nya jadi ketika saya panggil tiga kali bukan berarti tiga kali render enggak tetap satu kali ya Nah kenapa karena ini untuk e mempercepat proses bayangkan kalau di sini saya ee ubah 10 state gitu ya lalu setiap set Berubah itu saya render ulang berarti saya harus 10 kali render ulang ini bakal lambat jadi reak itu akan menunggu sampai selesai dulu event-nya nanti didetect apakah ada perubahan state jadi kalaupun ada 10 perubahan set dia akan coba render ulangnya sekali saja jadi tidak akan 10 kali render ulang jadi lebih cepat ya jadi saat kita memanggil set counter sebanyak tiga kali bukan berarti rea akan melakukan render ulang sebanyak tiga kali react akan menunggu sampai event handler-nya selesai kalau ternyata ada perubahan state maka dia akan lakukan proses render ulang nah artinya render ulang yang akan dilakukan sekali saja walaupun kita mengubah state-nya berkali-kali Jadi sebenarnya kode yang sebelumnya kita buat kurang lebih hasilnya seperti ini jadi saat kita gunakan set counter counter plus 1 ya Ini sama aja kita gunakan set counter 0+ 1 Kenapa karena data counter pertama adalah 0 jadi saat saya panggil lagi Set counter counter ini nilainya tetap 0 jadi sama dengan 0+ 1 juga jadi saat saya panggil lagi Set counter counter plus 1 itu sebenarnya sama aja 0 + 1 jadi saat teman-teman gunakan set Counter di baris ini counter itu tidak berubah jadi Counter di sini tu tidak berubah dia tetap nilainya yang pertama kali ya yaitu adalah 0 nah ketika diender keduanya baru deh counternya jadi satu tapi saat saya panggil tiga kali ya sama aja kayak 1 + 1 1 + 1 1 + 1 nah jadi seperti itu makanya hasil akhirnya selalu + 1 karena kita gunakan counter Nah jadi kalau teman-teman pengin naikkan tiga kali jangan seperti ini caranya teman-teman naikannya langsung aja gitu ya jadi counter plus 3 seperti itu karena data counternya tidak akan berubah ketika teman-teman set counter Nah jadi ini adalah snapsot ya jadi setiap render ulang data state-nya itu snapsot jadi immutable tidak akan berubah jadi teman-teman jangan coba-coba ubah karena kalau teman-teman Coba ubah juga menggunakan set counter itu berubahnya nanti di render ulang selanjutnya bukan di render saat ini Jadi ini adalah kode yang salah jadi kode yang benar itu ya teman-teman langsung aja gitu ya kalau mau naikkan t ya langsung aja plus 3 seperti ini nah ini kita coba cek counter ya Nah lihat dia naiknya tiga Jadi bukan teman-teman Panggil set counter sebanyak tiga kali misalnya seperti ini nah jadi ini adalah tentang snapsoot ya Jadi teman-teman harus tahu Dan kalau teman-teman Perhatikan ya ini saya Coba refresh ya ini kan set counter counter plus 3 harusnya mungkin teman-teman berpikir sekarang jadi tig tapi ketika kita log lihat hasilnya Ya saya coba incremen nah lihat dia nol artinya Apa artinya sebenarnya sampai di sini ini datanya masih Nol ya bukan otomatis dia naik jadi 3 Kenapa karena 3 itu nanti di render ulang selanjutnya seperti itu Nah contohnya di sini render counter misalnya saya akan masukkan e counter misalnya ya nah saya akan coba Refresh dulu Nah Lihat render counternya 0 Berarti benar ya di sini nilainya 0 Ketika saya klik incremen ya Nah lihat dia tetap no0 tapi di render ulang selanjutnya diail nya sekarang jadi tig Nah jadi seperti itu jadi di sini itu tetap nol nilainya tapi ketika render ulang selanjutnya baru deh dia naik 3 seperti itu Jadi ini adalah snapshot ya jadi teman-teman harus pahami betul kalau data state itu dia berupa snapshot sekarang kita bahas tentang state updates nah seperti yang sebelumnya dibahas ketika teman-teman melakukan update state berkali-kali tidak akan mengubah data state di snapshot saat ini melainkan hanya memicu untuk render ulang dengan data di state yang baru Nah tapi kadang-kadang mungkin kita memang eh pengin ada keperluan misalnya ya untuk mengubah data di state yang sama itu berkali-kali misalnya seperti itu Nah dan jika kita memang ingin mengubah data diate dengan data yang harapannya sudah diubah sebelumnya ya walaupun misalnya belum dirender ulang nah kita bisa menggunakan lambda ya sebagai parameter ketika memanggil function untuk update-nya Nah jadi tapi tetap ya variabel state-nya sendiri sebenarnya datanya tidak berubah tapi teman-teman seakan-akan Oke saya pengin dong update data state-nya tapi nanti tolong pakai state yang terbaru misalnya seperti itu Nah kita bisa menggunakan function ya ketika teman-teman meng-update data state-nya seperti apa teman-teman bisa lihat seperti ini contohnya jadi di sini set counter Nah teman-teman di sini pakainya function contohnya di sini pakai Eh ini ya arrow function misalnya C ya atau counter nya itu nanti tolong counternya ditambahkan satu nah jadi di sini set counter ya contohnya di sini parameternya nanti adalah counternya itu nanti counternya ditambahkan satu lagi Set counter lagi counternya ditambahkan Satu lagi karena di sini dia adalah function dia nanti diekekusinya itu internal di dalam SI e state managementnya Nah jadi seperti ini jadi kalau ini beda dengan yang sebelumnya Kalau Sebelumnya kan langsung value-nya ya Jadi counter plus 1 jadi counternya kita ke sini ternyata masih belum berubah Nah kalau seperti ini itu nanti dia akan menggunakan counter yang aslinya di dalam SI counternya ya dalam SI state-nya Nah kita bisa lakukan seperti ini kalau memang teman-teman pengin mengubah dia berkali-kali ya contohnya kita akan coba nih gunakan seperti ini Oke jadi kita akan ganti set counternya jadi kita tidak pakai counter seperti ini ya Tapi tetap ya walaupun teman-teman ubah di sini pakainya misalnya eh function misalnya seperti ini C Plus + 1 ya C + 1 C + 1 tapi tetap di sini itu data counternya itu masih kosong ya karena ini yang berubah itu di dalam SI state managementnya kita Coba refresh Nah Lihat ini rendernya masih kosong ya saya akan coba incremen nah lihat masih kosong ya di sini karena artinya dia belum berubah Nah tapi dia naik tig jadi ini tuh di eh eksekusi di dalam SI state managementnya nah saya akan cobain in kremen lagi jadi enam ya dan seterusnya Nah jadi teman-teman kalau beneran pengin mengubah tiga kali misalnya ya teman-teman pakainya lambda seperti ini contohnya ya E Sori ya closure seperti ini ya function seperti ini nah jadi teman-teman bisa lakukan seperti itu juga sekarang kita bahas tentang object di state state itu bisa menyimpan jenis data javascript apapun termasuk kalau teman-teman mau menggunakan tipe data objek nah tapi kita tidak disarankan untuk mengubah objek yang terdapat di state nah lantas gimana kalau kita mau mengubah data objeknya Nah kalau kita ingin mengubah data objek di state-nya kita bisa gunakan objek baru lalu kita ubah dari atau datanya di state-nya menggunakan si set state-nya dengan objek yang baru tersebut jadi anggap aja ketika teman-teman mengubah walaupun contohnya satu ee field aja di dalam objeknya teman-teman sebenarnya bikin objek baru lalu teman-teman set ke dalam SI state-nya Nah kenapa agar m-rigger proses render ulang kalau teman-teman cuma langsung ubah di dalam objeknya itu dia tidak akan mengubah atau men-trigger si render ulang oke saat kita membuat data date kita harus memperlakukan data desate sebagai data yang immutable immutable artinya tidak bisa berubah nah walaupun sebenarnya di javascript semuanya mutable ya Atau bisa diubah tapi kita harus menganggap bahwa data di state itu adalah imutable jadi tidak bisa berubah artinya data di state hanya bisa digunakan untuk dibaca aja atau read only nah jikalau kita ingin mengubah data di state maka kita harus ubah menggunakan data baru yang artinya data lama tidak dimodifikasi ya jadi teman-teman bikin data baru lalu teman-teman tinggal eh ubah menggunakan si set state-nya nah ini adalah praktik yang biasa dilakukan di react walaupun pada kenyataannya memang semua objek di javaspt itu memang tidak imutable alias mutable tapi teman-teman harus e berpikir bahwa kalau kita mau menggunakan set kita harus menganggap data deser itu adalah immutable nah hal ini direkomendasikan agar kita tidak salah mengubah data langsung ya Jadi Padahal kita tahu bahwa mengubah data langsung itu tidak memicu proses render ulang nah untungnya di javasip kita bisa menggunakan spread syntax kalau teman-teman ingin meng-copy atribut dari objek jadi teman-teman misalnya mau bikin objek baru tinggal gunakan spreads ta gitu ya jadi copy semua atributnya ubah di yang baru lalu baru set ke state-nya jadi kita bisa lakukan seperti itu oke Ada tugas misalnya di sini teman-teman silakan bikin beberapa file yang pertama adalah e kontak html lalu teman-teman bikin lagi e kontak main jsx Lalu nanti di sini teman-teman bikin nanti kita akan bikin komponen kontak form ya Nah lalu teman-teman jangan lupa registrasikan ke Fed config-nya Oke kita akan coba langsung an Oke ini saya close dulu Jadi kita akan bikin contohnya hello world Saya copy menjadi kontak ya html Nah nanti di sini source-nya kita ambil dari kontak ya nanti kita akan buat Nah selanjutnya kita akan buat folder kontak ya Nah di sini lalu saya akan bikin main jsx oke kita create root dulu di sini nah ini kita ambil dari documen get Element by ID root n lalu kita render nah ini striak mode misalnya Nah nanti kita akan bikin elemennya di sini nah kita bikin elemennya ya nama file-nya di sini adalah kontak kontak form nah jsx oke export default function kontak form nah ini kita returnkan dulu misalnya di sini eh fragmen dulu deh oke selesai di sini kita tambahkan kontak form nah seperti ini Nah selanjutnya nya jangan lupa di dalam ee feed config-nya teman-teman tambahkan di sini kontak ya Nah ini kita tambahkan kontak html Oke selesai Nah sekarang pertanyaannya gimana isi dari kontak form-nya Oke kita akan lihat isi dari kontak form-nya oke di sini ya kita akan bikin di sini kontak ya Nah lalu di sini kita gunakan state nah di dalamnya kita buat eh inisial datanya adalah Eh name-nya kosong message-nya adalah kosong nah lalu kita akan bikin sebuah function untuk handle perubahan nama jadi di sini kalau misalnya namanya diubah contohnya ya nah kita langsung pengen ubah langsung ke objeknya kita gunakan set kontak Nah tapi di sini masalahnya kita harus bikin ee objek baru ya Nah caranya teman-teman bisa menggunakan spread syntax contohnya ya di sini objek baru spread syntax kita copy semua atribut di kontak khusus untuk nama kita ubah dari event kita ambil target elemennya lalu kita ambil value-nya termasuk untuk handle message change-nya Nah nanti kita akan coba Bikin form-nya di sini Jadi ini form kontakct ya Oh di sini input text ya lalu di sini value-nya kita ambil dari contact name lalu on change-nya ketika diubahnya kita handle name change dan di sini juga Sama ya Eh untuk message-nya ketika teman-teman ubah contohnya di sini eh message-nya kita akan Panggil handle message change Nah nanti n detailnya kita pengin Tampilkan di sini ini adalah kontak detailnya namanya siapa message-nya apa Oke kita akan coba ya Oke jadi di sini eh kita akan bikin dulu teman-teman bisa bikin Initial datanya contohnya cons di sini eh Initial data ya sama dengan nah ini misalnya name message nah seperti ini oke kita akan coba misalnya cons nanti adalah kontakct lalu set kontak Nah ini kita gunakan state nah ini Initial datanya Nah selesai jadi kita punya Oh ini d-nya pakai besar aja nah seperti ini Oke selesai Nah sekarang kita akan bikin function untuk handle ya name change Jadi kalau ada perubahan nama Nah kita akan coba Set kontak Nah kita akan harus bikin objek baru ya kalau kita bikin objeknya sendiri manual gitu ya ini kan capek ya jadi misalnya name-nya E kita ambil dari e titik target titik value misalnya nah tapi kalau misalnya yang lainnya misalnya message-nya masih tetap diambil contohnya dari kontak message seperti ini misalnya Gitu ya Nah I kalau cuma ada dua ya lebih gampang tapi gimana kalau ada 10 nah kita harus bikin 10 di sini capek banget gitu ya Nah lebih baik kita gunakan spread operator spread syntax ya t Di Sini dari kontak misalnya Ya nah tapi untuk yang name-nya kita ambil dari target value nah kita akan copy Nah untuk yang message ya message change-nya berarti ini message Oke selesai kita sudah bikin dua event handlernya Nah jadi sekarang kita akan bikin elemennya ya jadi di sini E saya akan bikin dalam Div misalnya jadi kita akan bikin H1 dulu misalnya kontak form-nya nanti di bawahnya H1 lagi ini kontak detailnya Nah selanjutnya di sini kita buat form ya Nah lalu kita akan tambahkan input misalnya di sini type-nya adalah text lalu eh place holder-nya misalnya di sini name ya Nah lalu di sini eh value-nya kita ambil dari kontak titik value Eh sorryi kontak titik name ya name nah lalu di sini kita tambahkan on change-nya itu kita Panggil handle name change nah seperti ini lalu kita akan eh tambahkan BR misalnya nah ini saya akan copy aja kalau ini adalah handle message change dan ini kita ambilnya value-nya dari message nah selesai Oke Nah sekarang artinya Setiap saya melakukan perubahan nama berarti kan akan dipanggil handle name change ya Nah berarti handle name change akan dipanggil berarti set kontak akan dipanggil ulang artinya akan men-rigger proses render ulang nah termasuk ketika saya panggil E atau ubah yang message-nya di sini ya Nah ini akan manggil handle message change set kontaknya akan dipanggil artinya akan mentrigger render ulang nah misalnya setiap render ulang Saya juga pengin Tampilkan di sini misalnya name ya saya ambil dari contact name lalu saya panggil ambil juga di sini message contohnya kakct message Nah kita bisa lakukan seperti ini Oke kita akan coba lihat ya hasilnya saya akan Buka di sini berarti nama file-nya tadi kontak ya titik html nah hasilnya seperti ini ini adalah kontak form Oh ya ini belum diubah message flash holdolder-nya nah seperti ini ya ini masih kosong ya karena memang inisial data nya adalah kosong saya akan coba tambah di sini Eko Nah lihat dia beneran berubah jadi Setiap saya melakukan perubahan di sini dia akan men-rigger render ulang J di sini chcho Kurniawan contohnya Hello react JS nah seperti ini nah jadi bisa ya Jadi kalau teman-teman pengin ee memasukkan data di dalam set itu berupa objek itu juga bisa tapi setiap melakukan perubahan di sini teman-teman harus Timpa menggunakan objek baru Nah jadi J caranya teman-teman bisa gunakan bantuan si spread syntax ini Oke gimana kalau tadi kan cuma satu level ya Eh objeknya ya Gimana kalau objeknya itu di dalamnya ada objek lagi atau kita bilang adalah nested object nah kadang-kadang kan ada kasus kita menggunakan nested object nah sama seperti sebelumnya kita disarankan untuk selalu membuat objek baru ketika teman-teman menggunakan atau mengubah state nah kadang-kadang memang menyulitkan ketika teman-teman menggunakan nested object apalagi kalau terlalu besar ya nested objecteknya Nah Oleh karena itu sebenarnya tidak disarankan teman-teman e membuat nested object yang terlalu dalam ya nah jadi jangan sampai teman-teman kebanyakan menggunakan nested object nah Untungnya ada salah satu library yang lumayan populer ya dan banyak digunakan oleh programmer react ya Nah namanya adalah imer library nah salah satu library yang sering digunakan ketika develop aplikasi menggun akan react adalah immer immer adalah library yang digunakan untuk membuat immutable object dari objek yang sudah ada nah jadi teman-teman dibanding bikin lagi manual apalagi kalau nested gitu ya ribet banget menggunakan spread syntaxnya teman-teman bisa gunakan imer untuk membuat atau meng-cloning objek baru Nah menggunakan imer akan lebih mudah dibandingkan menggunakan spread syntax terutama untuk objek yang sangat kompleks dan juga nested nah kita bisa lihat di sini ya kalau teman-teman mau nah Nah kita bisa lihat ini adalah immer ya Nah ini library-nya lumayan populer juga ya Nah nanti cara penggunaannya teman-teman bisa baca di dokumentasi er-nya di sini ya Nah kita akan lihat Nah di sini nah jadi simpelnya ya biasanya kan kita misalnya punya objek seperti ini ya Jadi ini sudah Aray dan dia juga dalamnya adalah objek kalau teman-teman mau bikin objek tiruannya ini agak ribet ya kalau seperti ini nah Biasanya kita lakukan seperti ini kalau kita mau bikin ini yang tanpa imer ya teman-teman e melakukan Slice contohnya lalu objek yang pertamanya kita Ubah dan-nya menjadi true Tapi ininya menggunakan sprlad operator jadi ini agak sedikit Ribet sekali ya kalau kita menggunakan imer eh tidak menggunakan imer kalau kita menggunakan imer kita bisa gunakan meod yang namanya produce ya atau function yang namanya produce bawaan dari immer lalu kita gunakan produce teman-teman masukkan ya di sini objek awalnya otomatis dia akan dicloning ya jadi dibuat ulang ya jadi objek baru nanti dia akan dipassing ke function di sini parameternya adalah draft Nah draft-nya teman-teman bisa modifikasi seperti biasa nah teman-teman tidak usah khawatir karena draft ini sudah objek tiruannya ya objek e cloningnya jadi teman-teman tinggal edit contohnya di sini dijadikan eh done true misalnya gitu ya atau Ditambahin lagi datanya selesai jadi ini adalah data barunya nah data baru ini bisa teman-teman masukkan ke react nah seperti itu jadi lebih simpel kalau terutama kalau kalau yang kompleks ya nah jadi nanti kita akan coba gunakan immer library jadi cara kerja er library itu sederhana jadi objek saat ini contohnya itu sama er library akan dicloning ya nanti dia dia akan jadi draft Nah nanti teman-teman bisa ngedit draftnya menggunakan function ya teman-teman bebas mau nambah mau ngedit dan lain-lain tidak usah khawatir data asinya tidak akan berubah nanti setelah itu hasil akhirnya akan menjadi hasil objek baru Nah jadi cara kerjanya simpel seperti itu oke untungnya ketika kita menggunakan eh react itu sudah disediakan juga library yang namanya use imer nah Biasanya kalau kita pakai hooks gitu ya di dalam react itu depannya itu ada use-nya nah Termasuk yang immer itu ada use immer Nah jadi library er juga bisa diintegrasikan dengan react ya ya react state maksudnya itu dengan mudah Nah kita bisa menggunakan library yang namanya use er Nah kita bisa lihat di sini Nah jadi ini adalah library use imer jadi teman-teman bisa pakai ini ya untuk mengganti eh state dari si react-nya jadi secara otomatis data saat teman-teman bikin use imer data ini ya itu secara otomatis akan disimpan di react state-nya Jadi enggak usah khawatir jadi kita enggak perlu eh manual ya Nah setelah itu ketika teman-teman mau update ya Nah contohnya kan di sini ada update person nih ya nah jadi teman-teman tinggal langsung update person di sini pakai yang ini nih eh function jadi ini adalah parameter drab-nya ini adalah objek cloningan barunya teman-teman tinggal modifikasi objek cloningan barunya itu jadi kita enggak perlu bikin objek lagi secara manual Oke jadi kita cukup gunakan nanti eh yang state-nya itu kita tinggal ganti menggunakan use er dan untuk update objectnya ya itu kita bisa menggunakan function sebagai parameter di update meodenya seperti yang tadi Oke sekarang kita akan coba gunakan yang use imer ya jadi biar lebih mudah Jadi teman-teman silakan tambahkan library use imer di sini eh teman-teman bisa gunakan NPM instal imer dan juga use imer Oke kita akan coba tambahkan Oke saya akan Buka terminal ya Eh saya akan Buka terminal ini saya akan stop dulu ya Nah kita gunakan perintah NPM install immer dan juga use imer Nah kita akan Coba instal Oke selesai saya akan coba cek ya di package json-nya apakah sudah ada nah sudah ada ya immer dan juga use imer nah Berarti sekarang saya akan coba jalankan lagi NPM Run Dev nah selesai Berarti sekarang kita bisa menggunakan use er Nah kita akan coba modifikasi yang kontak ini ya kita akan ganti menjadi use er Oke jadi kita bisa ganti jadi di sini saya akan ganti dari yang tadinya state menjadi use er jadi use imer contohnya jadi Isinya sama aja dan ketika saya update itu saya gunakan seperti ini contohnya set kontakct jadi kontak yang e baru ini nanti itu saya akan ubah namanya jadi ini nah termasuk yang ini message-nya saya akan ubah Nah jadi teman-teman cuma fokus melakukan perubahan datanya aja jadi teman-teman enggak perlu fokus lagi nge-cloning datanya karena itu sudah di-handle oleh imer library-nya jadi simpel sekali ya kita akan Coba ubah jadi di sini saya akan ganti use imer ya Nah seperti ini Nah kita ganti menjadi use imer state-nya saya hapus Berarti ya Nah lalu di sini set kontak itu tinggal kita ganti ini draft ya Eh sebenarnya draft Nah di sini tinggal draft-nya eh kita ganti eh name-nya itu menjadi i e e eh target ya lalu di sini adalah value nah seperti ini nah termasuk yang ini ini kita ganti juga ini yang name eh sorry message ya selesai jadi lihat lebih simpel ya kalau kita menggunakan use er Oke saya akan refresh saya akan Coba ubah cheko Nah lihat ya tidak ada yang berubah Nah jadi ini kalau teman-teman mau menggunakan eh objek di dalam state teman-teman bisa lakukan secara manual atau kalau pengin lebih gampang teman-teman bisa menggunakan library er ini sekarang kita bahas Arai di State sama seperti objectjek Ar disate juga harus kita perlakukan sebagai imutable data artinya operasi untuk menambah data mengubah data atau bahkan menghapus data di Aray kita harus buat Aray baru untuk update ke state-nya nah hal ini Memang agak sedikit menyulitkan Sebenarnya ya karena kita harus e buat tiruan atau copyan baru dari araynya nah Oleh karena itu sebenarnya kalau kita menggunakan library bantuan seperti imer itu akan jadi lebih mudah sebenarnya kalau kita memanipulasi data Aray atau juga data objek Oke ini kalau teman-teman tidak menggunakan library seperti Imar ya jadi E ketika teman-teman menambah data itu hindari penggunaan push atau unshift karena ini akan memodifikasi data yang aslinya Nah jadi kita harus gunakan Eh ini ya Eh concat ya sorry bukan kontak concat Lal di sini atau menggunakan spread syntax kalau teman-teman mau nah atau teman-teman kalau mau hapus data itu jangan gunakan pop shift atau splice ya tapi gunakan filter atau Slice atau kalau teman-teman pengin mengubah data teman-teman e jangan gunakan splice ya Atau eh Aray indeks ke berapa teman-teman ubah jadi jangan seperti itu tapi teman-teman gunakan map misalnya nah atau teman-teman kalau mau mengubah urutannya contohnya reverse atau short itu teman-teman bikin array baru jadi ini memang sebenarnya agak sedikit menyulitkan nah Oleh karena itu saya sarankan teman-teman pakai library seperti aja gitu ya kalau teman-teman mau e membuat data Aray atau data objek di dalam SI state Oke sekarang kita akan coba ya E menggunakan data aray di dalam eh state ya Nah kita akan buat dalam aplikasi eh task managemen misalnya ya Jadi teman-teman silakan bikin file html-nya task lalu di sini kita bikin eh main e js-nya di tas ya foldernya lalu kita bikin komponen tas-nya dan jangan lupa teman-teman registrasikan ke Fed config-nya ya Oke kita akan coba ya Oke saya akan buka Fed config dulu jadi ini kita bikin tas misalnya ya Jadi ini e tas html nanti kita buat Nah selanjutnya yang kontak html saya akan copy paste menjadi tas lalu di sini ini kita Ubah menjadi tas ya nanti kita bikin Oke jadi di sini saya akan bikin E task ya lalu saya akan bikin main jsx oke create root misalnya di sini eh dokumen get Element by id-nya adalah root lalu e render Nah kita striak mode Nah kita akan tambahkan nanti di sini tasnya Oke jadi di sini kita akan bikin task titik jsx ya Nah kita bikin export default function yaitu task ini return misalnya fragmen dulu Oke kita akan buat di sini berarti tas ya oke selesai Nah sekarang kita akan coba ya Oke ini adalah kode tasnya kurang lebih jadi di sini contohnya ee ada item ya jadi nanti ini adalah tas yang akan kita tambahkan ya Nah lalu di sini ada items ini adalah daftar tas yang sudah ada misalnya seperti itu Nah ini semuanya dua-duanya ee di sini contohnya saya pakainya state Nah tapi di sini pakainya imer ya Jadi ini adalah item yang akan kita tambahkan dan ini adalah eh objek dari items-nya Oke jadi di sini kita akan coba eh bikin handle change-nya jadi nanti ketika inputnya diubah lalu saya mau set itemnya kita Ubah menjadi value yang baru Nah lalu ketika kita di sini contohnya eh Klik tombol nanti add task barunya nah saya akan prevent default ya karena form-nya saya tidak mau submit lalu set items-nya ya kita akan tambahkan di draft items ini kita push data item baru nya jadi ini Kebetulan itemnya adalah Aray of string ya Nah lalu set itemnya saya jadikan kosong lagi biar dia keeset jadi kosong lagi Oke selanjutnya nanti setelah itu nanti kita bikin nih yang paling atas itu adalah form untuk bikin tasnya jadi di sini ada input ya E value-nya dari item on change-nya kita akan ubah si itemnya lalu ketika di sini tombolnya diklik ya Add lalu kita akan handle klik nah lalu di sini ya ini adalah tampilan dari tasnya jadi kita akan gunakan item map lalu di sini item indeknya misalnya jadi nanti key-nya itu pakainya indeknya lalu di sini adalah itemnya Oke kita akan coba Oke kita akan buat di sini ya jadi di sini eh kita buat dulu eh di sini item set item ini kita ambil dari state ya Nah ini default-nya string kosong misalnya lalu eh ini adalah items ya daftar items-nya ini set items ini use imer nah ini kita pakai Arai kosong dulu ya pertamanya Oke kita akan bikin function handle change ya kalau ada yang e berubah inputnya Nah kita akan set item ya Nah itu dari target value Oke setelah itu kita bikin eh handle clikck ya kalau di tombolnya diklik misalnya lalu prevent eh default ya lalu kita akan set items ya yang sekarang ini draft-nya contohnya nah yang array-nya itu draft-nya kita akan push ya data barunya adalah item yang kita tambahkan Nah selanjutnya set item lagi saya akan reset jadi string kosong Jadi saya kosongkan lagi di si itemnya Oke selesai Nah sekarang kita akan bikin elemen-elemennya kira-kira apa aja oke di sini kita akan Div gunakan Nah selanjutnya di sini H H1 ya Eh ini adalah form-nya create task nanti di bawah ini adalah list tasknya Oke selanjutnya di sini kita buat form input ini value-nya kita ambil dari item lalu on change-nya itu handle change nah SP l di sini kita tambahkan button add misalnya lalu di sini on ccknya kita handle klik ya nah selesai nah ini kalau kita coba tampilkan dulu ya ini saya coba tampilkan tas.html nah hasilnya seperti ini ya Nah sekarang kita tampilkan dulu nih eh l nya apa aja Nah di sini kita akan gunakan e Ul misalnya ya lalu di sini items map Nah dari tiap itemnya ya ini Oh ya ini coba items titik map nah ini saya pakai yang ini aja saya buat sendiri item index Nah kita akan eh buat ya di sini Oh ini sorry jangan kurungkur awal ee biar langsung return maksudnya nah Nah di sini adalah Le ya Nah di sini key-nya adalah index lalu value-nya adalah item selesai harusnya sudah oke ya Nah sekarang saya akan coba tambahkan contohnya di sini eh belajar html saya add nah dia masuk ya lalu belajar CSS nah lalu belajar javascript Nah Lihat belajar react JS Nah lihat jadi ini kalau teman-teman mau menggunakan Aray jadi teman-teman juga Bisa gunakan imer atau mau manual sendiri silakan ya untuk handle data array-nya yang penting nanti ketika set items itu teman-teman harus gunakan array baru Nah jadi seperti ini kalau teman-teman mau gunakan aray di state sekarang kita bahas tentang sharing state kadang-kadang kita ingin membuat state untuk beberapa komp yang selalu berubah bersama-sama misalnya atau sederhananya adalah sharing atau berbagi state untuk melakukan ini kita harus mengubah lokasi state-nya dari Tadinya komponen-komponen itu ke parent komponen mereka jadi contohnya misalnya kalau teman-teman ada state di satu komponen ya teman-teman pengin di-sharing ke komponen lain yang mau Tidak mau state-nya Tidak bisa di komponen tersebut teman-teman harus tarik keluar di parent komponennya agar nanti parent komponennya yang bisa sharing state ke child komponennya Nah jadi bisa teman-teman lakukan seperti itu ya Di mana cara sharing-nya adalah kita gunakan props nah misalnya pada form task Sebelumnya kita akan buat dua Child component komponen yang pertama itu adalah untuk tas task form-nya ya untuk menampilkan e input tasknya lalu komponen yang kedua adalah task list-nya jadi kita split Jadi dua komponen nah misalnya kita pengin e bikin state yang di-sharing ke task pom-nya dan juga task listnya Nah kita bisa guna ak eh sharing state tersebut di parent-nya berarti ya jadi misalnya parentnya nanti adalah komponen task Nah kita akan coba Oke jadi nanti kita split ya yang pertama itu kita akan buat task form yang kedua nanti adalah tas list ya Nah di dalam taskform Nah di sini kita akan bikin di sini e taskform kita akan keluarkan on submitnya jadi nanti ketika submit Itu kita eh lakukan di parentnya jadi di sini pakainya on submit aja ya nah lalu di sini Ee isinya kalau teman-teman perhatikan hampir sama ya Yang membedakan adalah di sini tidak ada itemsnya karena nanti items-nya akan di-sharing antara ini dan juga nanti adalah si eh task list-nya jadi di sini ketika tombolnya ini e diklik ya handle Click itu kita pakainya di sini handle Click itu adalah ini prevent default habis itu on submit itemnya item yang diubah di input ini nah jadi seperti itu Oke kita kita akan coba dulu deh ya oke di sini kita akan buat berarti eh task form ya jsx Oke jadi Isinya sebenarnya mirip seperti task list ya jadi saya akan eh copy isinya jadi export default function taskp nah seperti ini nah cuma kita tidak akan manage items-nya karena items-nya akan di-sharing ke task list nanti ya J ini kita hapus Nah artinya apa tidak ada set items ya ini tidak ada set items terus gimana caranya Nah kita akan e bikin profs di sini adalah e on submit ya ketika diubmit kita mau ngapain misalnya jadi ini kita hapus Nah ketika submit ya berarti kita di sini langsung aja nih ya jadi on submit Nah kita kirim teksnya Sorry item Maksudnya ya item nah seperti ini Nah berarti di sini list ini kita hapus ya Nah jadi kita lakukan seperti ini Jadi ini komponennya onsapint tuh belum diketahui ya E mau ngapain jadi nanti harus dikirimnya oleh si parent-nya Nah jadi seperti itu Oke selanjutnya kita akan bikin yang task list-nya kalau tasis-nya itu sederhana yang penting di sini ada items ya default-nya Misalnya Arai kosong nah simpelnya cuma nampilin item saja selesai udah enggak ada yang aneh kita akan coba sekarang ya Jadi kita akan coba buat di sini ini namanya adalah task list ya jsx Nah export default function tas list nah isinya sama seperti yang tadi Nah ini cuma kita hapus semuanya ya Jadi ini kita hapus Nah ini juga kita hapus form-nya ya ini kita hapus formnya Nah kita isakkan yang list ini Jadi ini items-nya ini kita ambil dari items nah ini default-nya ee dia ada Arai kosong misalnya nah seperti ini ini tidak perlu state sama sekali berarti nah seperti ini nah jadi kita sudah bikin yang tas listnya ya dan juga task pomnya berarti state yang bisa kita sharing itu adalah yang items ya yang eh semua data itemnya Oke jadi gimana caranya nah caranya berarti nanti Saat di tasnya itu di sini kita bikin items-nya ini adalah state-nya nah ini yang akan kita sharing Nah jadi kita akan sharing e ketika taskform ketika submit contohnya di sini nah kita di sini handle submit-nya Nah teman-teman tinggal ke set items Nah untuk yang task list-nya itu itemsnya kita ambil dari items seperti ini nah atau teman-teman Oke saya enggak mau deh handle submit-nya di sini saya mau di dalam e tasform silakan jadi yang kita sharing adalah items-nya tapi teman-teman juga harus sharing Nanti berarti set items-nya caranya seperti itu nanti deh kita akan coba modif juga ya dari contoh di sini ini berarti nanti yang tasnya ini berarti Ee Kita akan cap pakainya yang item saja seperti ini ini eh handle change-nya eh enggak ada misalnya ya Jadi ini handle on submit adanya ya Nah ini isinya seperti ini nah ini adalah item ya Nah seperti ini ini kita hapus Nah berarti yang ini itu di sini adalah taskform ya Nah taskpom ini adalah on submit-nya itu adalah handle on submit misalnya ya seperti ini lalu ini kita ubah lagi task list nah ini items-nya kita ambil dari items selesai ya kita akan coba Oh ya ini hapus dulu yang state-nya saya akan coba misalnya di sini Echo add nah masuk ya Nah Lihat sudah masuk seperti sebelumnya Nah jadi kalau teman-teman pengin sharing tinggal naikkan ke atas saja state-nya nanti state-nya ini baru teman-teman sharing ke beberapa e komponen childnya Nah kalau teman-teman beneran pengen sharing items ini ke dalam SI taskp Ya kemungkinan teman-teman di sini harus sharing contohnya di sini items dan juga set itemsnya ya kenapa Karena di sini kita butuh e ini set item contohnya sini oh ya enggak perlu ya se items-nya kita butuhnya set items-nya aja set items contohnya eh draft Nah draft-nya kita push Nah di sini item Nah kita bisa lakukan seperti ini juga kalau teman-teman mau jadi di tas ini ya yang kita sharing bukan ininya bukan handle submit-nya jadi di sini eh kita set items ya itu dari set item nah seperti ini Jadi ini saya coba Echo misalnya add nah lihat sama aja ya nah jadi teman-teman juga bisa lakukan seperti ini jadi kita bikin state lalu sharing-nya itu kita kirim itemsnya ke tasklist dan set items-nya kita kirim ke task form Nah jadi ini adalah sharing state sekarang kita bahas cara mempertahankan State kita sudah tahu ya kalau state itu terisolasi antar komponen Nah react itu melacak state mana yang dimiliki oleh komponen tersebut berdasarkan tempatnya atau posisinya di struktur ui jadi mungkin teman-teman e pengin bertanya ini gimana caranya ya si e state ini dipertahankan oleh si react ya dan kenapa antar komponen itu bisa berbeda-beda ya padahal misalnya komponennya komponen itu-itu juga nah react itu sebenarnya dia ngecek dari struktur ui-nya ketika posisinya sama maka dia akan menggunakan state yang sama jadi state-nya itu tidak akan direset Nah kita bisa mengatur Kapan kita ingin mempertahankan state Kapan kita akan merreset state-nya Nah di sini kita akan Bahas cara mempertahankan state nanti kita bahas di materi selanjutnya cara mer-reset state nah state sendiri tidak disimpan di dalam komponen Jadi sebenarnya state itu tidak disimpan di dalam komponen state Itu disimpan di dalam react jadi di dalam reactnya langsung makanya ketika teman-teman dirender ulang ennya state-nya mungkin tetap sama ya Kenapa karena state-nya itu disimpannya di react nah sedangkan ketika kita menggunakan state di komponen maka sebenarnya kita akan menggunakan state yang ada di react nah cara react bisa tahu state mana yang digunakan oleh komponen tersebut adalah Melihat posisi komponennya di struktur UI ketika komponennya sama posisinya tidak berubah tidak bergeser misalnya maka dia akan mengembalikan state yang sama Oke makanya nya sebelumnya Ketika kita bikin contohnya di sini ada elemen Div lalu di sini ada counter ya ini adalah komponen counter lalu kita bikin lagi komponen counter yang kedua nah ini secara struktur ui ya Secara e dom-nya ya itu sebenarnya posisinya berbeda ini di sini ini di sini dan state E dan react itu mendeteksi dia posisinya di mana ketika posisinya di sini maka Counter di sini ya data state counter contohnya dia akan dibuat berdasarkan ini ya Eh komponen ter dan posisinya harus di sini ketika posisinya dia berubah contohnya dari sini pindah ke sini misal saja gitu ya maka otomatis set-nya akan hilang juga jadi eh si reak itu akan menghapus state kalau ternyata sudah tidak ada lagi komponen di posisi tersebut atau berganti contohnya komponennya tadinya counter jadi form maka otomatis state-nya akan dihapus Ya nah tapi kalau tidak berganti posisinya Makanya kalau teman-teman render ulang terus-terusan di sini ya posisinya sama counter ini tidak akan berubah Jadi kalau kounternya tadinya udah lima ketika teman-teman render ulang maka counternya akan tetap lima ya kecuali teman-teman ini ya kecuali teman-teman ubah data counternya tapi intinya state-nya akan dipertahankan di posisi di mana si komponennya berada Oke kita akan coba Ya teman-teman silakan bikin sebuah file namanya counter html lalu kita akan buat juga eh Counter di sini foldernya main jsx dan juga komponen counter ya Nah ini jangan sampai nanti tertukar dengan counter yang sebelumnya sudah kita buat jangan lupa registrasikan ke feed config-nya Oke saya akan buka feed config dulu di sini saya akan buat counter ya ini file-nya adalah counter lalu kita akan copy yang kontak misalnya counter ini kita ganti counter Oke kita akan buat di sini counter Nah kita akan buat dulu main jsx create root dokumen get Element by ID root nah lalu kita render striak mode ya Nah kita akan buat counternya jadi di sini kita akan buat counter jsx e export default function counter Nah kita akan returnkan dulu eh fragmen dulu aja ya Kosong Nah di sini kita Panggil yang counternya nah ini ada dua counter pakainya yang counter di di sini ya jangan sampai yang counter sebelumnya Oke kita akan Buka di sini harusnya masih kosong counter html Nah masih kosong ya Oke sekarang kita akan eh buat ya di dalam Counter di sini eh dia ada counter lalu di sini ada eh con ya dan set con untuk state di sini lalu ketika eh di sini ketika diklik kita akan gunakan handle Click di sini lalu di sini con-nya kita naikkan satu persatu Nah kita akan coba nih jadi ini mirip seperti yang tadi ya oke cons con lalu di sini set con lalu use state 0 contohnya Oke kita akan bikin function handle klik set jadi K plus 1 ya nah selesai kita coba tambahkan Div misalnya Oh di sini H1 E ini counter adalah count lalu kita tambahkan button increment on ini adalah handle Oke kita lihat di sini ya incrementen Nah lihat kan Perhatikan ya Nah pertanyaannya Ini kan sebenarnya render ulang ya Nah pertanyaannya Lah kok bisa kounternya tidak keeset gitu ya Nah karena ketika teman-teman state maka si react itu bisa tahu posisinya ada di mana Kalau posisinya sama ketika state maka dia akan mengembalikan data state yang di posisi yang sama tersebut makanya tidak baik lagi ke nol walaupun iniisial datanya adalah 0 Jadi yang pertama kali Ketika saya refresh mungkin nol Ya karena kan belum ada state-nya nah tapi ketika saya incremen lagi itu object react-nya kan masih tetap ada ya Nah kecuali teman-teman refresh halaman browsernya otomatis ke reset ulang semuanya gitu ya tapi kalau tidak ya dia akan menggunakan di posisi eh state yang komponennya sama makanya dia akan balik data counter yang sama Oke jadi kalau teman-teman tambahkan dua counter seperti ini dia tidak akan tertukar jadi contohnya kalau kita tambahkan counter yang yang kedua contohnya di sini ya Nah Lihat ini counter ini counter lihat dia tidak akan tertukar Karena posisinya eh state ini dia akan di-maintain sesuai dengan posisinya jadi ini di posisi yang sini ini posisi yang sini gitu ya maka dia tidak akan tertukar data si counternya Nah jadi tenang aja ya kalau teman-teman ingin mempertahankan eh data state-nya yang penting posisi dari komponennya itu tidak berubah ketika dia berubah otomatis dia akan keeriset ulang nah seperti itu Oke kita bahas tentang posisi komponen jadi seperti yang dijelaskan sebelumnya react menyimpan state itu sesuai dengan posisi komponennya ketika posisi komponen berubah misalnya contohnya hilang dari tampilan layar secara otomatis state akan dihapus dari react-nya jadi otomatis dihapus gitu ya nah misalnya kita akan membuat komponen counter tapi bisa dihilangkan misalnya ya Nah Ketika nanti komponen tersebut dihilangkan dari tampilan maka secara otomatis state-nya juga akan hilang Ketika nanti ditampilkan lagi maka dia akan mulai dari awal lagi dari iniisial data lagi nah kita akan coba nih kita akan modifikasi si counternya saya akan tambahkan di sini ee bikin baru ya namanya adalah counter app contohnya ya Nah di sini counter app ini nanti kita akan tambahkan Show 2 misalnya kalau show 2-nya adalah true misalnya ya Nah di sini dia kita akan Tampilkan yang counter yang keduanya tapi kalau tidak Nah kita tidak akan Tampilkan misalnya seperti ini Nah di sini kita akan nanti pakainya check Bo gitu ya apakah dia dishow atau tidak Nah kita akan coba lihat hasilnya apakah yang eh counter kedua itu keeset atau tidak Nah kita akan coba lihat jadi di sini saya akan buat namanya counter app.jsx ya export default function Nah di sini counter app Oke saya akan bikin eh di sini Show 2 ya jadi counter yang kedua Apakah mau dishow atau enggak set Show 2 nah ini sama dengan use state ini default-nya misalnya true dulu jadi saya akan Tampilkan dulu Oke kita akan bikin function misalnya di sini handle change ya nanti kita pakai buat checkbox lalu set Show 2 itu dari targetnya eh checket ya Nah seperti ini Oke kita akan returnkan di sini Div nah yang pertama adalah counter ini jangan lupa jangan salah import dan counter yang kedua misalnya tapi counter yang kedua ini saya mau Tampilkan kalau show Dunya itu true ya jadi kita bisa pakai seperti ini Oke jadi di sini di Mine jsx kita ganti ini jadi counter app Nah jadi ini kita hapus Nah ini tampilannya tetap sama ya seperti ini nah jadi ini sama lihat nah tapi saya pengin ada di sini checkbox counter duanya bisa dihilangkan atau tidak jadi di sini saya akan tambahkan input ini type-nya adalah cek eh sorry checkbox ya Nah seperti ini Nah lihat ada checkbox ya kalau saya klik saya penginnya defaultnya kalau klik gitu ya dia muncul kalau tidak diklik berarti dia tidak muncul jadi di sini ini saya perbesar dulu ini Eh checked-nya itu saya ambil dari Show 2 ya Nah Saya save Nah itu lihat kecek ya lalu ketika di change nah saya mau handle change nah seperti ini ini saya tambahkan Tampilkan counter 2 nah seperti ini Jadi ini counternya sudah lima ya Jadi kita incremen ini 7 ini 5 ini incremen lagi nah saya akan hilangkan jadi ini Ketika saya ceklist nah dia hilang nah Ketika saya Tampilkan lagi nah dia balik lagi counternya ke nol pertanyaannya Kenapa kok counternya balik lagi ke nol karena kita sudah hapus si komponennya dari ee domnya ketika komponennya dihapus dari dom-nya artinya tidak muncul lagi di layar maka secara otomatis state itu akan hilang Nah jadi seperti itu jadi hati-hati juga kalau teman-teman e melakukan seperti ini otomatis dia akan hilang jadi teman-teman tidak mempertahankan si state-nya Jadi kalau teman-teman pengin pertahankan nilai state-nya pastikan teman-teman tidak menghilangkan dari si e layarnya Jadi kalau teman-teman hilangkan Ya otomatis dia akan reset lagi dari awal nah seperti itu Oke jadi Karena posisinya tadinya seperti ini Ini contohnya Div lalu di sini ada counter lalu ini counter yang kedua lalu ketika Coba kita render ulang ternyata counter yang keduanya itu kosong di sini ya tidak muncul Nah karena counter yang keduanya itu tidak muncul otomatis data state-nya ya state con-nya misalnya itu otomatis dia akan hilang juga jadi secara otomatis ketika hilang dari eh dom-nya maka otomatis state-nya juga akan dihilangkan oleh react-nya jadi ini memang digunakan agar datanya tidak terlalu numpuk banyak ya Di react-nya Oke sekarang kita bahas tentang komponen yang sama di posisi yang sama Nah tadi kan kita tahu ya kalau komponennya hilang maka datanya akan hilang Nah kalau terjadi kasus kita menampilkan komponen yang sama Ya nah tapi struktur ui-nya dia berada di posisi yang sama maka state akan dipertahankan oleh react yang artinya tidak akan dihapus nah ini kadang-kadang teman-teman harus perhatikan juga jadi jangan sampai ee teman-teman sebenarnya sudah pengin menampilkan data yang berbeda ya tapi ternyata dia masih menggunakan state yang lama nah hal ini mungkin akan membingungkan ya tapi kita harus mengerti hal ini kenapa karena react akan menyimpan informasi state itu mengikuti posisi dari komponennya kalau komponennya sama dan posisinya sama maka state akan dipertahankan Nah kita akan coba modifikasi lagi yang counter contohnya di sini saya akan bikin counternya pakai name ya jadi saya akan tambahkan name Nah di sini counternya ada nanya nya Nah jadi kalau saya klik ya nanti dia akan pakai seperti ini Nah kita akan coba ya Nah kita akan lihat nanti hasilnya Oke jadi di counternya saya akan tambahkan di sini name ya Nah nanti di sini eh saya akan tambahkan counter name nah seperti ini nah artinya sekarang saat saya eh menampilkan counter saya perlu masukkan name contohnya di sini adalah counter Echo misalnya ya Dan ini name ini misalnya counter Budi nah lihat ya Jadi ini counter Echo 11 counter Budi 0 nah seperti ini Nah sekarang saya akan tampilkannya di posisi yang selalu sama nah contohnya contohnya seperti ini ya Jadi kita e kalau Show 2 maka yang counter yang tadi misalnya yang Budi saya Tampilkan tapi ternyata kalau yang show Dunya false saya Tampilkan counter yang chcho misalnya nah apa yang terjadi gitu ya harusnya kan itu dua counter yang berbeda ya kita akan lihat jadi kalau show Ya saya akan Tampilkan counter Budi tapi kalau tidak saya akan Tampilkan counter Echo nah seperti ini ya nah jadi kita pakai eh ternary operator nah saya akan Refresh dulu ya dari nol nah ini counter Budi ya karena dia ditampilkan saya akan cobain kremen counter Budinya sampai 12 saya akan ceklis ini artinya dia akan berganti dari counter Budi jadi counter chcho saya ceklis Nah lihat yang terjadi ini sudah berganti jadi countercho tapi state-nya masih state yang Budi state yang lama nah pertanyaannya Loh kok bisa gitu ya Padahal kan saya harusnya penginnya sekarang itu menampilkan Budi gitu ya jangan yang Eko lagi tapi kok state-nya masih tetap pakai yang Budi nah sebenarnya ini bukan state itu bukan milik yang punya Eko atau Budi ya tapi milik komponen di posisi tersebut jadi ketika saya ganti-ganti itu sebenarnya kan komponennya sama ya dan posisinya juga sama tidak berubah makanya dia menggunakan state-nya yang sama Nah jadi teman-teman harus ngerti hal tersebut ya jangan sampai teman-teman bingung loh kok komponennya berubah tapi kok state-nya enggak berubah gitu ya padahal itu gara-gara posisinya sama Nah jadi pertanyaannya Kenapa state-nya masih sama hal ini terjadi karena secara struktur ui ya atau tampilan dom-nya itu Posisi komponennya ada di posisi yang sama persis jikalau misalnya posisi komponennya dan jenis J komponennya sama kecuali jenis komponennya beda ya karena kebetulan kita gunakan komponennya sama counter secara otomatis R akan mempertahankan state-nya nah kecuali teman-teman posisinya berubah atau komponennya berbeda maka rect akan menghapus state-nya dan dia akan gunakan state yang baru Nah karena kebetulan sebelumnya itu pakainya komponennya sama posisinya sama maka dia akan mempertahankan state yang lama jadi kalau secara tampilan tadinya seperti ini Div ya counter yang chcho counternya lima Ketika saya switch gitu ya Eh jadi counter yang dua atau counter Budi tapi state-nya tidak akan berubah karena secara struktur UI itu sama aja antara yang kiri berubah jadi yang kanan itu sama Nah makanya state-nya akan sama Nah jadi ini cara-cara mempertahankan state ya jadi teman-teman jangan bingung karena memang cara kerja dari e react state management-nya itu memang seperti ini Oke tadi kita sudah bahas ya tentang mempertahankan state Nah sekarang kita bahas gimana kalau kita memang pengin melakukan reset dari state-nya Jadi sekarang kita tahu gimana cara state itu dipertahankan oleh react ya Nah lantas Bagaimana kalau misalnya pada kondisi tertentu Kita memang ingin melakukan reset state tidak mau mempertahankan state-nya Nah ada beberapa cara untuk melakukan reset state-nya nah yang pertama Ya yang pernah kita lakukan kan di materi sebelumnya adalah dengan cara menghapus komponen dari tampilan ui jadi itu sudah otomatis tuh kalau misalnya komponennya kita hilangkan dari ui ya Dari dom-nya maka secara otomatis state-nya juga akan ikut hilang artinya akan tereset ulang nah ketika komponen hilang dari tampilan ui jadi secara otomatis state-nya juga akan ikut hilang beserta dengan komponennya oke nah cara yang lain itu adalah mengubah dengan komponen lain Jadi di posisi tersebut teman-teman Tinggal ubah aja ya Ee komponennya dengan komponen yang lain secara otomatis state-nya akan tereset jadi selain menghapus komponen Kita juga bisa mengubah komponen dengan komponen lain di posisi yang sama nah ketika posisi yang sama masih ada di struktur UI tapi ternyata komponennya berbeda secara otomatis state-nya juga akan direset nah misalnya sebelumnya kita menampilkan komponen counter lalu kita Ubah menjadi misalnya elemen paragraf saja nah secara otomatis nanti state-nya di dalam komponen counternya akan dihapus Nah kita bisa coba contohnya seperti ini jadi tadinya kan Div Lalu ada counter gitu ya kalau teman-teman ketika diubah gitu ya kita e ubah isinya yang tadinya counter itu kita Ubah menjadi P misalnya paragraf maka secara otomatis state yang ada di sini otomatis hilang Kenapa karena react mendeteksi kalau di sini posisinya sekarang sudah berubah nih bukan lagi Eh komponen counter melainkan elemen paragraf grap jadi secara otomatis si state counter ini akan dihapus dari react-nya Nah kita coba ya Misalnya jadi di sini kita ganti yang tadinya e counter name-nya misalnya Budi kita ganti jadi hilang misalnya seperti ini Nah otomatis kan elemennya berganti ya Nah kita akan coba lihat Oke jadi di sini tadinya kan kita pakainya Echo ya kalau chcho tuh kan kalau teman-teman Tampilkan atau tidak lihat dia tetap akan menggunakan state yang sama nah saya mau reset beneran gitu ya jadi saya akan ganti di sini JAdi misal saja P gitu ya hilang nah misalnya ya kita akan coba dia hilang ya saya akan coba lagi Nah Lihat counternya dia akan reset lagi ke nol karena ketika kita Klik di sini contohnya saya inkremen dulu ketika saya klik Itu state-nya otomatis dia akan hilang jadi saat saya Tampilkan lagi maka state-nya itu akan kembali ke awal jadi ke iniisial datanya Nah jadi seperti ini ya cara ya kalau teman-teman mau mer-eset dari state-nya jadi teman-teman juga bisa ganti dengan komponen atau elemen yang lain oke selanjutnya teman-teman juga bisa mengubah posisi dari komponennya Nah karena kan teman-teman sudah tahu ya react itu akan menyimpan state sesuai dengan komponen dan juga posisinya kalau komponen dan posisinya sama maka dia akan menggunakan state yang sama kalau berbeda ya entah itu komponennya atau posisinya berganti maka State state-nya juga akan tereset lagi nah artinya kalau posisi komponennya diubah misalnya atau dipindahkan secara otomatis state-nya juga akan terreset Oke misalnya ya Jadi sebelumnya misalnya Eh ini posisinya kita ganti tadinya kan pakai Div misalnya nah sekarang saya pakai section nah seperti ini Nah maka otomatis dia berubah posisinya yang tadinya e di bawah Div sekarang berubah jadi di bawah section otomatis nanti dia akan menggunakan yang berbeda jadi nanti kurang lebih gambarnya seperti ini tadinya kan Div Div counter kita ubah di sini tadinya Div jadi section jadi secara UI Sebenarnya dia berubah karena di sini elemennya berubah jadi bukan posisi lokasi ya bukan tapi secara struktur ui-nya dia berubah karena tadinya Div Div counter Jadi sekarang Div section counter Nah sekarang kita akan coba praktiikkkan Oke jadi misalnya di sini sekarang kita akan ganti Misalnya ya Jadi Yang Pertama kalau dia Show 2 ya Nah kita akan coba tampilkan nanti counter kalau tidak kita tampilkan ee yang pakai ini misalnya ya yang pakai ini misalnya pakai Div ya Nah ini counter misalnya kalau Show 2 itu name-nya misalnya Budi gitu ya Nah kalau misalnya dia tidak Show 2 kita pakai section misal aja seperti ini gitu ya atau teman-teman pakai paragraf dan seterusnya lah counter ini ini e name contohnya di sini chcho misalnya seperti ini Oke selesai ya Nah ini Ca incrementen Nah kalau saya klik ini Nah lihat dia berubah menjadi eeko dia ada di dalam section nah ini saya incremen lagi saya klik nah dia berubah jadi Budi lagi dan dia reset ke nol lagi Ya Nah seperti ini nah jadi teman-teman juga bisa ganti ya contohnya Ini Div ini section jadi dia posisinya berubah sebenarnya Oke Oh ya tadi kalau teman-teman misalnya Eh tadi udah ya nah teman-teman misalnya pengin juga posisinya berbeda nah selain mengubah posisi kita juga bisa jika komponennya sama Berada di posisi yang berbeda secara otomatis state-nya juga akan berbeda Nah ini mungkin akan membingungkan ya karena secara do mungkin posisinya kayak sama tapi secara posisi di komponen ini sebenarnya berbeda jadi teman-teman bisa lihat Conto Contohnya seperti ini nah ini show and gitu ya jadi counter lalu eh Show 2 and counter ini secara sekilas mungkin kayaknya ini posisinya sama deh padahal sebenarnya ini beda ya kalau menggunakan n ini sebenarnya ee ini beda nih ya posisinya ini Memang agak sedikit membingungkan sebenarnya Ya nah tapi sebenarnya ini posisinya berbeda antara ini dan ini ya jadi posisinya tuh tadinya itu sebenarnya bareng-bareng kayak gini Jadi dif ini counter sat ini counter du sebenarnya posisinya seperti ini ketika teman-teman menggunakan nn seperti ini karena secara otomatis dua-duanya ini sebenarnya ditampilkan ya Nah cuma kalau ininya true eh ininya false sorryi ini yang muncul ininya true ininya yang muncul tapi secara komponen itu sebenarnya posisinya langsung keluar dua seperti ini jadi di sini yang counter ini posisinya yang ini jadi secara ini ini sebenarnya beda posisinya Nah jadi kalau teman-teman ini Tampilkan ini hilangkan ini hilangkan ini tampilkan maka dia ee state-nya itu sebenarnya dia berbeda otomatis dia akan keeset kita akan coba ya Jadi kita lakukan seperti ini misalnya Oke jadi ini saya ganti lagi ini kalau show ya saya n sorry ini n counter name-nya adalah Budi nah kalau tidak misalnya ya ini yang Eko misalnya nah seperti ini oke Ini Budi ya tetap saya incremen lalu saya ceklist Nah lihat dia cheko dia incremen lagi saya Budi lagi nah dia keiset lagi jadi secara posisi sebenarnya ini berbeda nih Nah makanya banyak eh orang eh programmer y kalau bingung gitu ya posisinya sama caranya agar bisa berbeda state-nya dia biasanya menggunakan caranya seperti ini menggunakan logical n seperti ini jadi secara posisi Sebenarnya dia berbeda ya Secara elemennya Oke atau sebenarnya cara yang direkomendasikan adalah menggunakan key Nah jadi cara yang umum biasanya digunakan untuk me-reset state yaitu menambahkan key pada komponennya jadi saat komponennya yang sama ditampilkan di posisi yang sama ya walaupun komponennya sama asalkan q-nya berbeda maka react akan menganggap ini adalah komponen yang berbeda Nah dengan demikian secara otomatis state-nya akan direset nah kayaknya ini cara yang paling ideal Jadi teman-teman kalau merasa ini bakal ada posisi komponen yang sama dan teman-teman pengin mer-reset state-nya teman-teman tinggal bedakan dari key-nya saja ya Nah ini adalah cara yang paling direkomendasikan dibanding teman-teman harus mengubah-ngubah posisi dari komponennya Oke jadi simpelnya contohnya kalau Show 2 eh Counter di sini q-nya sat misalnya dan ini counter q-nya 2 misalnya seperti ini Nah jadi kan kalau yang tadi kita lakukan misalnya pakai terary operator misalnya Show 2 misalnya ya E ini misalnya counter seperti ini ini counter ya misalnya seperti ini ini kan kalau misalnya name-nya adalah Budi Ini name-nya adalah eeko itu kan nanti dia tampilnya pakai state yang sama ya Nah Lihat state-nya sama ya Nah kalau saya tambahkan ke di sini key contohnya Ini Budi misalnya ya Dan ini juga saya tambahkan key juga ini eeko misalnya nah seperti ini ini dianggapnya state-nya e Sori komponennya berbeda jadi saat saya incremen Budi saya Tampilkan yang cheko Nah lihat dia reset ke nol lagi Nah ya seperti ini nah jadi ini adalah cara yang paling ideal teman-teman tinggal tambahkan Q jadi ini adalah beberapa cara kalau teman-teman ingin me-reset state-nya sekarang kita bahas tentang reducer nah sebelumnya kita sudah bahas banyak sekali tentang Hook state ya itu menggunakan state nah Selain itu terdapat fitur Hook state yang lainnya yaitu adalah reducer Nah itu menggunakan function yang namanya adalah use reducer Nah kita bisa lihat di sini detailnya ya Jadi ini adalah function eh use reducer nah ini adalah Hook state yang lainnya selain menggunakan state Oke kita bahas tentang reducer sekarang ya Jadi pada kasus kita membuat komponen yang memiliki banyak proses melakukan update ke satu state yang sama kadang menyulitkan untuk memaintainnya Nah karena terlalu banyak event handler yang harus kita buat ya untuk mengupdate ke state yang sama nah pada kasus seperti itu kita bisa mengkonsolidasikan semua logik atau men matkan semua logic untuk update state-nya itu di sebuah function di luar dari komponennya atau kita bilang namanya adalah reducer Nah agar ada gambaran kita akan coba membuat komponen dengan state yang banyak di-update ya tanpa menggunakan reducer terlebih dahulu nanti kita akan coba pindahkan menjadi reducer nanti kelihatan perbedaannya Seperti apa Oke kita akan buat ya namanya adalah note App ya di sini teman-teman silakan buat ada banyak file yang akan kita buat jadi ee note html Lalu ada notde di sini foldernya jadi main jsx-nya ada notde app notde form note list dan juga notde lalu kita registrasikan ke feed config-nya Nah kita akan coba buat file-nya terlebih dahulu ya Oke kita akan buat di feed config-nya dulu di sini saya akan buat not ya ini nanti note html Oke saya akan copy yang kontak di sini adalah notde html nah ini nanti kita buat foldernya adalah notde Oke selesai kita akan buat foldernya adalah notde ya lalu kita akan buat main jsx ya lalu di sini create root documen get Element by id-nya adalah root lalu kita akan render stak mode Nah nanti di sini kita eh Tampilkan yang eh note app-nya ya Nah Oke kita akan mulai dari yang pertama kita bikin yang notde form-nya dulu jadi ini adalah form untuk eh memasukkan data node misalnya ya jadi kita bikin di sini notde form nanti ada teksnya ya Nah di sini ada set TS juga untuk state ini nanti ada handle eh change ya untuk mengubah data teksnya Lalu ada klik ya untuk menambahkan data not-nya Nah di sini kita tambahkan sebagai props Nah kita akan coba langsung praktikan saja jadi kita akan buat yang kedua adalah notde form ya jsx Oke kita bikin export export default e ini adalah notde form nanti ada props ya namanya adalah e on add notde ya seperti ini nah saya akan coba perbesar dulu Oke kita akan buat dulu teks e teks ini ya nanti set Tex sama dengan state ini kita isi kosong dulu ya Oke selanjutnya kita bikin function handle change ya kalau nanti ada perubahan kita akan set TS dari eh target Ti value lu kita bikin function yang handle klik ya Nah untuk yang handle Click di sini e set tnya Kita reset ya jadi Kosong nah lalu kita add eh note ya lalu di sini adalah teksnya jangan lupa nah ini enggak masalah ya posisinya walaupun di bawah karena ini tidak akan mereset teks aslinya ya karena di sini kita pakainya snapsot Nah jadi teman-teman harus paham juga oke lalu kita akan returnkan contohnya di sini nah kita akan returnkan jadi ini adalah e input misalnya ya Eh place holdolder-nya misalnya add note lalu value-nya kita ambil dari text ya Nah lalu on change-nya itu adalah handle e change ya Nah selanjutnya kita tambahkan button add lalu on cikcknya kita tambahkan handle klik oke selesai kita sudah bikin untuk Note form-nya Nah kita lanjut ke komponen yang lainnya yaitu adalah note-nya jadi ini untuk menampilkan not-nya ya jadi di sini kita tambahkan ya note nanti ada not-nya apa lalu kalau diubah nanti jadinya seperti apa ada juga Eh on delete-nya ya Jadi ini adalah event- event-nya jadi di sini kita akan coba dulu apakah dia lagi diedit atau tidak ya lalu kita buat ee ini simpan dalam variabel komponen Nah di sini adalah function untuk handle change eh text-nya ya Jadi kalau diubah teksnya contohnya kita akan bikin Note baru ya di sini misalnya itu kita ambil semua not-nya tapi teksnya kita edit lalu kita change menjadi new note misalnya ya ini new harusnya ya lalu kita cek kalau dia lagi Diedit ya prosesnya ya nanti kita kembalikan komponennya berupa input teks yang dieditnya tapi kalau tidak Nanti kita akan ke kembalikan contohnya di sini komponen yang e lagi tidak dieditnya Nah nanti di sini ada handle change done ya kalau misalnya sudah selesai Diedit ya Nah di sini juga nanti kita akan tambahkan di sini ya check bo-nya ya apakah dia udah selesai atau belum ya Nah kalau diklik berarti nanti dan-nya sudah selesai Nah di sini ada komponennya tadi yang kita tampilkan Nah di sini ya ini tombolnya ada untuk delete juga nah ini maksudnya Seperti apa Jadi nanti akan ada tampilan misalnya ee checkbox-nya ya kalau di chcklist berarti dan berarti sudah selesai Nah kalau tidak dicekis berarti belum Dan nanti di sini komponennya kalau misalnya dia ada mode editing nanti inputnya berupa teks Nah jadi kalau misalnya dia tidak diedit bentuknya cuma teks biasa tapi kalau dia lagi diedit bentuknya adalah input teks Oke kita akan coba ini mungkin agak sedikit panjang ya untuk Note ini Oke kita akan tambahkan di sini e note. jsx Oke kita akan buat dulu Berarti yang pertama di sini export eh default function yaitu adalah notde ya nanti dia ada note-nya note itu nanti kita harapannya adalah objectjek ya Jadi bukan e string ini objectek ini ada on change ada on delete Oke jadi kita akan buat nanti itu ada mode edit ya jadi is [Musik] editing lalu set is editing Oke kita akan buat state di sini ini default-nya false ya jadi dia tidak mode edit misalnya nah kita akan simpan di komponen di sini nanti untuk diender Nah jadi nanti kita cek dulu ya is editing kalau dia diedit nah ini komponennya kita akan isi nah ini adalah contohnya n yang ditampilkan nanti adalah input ya Eh input di sini value-nya itu kita ambil dari note titik Tex nanti ya Nah on change kalau di edit kita pengen note di sini juga dia ikutan di edit jadi di sini kita akan tambahkan handle change text ya Jadi texs-nya bisa diedit jadi kita bikin function handle change text ya Nah kita akan coba edit ya kita akan bikin new note ya sama dengan ya kita copy pakai spread operator nah ini teksnya ini kita ambil dari e target value nah setelah kita edit ya kita bikin E objek baru kita akan tambahkan ke onchange ya Nah itu adalah new note-nya jadi nanti real implementasi onchange-nya ada di props di sini oke Nah selanjutnya di sini misalnya saya akan tambahkan button ya ini buttonnya adalah save ya simpan Nah kalau simpan e oncicknya misalnya saya mau eh set is editing-nya ya menjadi false jadi dia tidak mode edit lagi nah selesai ya oke nah sekarang kalau dia tidak mode editing Nah kita tampilkannya normal gitu ya jadi teks biasa jadi di sini kita tampilkan misalnya komponen sama dengan langsung aja ya jadi di sini not titik Tex ya Nah tapi di sini kita ada tombol lagi edit ya nah nah kalau mau tombol ini kan tombolnya save ya berarti selesai diedit tapi kita juga pengin ada tombol e edit di sini nah ini adalah tombolnya edit Tapi berarti set is editing-nya jadi true Jadi nanti dia akan mode edit nah selesai ya Nah setelah itu Sekarang kita akan Tampilkan jadi kita return di sini misalnya ya di sini saya tambahkan label eh lalu saya akan tambahkan input ya Eh type-nya misalnya di sini checkbox ya lalu eh checket-nya itu kita eh ambil dari note titik dan Apakah dia sudah selesai atau belum not-nya lalu on change Nah nanti kalau diedit misalnya nah dia harus berubah dan-nya ya Nah nanti kita bikin lalu di sini saya akan Tampilkan si komponen yang tadi kita bikin ya lalu di sini saya tambahkan button on cikck Nah di sini dia bisa di-elete misalnya nya ya ini buttonnya button delete harusnya delete berarti ini kita Panggil ya Nah nanti adalah on delete ya Nah ini note-nya yang akan di-delete jadi kita Panggil yang dari props-nya ya yang ini yang on Delete nah sekarang di sini kalau dia di chcklist Ya checkbox-nya saya akan eh ubah ya jadi di sini function-nya handle change dan jadi kita akan bikin new note ya sama dengan titik titik titik note lalu kita bikin dan-nya itu kita ambil dari e target checket ya Nah seperti ini lalu kita akan coba eh on change lagi kita kirimkan si new note-nya Oke selesai Berarti ini onchange adalah handle change done Nah jadi seperti ini Jadi intinya nanti kita tambah e Tampilkan input ya Ada checklist jadi apa dan atau tidak lalu di sini ada komponennya komponennya itu tergantung ya kalau dia mode editing dia keluarnya input dan tombol save kalau dia bukan mode editing kita akan Tampilkan text dan juga e edit ya nah habis itu di sini ada tombol delete untuk menghapus si eh note-nya nah tapi nanti untuk on change dan on delete-nya ada di sini ya Jadi tidak disimpan di dalam komponennya TAP tapi nanti dikirim dari props Oke selanjutnya kita bahas yang not list-nya ya Nah ini not list-nya kita akan coba buat ya untuk menampilkan eh daftar note-nya jadi simpel banget not list-nya ada notes ada on change dan juga on delete-nya Nah di sini berarti notes eh Map ya lalu notde kita akan gunakan Le key eh menggunakan dari note ID lalu kita Panggil yang note ya Nah seperti biasa ini kita tambahkan Note onchange-nya tambahkan on change dan juga on delete-nya kita tambahkan on delete Oke kita akan coba Oke saya akan bikin di sini misalnya not list ya jsx Eh export default function not list contohnya Jadi ini nanti eh dia ada properties-nya ya hampir mirip ya di sini saya akan tambahkan misalnya notes on change dan juga on delete Jadi ini nanti kita akan eh kirim langsung ke eh Child elementennya jadi return di sini e Ul contohnya nah saya akan pakai notes ya titik map lalu di sini notde nah ini kita tambahkan e le contohnya ya Nah di sini kita tambahkan q ya biar beda ini note ID nah lalu di sini adalah notde kita ambil nah ini not-nya kita ambil dari note ya ya lalu eh on change-nya kita ambil dari on change lalu on delete-nya kita ambil dari on delete selesai jadi kita sudah bikin seperti ini nah terakhir berarti kita tinggal bikin note app-nya ya Jadi untuk menjahit semuanya ya di sini saya akan bikin noteapp.jsx Oke simpelnya kita bisa lihat di sini Jadi kita akan bikin contohnya Initial notes-nya biar tidak perlu memasukkan dari awal ya lalu id-nya misalnya nya dari 0 nanti 1 2 3 dan seterusnya Nah di sini eh notes-nya saya akan gunakan imer ya biar lebih gampang Nah nanti kita di sini tinggal eh handle untuk add notes-nya Seperti apa ini untuk handle change note-nya Seperti apa ini untuk handle delete note-nya lalu kita akan coba tampilkan note App ya dari note form-nya di atas ya lalu di sini not list-nya Nah kita akan coba Oke kita akan buat export eh default function di sini note App Oke kita akan buat dulu di atasnya misalnya LED ID sama mulai dari 0 ya lalu eh cons Initial notes Ya teman-teman silakan tambahkan contohnya di sini saya tambahkan e id-nya ID plus+ misalnya lalu teksnya learn html lalu dannya false misalnya ya seperti ini jadi kita tambahkan beberapa ini misalnya CSS dannya true ini misalnya javascript ya lalu di sini react JS Oke selesai Nah sekarang di sini berarti kita akan bikin eh notes ya lalu set notes itu saya akan gunakan use imer ya Nah di sini Initial notes-nya Oke selesai Nah sekarang kita tinggal return kan di sini ya ini misalnya Div nah H1 Misalnya ini adalah not app lalu di sini kita gunakan not form ya Jadi kita gunakan not form eh Nah teman-teman harus tambahkan add e on add note-nya ya nanti action-nya apa Nanti kita buat lalu not list nah ini notes-nya kita tambahkan notes Lalu ada on change-nya ketika dirubah not-nya itu handle misalnya nanti kita buat juga ya lalu on delete-nya kita buat juga nanti nah selesai Sekarang kita akan buat yang on add-nya jadi handle e Sorry function handle e add not misalnya ya Nah seperti ini Oke nanti kan parameternya adalah text ya Nah kita akan coba tambahkan simpel langsung aja karena kita pakainya imers ya jadi e set notes langsung ini adalah draft-nya oke Oke jadi draft-nya kita push langsung ya Nah di sini eh langsung object id-nya kita ambil dari ID plus plus misalnya lalu eh teksnya kita ambil dari texs lalu dan-nya kita set jadi false dulu misalnya yang pertama Ya nah selesai ini berarti handle add note Oke sekarang kita bikin lagi function handle change not ya Nah ini adalah e notes-nya nah seperti ini Oke caranya gimana kita gunakan set notes ya Nah ini adalah draftnya Nah kita akan coba ambil indeknya dulu ya yang diubah ya caranya kita gunakan draft find index yaah itu yang itemnya itu item id-nya itu sama dengan not ID nah setah kita dapat nah barulah kita ubah caranya adalah tinggal draft index itu kita ubah dari Note yang baru Nah seperti ini nah termasuk yang eh ini ya yang remove juga sama atau delete change delete note misalnya handle delete note Maksudnya kita ambil dulu indeksnya yang dapat setelah dapat indeksnya gitu ya lalu kita gunakan draft eh di sini splice contohnya ya E kita hapus indeks dari mulai indeks sejumlah satu data Jadi kita hapus Oke jadi ini onchange-nya adalah ee handle eh change note dan ini handle delete note nah seperti ini nah selesai deh ya nah jadi lumayan panjang Oke kita akan coba sekarang Tampilkan ya yang note di sini ya note html Oh sorryi kita lupa di main jsx-nya ini kita tampilkan note App selesai Nah jadi deh seperti ini jadi kalau saya tambahkan misalnya di sini belajar eh not GS ya saya tambahkan nah muncul di sini nah saya mau hapus saya tinggal klik Delete nah dia hilang Saya mau edit di sini contohnya edit nah dia berubah ya jadi input Java skip dasar misalnya Saya save jadi seperti ini saya ceklis ini berarti dia sudah Done ini sudah Done ini sudah Done misalnya saya mau hapus yang ini lihat dihapus saya hapus saya edit lagi react JS dasar misalnya Saya save lalu misalnya E learn view JS misalnya nah dia muncul seperti ini nah ini kalau kita lakukan secara manual ya nah jadi semuanya kita bikin jadi kita bikin handle function dan lain-lain jadi kompleksitasnya kita bakal bikin banyak handle function seperti ini Nah sekarang kita akan coba ya migrasiin kode yang sudah kita buat ini ke reducer Oke sekarang kita akan fokus ke eh notde app jsx ya jadi komponen dari note app-nya Nah kita bisa lihat bahwa terdapat tiga aksi untuk melakukan update notes-nya yang pertama adalah add yang kedua update dan juga yang ketiga adalah Delete nah dan itu semua disimpan di dalam function yang berbeda-beda ya dan dari event handler yang berbedabeda juga nah menggunakan reducer agak sedikit berbeda kalau kita menggunakan state langsung ya Jadi agak sedikit berbeda approach-nya nah alih-alih membuat e atau Sorry memberitahu react apa yang harus dilakukan dengan mengubah state-nya Nah kalau kita menggunakan reducer itu kita memberitahu react apa yang sudah dilakukan oleh pengguna atau aksi apa yang ingin d lakukan oleh pengguna nah implementasi logic dari action-nya nanti itu dilakukan di tempat yang terpisah atau kita bilang di reducer-nya Jadi bukan di eh ininya bukan di set handler-nya ya Oke jadi yang pertama yang harus kita lakukan adalah kita akan membuat reducer function reducer function adalah kode di mana kita menyimpan logic kita jadi semua logiknya ya untuk update yang tadi tiga itu kita simpan di satu function mungkin kelihatannya loh bukannya malah malah jadi besar ya memang tapi kita bisa lihat jelas ya semua logic yang ada nah reducer function itu memiliki dua parameter parameter pertama adalah state saat ini dan parameter kedua itu adalah Action objectnya Nah return function-nya adalah state selanjutnya jadi return function adalah state-nya jadi kembalian dari e datanya Selanjutnya apa seperti itu Oke kita akan coba ya nah jadi kita akan bikin di sini contohnya function-nya namanya notes reducer jadi ini adalah notes-nya lalu di sini adalah action-nya nah action di sini ini bentuknya objek juga bisa aja ya Jadi teman-teman bebas sebenarnya J contohnya di sini e action-nya nanti isinya adalah objectek lalu dia akan ada type kalau action type-nya misalnya E add note misal saja ini teman-teman bebas ya mau membuat e tipe action-nya apa Nah lalu saya berarti di sini harus bikin array baru ya isinya dari Aray lama ditambahkan data objek yang baru di sini nah seperti itu kalau dia change note contohnya nah saya akan coba melakukan eh dari notes yang lama ya saya Map saya cek kalau id-nya sama dengan action ini ya id-nya nah saya akan eh ganti ya Nah kalau tidak ya saya akan pakai balikan yang sama nah atau kalau delete ya Nah itu saya akan filter aja di mana yang id-nya tidak sama dengan yang action Id ini Nah kalau bukan tig tiga-tiganya ya saya balikin langsung eh notes-nya aja nah seperti ini nah jadi terpusat seperti ini jadi kita bisa lihat kira-kira aksinya apa aja sih ya e ke dalam SI notes ini nah detailnya kita bisa lihat di satu function reducer ini jadi nanti ketika kita eh mengubah state-nya yang kita ubah tidak langsung datanya melainkan kita memberi action-nya saya mau action-nya contohnya add note datanya Ini saya mau action-nya adalah change note datanya ini jadinya seperti itu Nah kita akan coba Bikin yang notes reducer dulu Oke jadi di sini kita akan bikin ya sebuah eh function di sini function notes reducer misalnya seperti ini nah jadi teman-teman bebas ya mau bikin function-nya di mana aja saya Bikinnya di sini misalnya jadi ini adalah notes-nya ini adalah action-nya nanti apa ya nah jadi kita akan cek dulu ya menggunakan switch kalau action type-nya contohnya ya jadi nanti kita bikin atributnya adalah type ini case datanya adalah add note ya Nah kita mau ngapain ya Nah lalu case misalnya eh dia itu change not ya Nah kita mau ngapain ya Eh case kalau dia delete note itu kita mau ngapain nah default-nya ya kalau bukan tiga-tiganya saya akan returnkan Notes aja ya nah seperti ini Oke kalau add note berarti kita harus mengembalikan notes yang baru ya eah berisi eh tambahan dari notes yang kita tambahkan jadi kita bisa gunakan eh spread operator ya tig notes jadi kita copy yang notes-nya lalu kita Tambahkan lagi objek baru di sini yang id-nya kita ambil dari ID plus+ lalu di sini misalnya teks-nya kita ambil dari action text ya lalu kita tambahkan dan-nya menjadi false nah misalnya seperti ini Nah kalau misalnya change note ya Nah berarti kita harus ubah nih Nah jadi kita akan Return kan notes yang eh ada ya notes yang adanya itu kita Map ya kita transformasi itu note ya kita cek dulu nih ya Nah kita cek di sini saya akan coba cek kalau misalnya not-nya E id-nya itu sama dengan action ID nah Berarti ini note yang harus kita ubah Nah berarti kita balikan data baru ya isinya kita copy dari note nah lalu kita akan ubah teksnya itu kita ubah action titik Tex ya Nah lalu kita dan-nya juga kita ubah action tik dan ya Nah kalau bukan ya bukan ID yang tersebut ya kita balikkan note-nya lagi nah seperti ini ya nah jadi kita bisa lakukan seperti ini misalnya Oke Oh ini bukan node ya node sor nah seperti ini Oke selanjutnya kalau Delete nah kita akan returnkan misalnya nya notes Ti filter aja ya Jadi kita hapus ee notde contohnya di sini kita hapus yang note tik id-nya itu eh sori kita ambil yang note titik id-nya tidak sama dengan action ID nah seperti ini jadi kalau yang sama berarti kita e hapus Berarti ya nah jadi kita sudah bikin yang notes reducer-nya Nah sekarang gimana cara menggunakannya nah cara menggunakannya ya kita bisa gunakan use reducer lalu di sini adalah ee reducer function-nya contohnya di sini noes reducer kalau di sini Initial datanya data pertamanya ya Nah kita gunakan Initial noes ya not seducer Nah return-nya itu bukan set function melainkan adalah dispatch dispatch ini adalah function yang teman-teman gunakan untuk mengirimkan object action-nya contohnya kita ganti yang handle add note-nya menjadi dispatch type-nya adalah add notote teksnya kita kirim dari teks yang di sini lalu contohnya di sini dispatch eh type-nya adalah change not lalu kita akan e tambahkan di sini id-nya note ID teksnya e not t contohnya dan-nya not dan atau teman-teman bisa gunakan spread operator ya Nah atau di sini dispatch contohnya type-nya adalah delete note lalu id-nya adalah note ID nah jadi nanti yang kita kirim di sini justru perintah action apa yang nanti kita kirimkan ke notes reducer jadi Bedanya cuma itu aja sebenarnya Nah jadi nanti di tempat mana pun ketika teman-teman butuh Oh saya mau mengirimkan aksi Change at teman-teman tinggal pakai ini aja dispatch change note selesai jadi lebih simpel ya Nah kita akan coba nih jadi kita akan edit jadi kita tidak perlu modifikasi ini di sini ini kita hapus ya ini kita hapus ini juga kita hapus Nah jadi kita Fokusnya ke aksinya aksi Apa sih yang mau dilakukan jadi di sini kita pakainya bukan use Im tapi use reducer ya reducer ini e not reducer ya nya Nah ini kita pakainya namanya Dis patch misalnya nah eh sorry Dis patch nah seperti ini ya Nah kita akan coba sekarang kalau misalnya handle add note misalnya di sini kita dispatch e action-nya misalnya type-nya tadi itu e add note ya Nah Lalu nanti dia ada texs-nya itu text nah seperti ini nah saya akan copy lalu kalau dia handle change note nah ini eh ininya adalah change ya change not nah ini biar tidak satu-satu teman-teman bisa gunakan e sprad operator aja not nah misalnya seperti ini kalau handle delete Ya kita gunakan lagi ini berarti delete Note yang kita butuhkan cukup id-nya aja jadi note tiid nah selesai seperti ini Nah harusnya sih sama aja ya kita akan coba dulu J contohnya di sini saya coba ee a misalnya ya add nah sama ya edit contohnya belajar html Saya save Nah lihat hasilnya sama aja saya delete ini saya save eh sori Saya complitkan delete delete Ya belajar komputer Nah lihat hasilnya sama Nah jadi seperti ini kalau teman-teman pakai reducer Nah kalau tadi kita pakai reducer Sayangnya saya harus modifikasi ini ya secara manual nih Nah ini lumayan ribet Sebenarnya ya ini kita harus tambahkan sped operator ini harus pakai map ini harus pakai filter dan lain-lain Nah bisa enggak ya kita pakai imer juga nah untungnya ya library use imer itu juga mendukung reducer sehingga kita bisa lebih mudah karena kita bisa mengedit data draftnya dibanding membuat data baru dari state yang sudah ada Nah kita bisa menggunakan metodenya adalah use imer reducer Nah jadi contohnya kita tinggal edit aja notes reducer-nya jadi seperti ini Jadi ini adalah drab-nya jadi karena ini drabnya sudah pasti ini data baru jadi teman-teman kalau mau tambahin datanya tinggal drab titik push misalnya kalau misalnya mau edit ya tinggal find indexnya lalu kita edit misalnya seperti ini kalau teman-teman misalnya mau Oh saya mau misalnya di sini eh delete note ya tinggal find lalu habis itu Tinggal splice selesai jadi simpel ya kalau teman-teman pakai yang eh imer reducer Oke kita akan coba ya tambahkan gunakan er reducer Oke jadi ini kita ganti ya jadi eh di sini kita pakainya adalah use imer reducer nah seperti ini nah ini sama aja cuma tinggal bedanya adalah function ini Jadi ini kita hapus ini hapus ya Nah seperti ini Nah ini tinggal functionnya berarti ini bukan lagi notes melainkan draft ya Jadi ini adalah draft notes-nya jadi teman-teman tinggal e lebih simpel sebenarnya pakai if Else ya kalau pakai imer j di sini contohnya kalau actionnya typ-nya itu sama dengan misalnya add not nah seperti ini jadi kalau teman-teman misalnya add not teman-teman mau ngelakuin apa ini sama dengannya tig kali ini mau ngelakuin apa misalnya E else if misalnya actionnya ty nya Eh sama dengan ini change note misalnya ya Nah kita mau ngelakuin apa else if misalnya action-nya type-nya delete note Nah kita mau ngelakuin apa Oke kita akan coba di sini jadi notes di sini berarti kita cukup Push aja ya Jadi kita push di sini ya E ini harusnya sama kayak ini saya akan copy aja nah seperti ini Nah kalau kita eh change note kita mau ngelakuin apa Nah change notde itu simpel kita tinggal eh dapatin indeksnya contohnya ya eh ambil dari notes Ti find index ya yang not-nya itu note ID sama eh action Ti ID nah seperti ini ya sori ini sama dengan kali Nah lalu kita tinggal ya udah ubah aja draf eh sorryi eh notes yang index itu kita ubah contohnya nah teman-teman pakai sped operator contohnya eh action misalnya seperti ini ini juga bisa atau mau satu-satu juga boleh kalau contohnya saya mau yang ubahnya adalah teksnya aja menjadi action text lalu saya ubahnya dan-nya aja jadi action dan Nah bisa ya atau kalau kita mau delete Ya simpel kita ambil indeksnya lalu kita eh notes tik splice itu yang indeksnya dan sejumlah satu nah selesai jadi ini lebih simpel ya nah saya Hapus yang ini Nah teman-teman bisa lakukan menggunakan imerse juga Oke saya akan refresh hasilnya Harusnya sama ya kita cek list bisa edit bisa saya hapus juga bisa nah seperti ini jadi hasilnya e learn imer misalnya nah itu hasilnya sama aja seperti ini nah ini kalau teman-teman menggunakan reducer jadi nanti aksinya itu terpusat di satu function namanya adalah function reducer jadi yang di tempat lain ketika teman-teman mau mengubah itu teman-teman cukup kirimkan menggunakan dispatch ini Oh di sini adalah aksinya ya yang aksi ini itu nanti akan dikirim sebagai parameter kedua di action di sini Jadi ini adalah reducer searang kita bahas tentang konteks nah selain state hooks ya yang sudah kita bahas sebelumnya menggunakan state atau juga use reducer Nah masih ada hooks yang lainnya salah satunya adalah kex hooks Nah itu menggunakan use context kita bisa lihat di sini jadi ada yang namanya use context ya Nah pertanyaannya untuk apa nih untuk e Hook konks ini Oke jadi biasanya nya untuk mengirimkan informasi dari parent compponent ke child component kita biasa menggunakan props Ya nah tapi kalau kita mau mengirim informasi melalui banyak komponen contohnya di dalam parent ada Child di dalamnya ada chat lagi ada chat lagi itu akan terlalu sulit Biasanya kalau kita menggunakan props ya Eh props ya sor Kenapa karena kalau kita gunakan props itu berarti kita harus kirimkan atau istilahnya tuh passing ya dari komponen Child ke komponen chat lagi ke komponen chat lagi jadi lumayan panjang kalau kita harus menggunakan props nah atau misalnya saja kita punya satu informasi yang digunakan oleh banyak komponen maka kita harus mengirimkan ke semua komponen ya menggunakan props dan ini akan terlalu sulit nah konteks itu membolehkan parent komponen itu membuat informasi dan bisa digunakan oleh komponen manapun yang ada di bawahnya atau semua Child komponennya Tidak peduli seberapa dalam komponen sh-nya dia bisa menggunakannya nah tanpa kita harus kirimkan melalui props nah banyak juga yang bilang konteks ini sebagai Global state padahal sebenarnya sih bukan ya Nah kalau Global state kan bisa digunakan di mana aja kalau ini enggak bisa Jadi kalau konteks itu cuma bisa digunakan dari parent ya dibuat konteksnya lalu akan digunakan di Child child-nya Nah jadi secara harus di bawahnya ya untuk mengg gunakan si konteksnya jadi bukan berarti di semuanya kalau bukan parentnya dia tidak akan bisa jadi Penggunaan istilah Global set mungkin kurang tepat ya Oke jadi misalnya saya punya di sini parent-nya adalah app ya lalu di sini Saya punya konks contohnya isinya xxx lalu dia punya lagi header punya lagi child-nya content punya lagi footer dan lain-lain lalu di sini Saya punya contohnya menu Nah kalau saya bikin menggunakan props ya berarti saya harus kirim dari sini ke header nanti dari header saya kirim lagi ke sini nah itu terlalu panjang Biasanya kalau kita menggunakan e props ya Nah kalau kita gunakan konteks Saya cukup bikin konteks di sini nanti semua chart yang ada di sini ya itu saya bisa gunakan konteks yang dibuat oleh parentnya jadi secara otomatis kalau saya buat konteks di sini lalu otomatis di sini saya bisa gunakan si konteksnya juga nah jadi ini lebih mudah ya kalau kita mau mengirim ke semua Child nya dibandingkan menggunakan props Oke untuk membuat konteks kita bisa menggunakan function yang namanya create contex jadi kita bisa gunakan create kex Nah selanjutnya ya setelah membuat kontteks untuk menggunakan kontks tersebut kita bisa menggunakan use kex Jadi pertama kali itu harus Dibikin dulu konteksnya apa Nah nanti baru kalau teman-teman mau menggunakan teman-teman gunakan use kex Nah kalau teman-teman misalnya mau mengubah data di konks nnya kita gunakan yang namanya provider yang terdapat di konteksnya Nanti secara otomatis semua komponen di bawahnya akan mendapatkan nilai sesuai dengan yang kita ubah di konks provider Nah nanti detailnya kita bisa langsung praktikkan jadi ini untuk create kex ya Jadi cukup create contex ini default value-nya apa ya Nah lalu di sini kita bisa gunakan use contaex untuk membuatnya jadi nanti kita gunakan use contct lalu kita ini tambahkan parameter konteks yang sudah kita buat lalu ketika teman-teman ingin menambahkan value ke dalam konteksnya kita bisa gunakan provider ya jadi contohnya seperti ini Jadi ini adalah time KKS contohnya titik provider Nah di sini value-nya nah artinya semua Child elemen yang ada di dalam sini itu bisa menggunakan eh time KKS dengan value yang ini seperti itu ya Oke kita akan coba langsung praktiikkkan aja Nah sekarang kita akan praktiikkkan dengan contohnya ya Nah kita akan bikin sebuah halaman profile di mana kita ingin menampilkan nama pengguna di semua komponen child-nya tidak peduli di mana pun itu saya mau pokoknya saya bisa dapetin profile-nya misalnya ya Nah kita akan buat ya file-nya adalah profile html nanti kita bikin semua e komponennya jangan lupa registrasikan ke feed config Oke kita akan coba buka feed config dulu ya ini kita buat profile profile Oke kita akan copy yang contact ya ini profile ini saya akan ganti ke profile Oke selanjutnya kita buat folder baru profile Nah kita akan buat main ya jsx Nah ini create root dokumen get Element by id-nya root lalu render ya Eh striak mode Nah nanti kita tambahkan di sini yang profile app-nya nah ini kalau kalau kita buka ini harusnya masih kosong ya profile html Nah masih kosong Oke kita akan mulai yang pertama berarti bikin konteksnya terlebih dahulu Nah jadi di sini saya akan bikin file namanya adalah profile konteex ya Nah di sini saya pakai JS bisa jsx bisa ya nah saya pakai jsx misalnya di sini Nah jadi di sini kita buat ya export nah caranya gimana caranya teman-teman gunakan create context nah ini default value-nya apa default value-nya contohnya adalah string kosong Nah kita buat di sini biasanya namanya mirip seperti nama komponen ya jadi di sini profile konteks misalnya jadi di sini kita buat eh cons misalnya profile KKS ya Nah kita ambil dari create contex selesai Nah jadi kita punya profile kontex Oke selanjutnya misalnya kita akan bikin di sini profile address ya Nah kalau teman-teman pengin mendapatkan e data di konteksnya kita bisa gunakan use contex lu di sini adalah profile KKS nanti value apapun yang dis-et oleh parent itu kita bisa dapatin ya Nah otomatis datanya akan disimpan di profile ini jadi kalau teman-teman mau gunakan datanya silakan gunakan langsung seperti ini jadi simpel banget jadi teman-teman tidak perlu menggunakan props lagi cukup use contex ini adalah profile kex nanti parent ng-eset up apa Otomatis kita akan dapetin si ee data profile-nya kita akan coba ya kita akan bikin di sini profile address profile address ya jsx oke export default function ini adalah profile address Nah kita akan Eh ini dulu ya berarti bikin profile ini use contex ya Nah ini teman-teman tinggal Sebutkan konteksnya apa tadi kita bikin namanya profile konteks ya nah jadi nanti di sini tinggal return contohnya nah ini H2 misalnya profile address ya Misalnya Nah di sini saya tambahkan P misalnya alamat ee untuk profile ini simpel aja ya nah pura-pura aja kita punya eh Child eh komonen Nah jadi seperti ini nih ya cara penggunaannya simpel sekali Nah selanjutnya misalnya teman-teman punya yang profile ya lalu di sini caranya e isinya hampir sama ya jadi saya akan copy profile address ini adalah profile jsx ini namanya adalah profile lalu di sini contohnya Ini profile misalnya ya ini Hello misalnya nah seperti ini bebas ya teman-teman mau isi apa ini kita akan simulasi aja Nah selanjutnya Misalnya ini kan kita tidak menggunakan props ya Jadi teman-teman kalau mau bikin lagi dalamnya silakan jadi setelah kita bikin banyak Child misalnya nah sekarang pertanyaannya Gimana cara mengubah data di konteksnya nah caranya teman-teman bisa gunakan seperti ini profile konteks titik provider lalu value-nya sama dengan apa Jadi otomatis value-nya berubah menjadi contohnya di sini adalah chcho artinya semua Child Element di sini itu ketika ngambil data profile konks itu dapat value-nya adalah Echo Nah jadi teman-teman bisa lakukan seperti itu Oke kita akan coba ya jadi di sini kita akan buat profile app ya jsx export default function profile app ya Nah ini kita returnkan contohnya Nah kita akan buat berarti di sini profile konteks ya Nah di sini profile konteks ini titik provider ya lalu value-nya contohnya di sini kita ganti jadi cheko nah selesai Oke berarti di dalamnya sekarang contohnya H satu eh profile profile app ya Nah ini saya mau tambahkan yang profile ya lalu profile address Nah jadi harusnya profile dan juga profile address itu bisa dapetin profile konteks ya yang isinya adalah cheko Nah kita tampilkan di main ya di sini adalah profile file app nah hasilnya lihat profile app ya yang ini yang profile Hello chcho ini profile address ini juga alamat Echo Nah jadi otomatis kita akan dapatin data yang sama tanpa harus mengirimkan ke props Jadi kalau teman-teman butuh hal seperti itu teman-teman bisa gunakan konteks sekarang kita bahas tentang konteks dan juga state untuk mengubah konteks kita harus menggunakan provider ya Jadi yang seperti tadi kita lihat nah Hal ini karena konteks itu hanya bisa diakses oleh komponen di bawahnya tidak bisa komponen di atasnya atau yang sejajar jadi harus yang di bawahnya makanya harus menggunakan provider nah Selain itu komponen di bawahnya hanya bisa membaca dari data konteks tersebut tidak bisa mengubah data di konteksnya Nah sekarang pertanyaannya Gimana kalau saya pengin mengubah data di konteksnya maka yang bisa mengubah adalah yang EE menggunakan atau memegang si konteksnya yaitu si parent-nya nah gimana caranya Nah kita bisa gunakan bantuan state untuk mengubah ya tapi yang penting itu yang boleh mengubahnya hanya si parentnya Oke misalnya ya kita akan bikin di sini profile form ya nanti kita akan bikin profile form nanti dia ada inputnya nah Ketika saya ubah di sini Saya pengin nanti state-nya juga diubah nah caranya saya akan di sini tambahkan eh props ya name dan jug juga set name nanti kita akan kirimkan eh name-nya itu dari si parentnya nah Jadi intinya ketika kita ubah nanti si name-nya itu kita akan ubah menggunakan yang ada di input di sini Oke kita akan buat dulu profile form. jsx misalnya ya Eh export default function ini adalah profile form oke di sini itu ada name contohnya dan juga set name ya lalu kita akan bikin eh return-nya dulu di sini contohnya H2 Misalnya ini adalah profile form nah lalu kita tambahkan input ya Nah inputnya di sini eh type-nya adalah text lalu value-nya kita ambil dari name lalu on change-nya kita akan bikin handle change ya Nah kita buat di sini function handle change Nah kita akan set name-nya Kita ubah langsung e.target. value Oke selesai ya Nah sekarang kita akan coba integrasikan ke si profile app-nya jadi di profile app-nya di sini kita akan bikin state name ya lalu di sini set name state pertama contohnya Echo nah lalu di sini provider-nya itu kita value-nya ambil dari state Nah itu bisa nah lalu kita tambahkan di sini profile eh form name-nya kita ambil dari name di sini lalu set name-nya kita ambil dari set name ini jadi harapannya nanti ketika di profile form-nya kita ubah name-nya itu nanti otomatis provider-nya juga yang di sini konteks akan mengubah si name-nya J otomatis di bawah-bawah sini otomatis akan berubah juga nilai dari si konteksnya Nah kita akan coba ya Nah kita coba misalnya saya buka profile app di sini nah ini kita tambahkan cons name dan juga set name sama dengan state ini Echo misalnya default-nya ya Nah setelah itu kita akan coba ini berarti ganti menjadi e name ya Nah setelah itu kita coba tambahkan profile form nah ini kita ambil name-nya dari state name lalu set name-nya dari set name selesai ya lihat hasilnya ini sama ya cheko saya akan Coba ubah misalnya jadi Budi nah lihat dia berubah semua Eko Kurniawan kanedi Nah Lihat Budi Nugraha Nah lihat dia berubah semua Nah jadi teman-teman juga Bisa integrasikan state dengan konteks Oke ini adalah yang perlu diperhatikan sebelum menggunakan konteks konteks mungkin lebih mudah digunakan dibanding mengirim semua data ke state ya Eh via properties nah tapi jangan terlalu sering menggunakan konteks sampai ke hal yang paling sederhana selama bisa dikirim menggunakan contohnya props ya teman-teman gunakan props aja jadi gunakan konteks kalau memang perlu kalau masih sederhana teman-teman bisa gunakan state dan juga props dulu Nah kalau sudah terlalu kompleks baru teman-teman gunakan konteks jadi Jangan semuanya dipindahkan ke konteks ya karena nanti konteks itu bakal makin bingung karena tidak ada parameter nya gitu ya jadi akan otomatis makin bingung ee ketika terlalu banyak konteks beda kalau profs walaupun banyak tapi kita udah jelas Oh ada parameternya a b c seperti itu nah tapi kalau e konteks itu tidak ada ya tidak kelihatan jadi e gunakan dengan bijak ya kalau kita menggunakan konteks sekarang kita bahas konteks dan juga reduser nah sebelumnya kita sudah bahas tentang reducer ya sama seperti state nah reducer itu juga bisa kita integrasikan dengan konteks nah pada kasus ketika kita membuat komponen yang sudah sangat kompleks dan menggunakan reducer Nah kita bisa mengirim semua state dan juga reducernya itu menggunakan konteks ke child compponennya agar lebih mudah nah sehingga lebih mudah nanti dibanding kalau teman-teman menggunakan props nah misalnya kita coba akan modifikasi halaman notes ya Yang sebelumnya Sudah kita buat itu Dar dari eh props kita akan ganti menjadi konteks misalnya jadi kita integrasikan konteks dan juga reducernya oke misal saja ada dua data yang akan kita kirim ya ke chartnya yang pertama adalah data notes-nya yang kedua adalah data dispatch-nya jadi di sini kita gunakan notes dispatch-nya Nah jadi kita akan bikin dua konteks ini ya jadi notes contex dan juga notes dispatch contex Oke kita akan buat dulu Oke saya akan tutup dulu semuanya kita ke halaman note sekarang Nah ini kita buat eh note konks ya jsx contohnya nah export eh sorry Eh benar ya export cons lalu adalah notes kex ya E lalu di sini sama dengan create contex nah ini eh default-nya N0 dulu ya lalu export misalnya cons eh not dispatch kex nah ini kita create contex juga dan default-nya adalah no0 Oke selesai jadi kita punya dua konteks sekarang ya oke karena method dispatch ada di konteks jadi kita tidak perlu mengirimkan event handler lagi dari parent component ke chat component ya melalui props jadi kita bisa langsung pindahkan ke child component karena Child componennya itu bisa mengakses dispatch function secara langsung Oke kita akan modifikasi dari mulai note form-nya jadi di sini kita lihat tidak ada props-nya lagi jadi kita ambil dispatch-nya menggunakan use contact dispatch eh not dispatch action ya eh sorry not dispatch contex lalu di sini tinggal ketika handle clikck langsung Panggil dispace-nya lalu Detailnya ada di sini nah kita akan coba Jadi di notde form-nya ya Nah di sini kan tadinya kita tambahkan add note ya di sini ini kita hapus jadi kita langsung aja di sini pakainya yang ini ya yang dispatch ya cons misalnya eh dispatch itu kita ambil use context ya Nah ini notes dispatch contex nah selesai jadi nanti teman-teman tinggal langsung di sini jangan add note ya melainkan dispatch jnya di sini kita gunakan dispatch nah ini Eh type-nya misalnya E itu kan e add note ya Nah lalu eh teksnya kita kirim teks nah selesai jadi langsung di sini jadi tanpa kita harus kirimkan melalui props oke selesai kita akan lanjut ke yang lain nah contohnya yang not list ya di sini nah kita tidak perlu kirimkan lewat props misalnya untuk notes-nya kita ambil menggunakan konteks Oke jadi kita modifikasi dulu ya jadi eh not list-nya nah ini kita tidak perlu gunakan termasuk on change on delet nanti kita eh gunakan langsung eh konteks ya berarti ini lebih simpel ya tidak perlu dikirim-kirim ulang jadi notes sama dengan ya use contex itu notes kex nah selesai jadi seperti ini ini ee kita langsung ee ini aja ya jadi ini butuhnya cuma note saat ini ya Nah ini tidak butuh nih ya Jadi kita hapus nah selesai nanti kita akan modifikasi juga yang note-nya agar langsung menggunakan dispatch Oke jadi untuk note-nya berarti di sini cuma butuh note aja jadi untuk handle change text-nya langsung kita pakai dispatch ya dan untuk handle change dan-nya itu juga pakai eh dispatch Ya Termasuk yang handle delete-nya itu langsung menggunakan dispatch Nah jadi lebih simpel ya Nah kita akan coba ya ubah Oke untuk not-nya berarti kita perlu ubah ya ini tidak perlu on change dan juga on delete ya Nah seperti ini ini tidak perlu jadi untuk change-nya kita langsung aja dispage misalnya E sorryi kita ambil dulu dispage ya sama dengan use contex notes dispatch contex Oke ini langsung ya dispatch Nah kita eh bikin eh note ya kita copy dari note lalu teksnya Eh sorryi type-nya itu kita bikin di sini adalah change note ya lalu eh teksnya kita ganti menjadi e target value Oke ini saya akan copy ya ini untuk handle change text-nya Nah selanjutnya untuk handle change d-nya ya itu yang diubah adalah dan-nya ya dan-nya itu target checket nah seperti ini nah yang terakhir adalah on delete-nya Nah kita akan bikin juga di sini function misalnya eh handle delete Oke ini tinggal dispatch type-nya adalah ini ya E delete note lalu yang dibutuhkan adalah id-nya nah ini adalah note titik ID nah seperti ini nah ini kita ganti di sini ya menjadi handle delete oke selesai ya Jadi sekarang Harusnya kita sudah ya Ee mengubah semuanya jadi lebih simpel ya Nah tinggal kita ubah di note app-nya jadi di note appnya kita harus ubah nah di note app-nya jadi kita tidak perlu bikin tiga function ini ini lagi nih karena semuanya sudah dikirim via konteks ya Oke jadi ini contohnya ya nah saya akan eh gunakan notes contex ini provider-nya value-nya dari notes ya Nah yang ini Lalu di sini notde dispatch context ya ini provider-nya kita ambil value-nya dari dispatch ini nah seperti itu Jadi otomatis di dalam sini itu bisa pakai yang e note dispatch dan juga notes contex Oke kita akan Coba ubah jadi ini tiga function ini kita bisa hapus ya Nah jadi di sini saya akan bungkus contohnya saya akan Cut dulu ya notes contex ya ini value-nya kita ambil notes nah ini eh provider ya lalu eh notes dispatch contex ini value-nya adalah dispatch nah ini juga Pro viider nah lalu kita paste yang tadi ini kita hapus Berarti ya enggak perlu lagi kita kirim via props Dan ini juga kita hapus tidak perlu dikirim via props juga nah seperti ini ya jadi selesai jadi lebih simpel ya karena kita kirim semuanya via props Oke kita akan coba buka note ya Nah hasilnya Harusnya sama ya belajar Java misalnya nah sama ya saya edit yang ini CSS dasar Saya save nah sukses saya Delete nah Sukses juga nah sudah benar ya nah jadi seperti ini kalau teman-teman mau integrasikan antara konteks dan juga reducer sekarang kita bahas tentang ref ya fitur hooks yang lainnya Ya selain state dan juga konteks ada yang namanya ref hooks nah ketika kita ingin membuat atau menggunakan komponen untuk mengingat informasi tapi tidak mau memicu render ulang misalnya nah kita bisa menggunakan yang namanya ref ini nah menggunakan ref hooks itu bisa menggunakan metode yang namanya use ref jadi kita bisa lihat ya nama meod-nya adalah use ref ya atau nama function-nya lalu teman-teman masukkan Initial value-nya Lalu ada ref di sini nah bedanya dengan eh state adalah ini tidak ada set method-nya nah pertanyaannya Kenapa tidak ada set method-nya Karena untuk ref ini ini mirip seperti state nah cuma dia memang tidak akan m-trigger render ulang jadi function us rap ini akan mengembalikan objek yang memiliki atribut yang namanya current ya Nah di mana atribut current tersebut berisi value yang dipegang oleh si ref-nya Nah kita bisa lihat di sini ya perbedaan antara ref dan juga state Jadi kalau teman-teman gunakan user ref lalu di sini adalah Initial datanya nanti Ini hasilnya itu adalah objek di mana objek itu nanti dia ada atribute current ini adalah Initial datanya kalau kita menggunakan state itu kan dia mengembalikan value dan juga set value-nya Nah kalau ini tidak ada set value-nya ini cuma ada a objectek ya yang ada current Initial datanya Nah Selain itu ref itu tidak memicu render ulang ya ketika diubah jadi teman-teman kalau mau langsung ubah ke current-nya silakan langsung diubah Nah kalau state itu memicu render ulang kalau kita ubah menggunakan set value-nya nah lalu ref itu dia datanya mutable artinya bisa dimodifikasi dan diubah current value-nya Nah kalau set dia kan immutable ya Jadi kita dapatnya adalah snapsoot datanya jadi kalau teman-teman mau ubah gunakan set value Jadi nanti dia akan render ulang e bikin snapsoot selanjutnya nah lalu untuk ref itu tidak direkomendasikan membaca atau menulis current value ketika proses rendering lebih cocok dibaca atau diubah pada proses event handler Nah kalau state itu bisa dibaca kapanpun ya tiap render gitu Ya nah tapi kalau misalnya teman-teman eh pastikan kalau untuk state itu di tiap rendernya dia akan membuat snapshot masing-masing jadi perubahan datanya akan terjadi di snapshot berikutnya Nah kalau ref itu biasanya memang untuk menyimpan data aja dan tidak mau men-rigger ulang atau merrender ulang Jadi biasanya untuk ref itu jarang ditampilkan di komponennya ya c jadi cuma untuk internal state aja Biasanya karena tidak butuh memicu render ulang oke misalnya kita akan ubah yang alert button ya Nah di sini kita akan tambahkan counter nah tapi counter ini saya tidak akan Tampilkan di elemen jadi di sini artinya saya tidak butuh render ulang Saya cuma butuh nambahkan alert ya Saya pengin tahu itu counternya Ke berapa Nah jadi kita bisa gunakan counter contohnya di sini lalu kita akan coba counternya current-nya Kita plus- plus ya kita tambahkan J nanti setiap eh muncul eh dia akan bertambah terus si jumlah counternya nah artinya ee di sini perubahannya terjadi ketika kita klik dan tidak ditampilkan di komponennya makanya tidak butuh render ulang Oke kita akan coba Jadi yang button yang alert button ya contohnya di sini Nah di sini saya akan tambahkan eh cons eh counter ini kita gunakan us ref ya Nah ini default-nya nol misalnya seperti ini jadi di sini ini kita coba message ya lalu di sini kita tambahkan counter current ya plus plus ya nah jadi kita langsung naikkan juga nah jadi di sini kita tidak pernah Tampilkan si counternya Oke saya saya akan coba E Tampilkan itu tadi itu hello world ya Kalau tidak salah ya oke e tadi itu yang mana ya ini ya oh ya Yang ini ya yang Click me lihat you Click me nol ya lalu klik me lagi nah you Click me s ya lihat dia naik terus Ya Termasuk yang Smash me ya Oh ini Enggak kayaknya ya enggak ada counternya yang ini aja ya nah yang ini ada counternya nah seperti se ini nah jadi teman-teman kalau mau ee bikin seperti state Cuma bedanya kita tidak mau render ulang teman-teman bisa gunakan ref Oke kita akan coba juga ya di sesuatu yang lebih kompleks contohnya kita akan bikin namanya adalah timer nanti di timer tersebut kita akan Bikin timer di mana kita akan simpan di dalam reference ya eh waktu start timer dan juga berhenti timernya nah tapi nanti ini kombinasi antara State dan juga reference ya atau ref ya Nah kita akan coba nih bikin dulu Oke saya akan close saya akan coba buat di sini namanya adalah timer ya timer nah seperti ini Oke selanjutnya saya akan copy yang ini menjadi timer ini kita ganti menjadi timer Oke kita akan buat folder baru namanya adalah timer lalu kita akan bikin main jsx ya create root Nah di sini dokumen get Element by ID root lalu kita render striak mode Nah nanti kita tambahkan yang timernya Oke kita akan bikin di timer di sini kita akan bikin komponennya namanya timer jsx export default function timer ya E returnkan dulu misalnya ini komponen kosong kita akan Panggil timer Oke selesai kita coba buka dulu di sini timer Oke masih kosong ya Oke sekarang kita fokus ke timernya Oke jadi di sini ya kita bikin state menggunakan start ya Jadi waktu mulainya lalu e now ya jadi saat ini jadi kita nanti kita akan e bikin timernya itu jarak antara startnya sampai atau saat ini artinya yang no Ini kan harus selalu diubah ya Nah selalu diubahnya berarti dengan waktu saat ini Nah untuk mengubahnya Saya akan menggunakan set interval nah tapi kan ini tuh set interval tuh kita harus simpan di suatu tempat ya Nah caranya berarti kita akan Bikin timer dalam use reference ya jadi nanti kita akan e gunakan timer titik current-nya itu kita gunakan set interval ya danah di dalam set intervalnya lalu kita akan ubah set nya ya Jadi tiap interval 10 m kita akan ubah terus-terusan untuk set now-nya nah seperti ini Nah nanti ada juga yang handle stop ya caranya kita akan clear interval yaitu timer currentnya Nah jadi nanti ada tombol untuk startnya ada tombol untuk stopnya Oke kita akan coba prakikkkan Oke jadi nanti di sini ada H misalnya timer ya ini nanti antara no dikurangi start yaah ini kita ambil dalam milisec misalnya Nah nanti ada button misalnya ya Nah ini startnya dan ini stopnya nah ini untuk buttonnya oncick misalnya nanti kita bikin handle start ya lalu di sini oncick ini handle stop nah seperti ini Oke jadi kita akan bikin dulu yang con start ya start dan juga set startnya Oke ini kita state biasa nah ini kita isi datanya N0 dulu deh ya Nah lalu eh cons ini now-nya ya saat ininya sama set now-nya itu kita use state juga itu N0 dulu oke berarti Ketika saya klik start-nya jadi kita bikin function eh handle start ya itu berarti kita set start-nya dulu ya Eh jadi Dee eh titik now ya Nah lalu set now-nya nya juga dee.k no nah seperti ini jadi saat ini dulu ya Nah lalu Baru kita jalankan timernya Nah jadi kan kita jalankan timernya menggunakan set interval ya Nah set interval misalnya seperti ini nah setiap interval kita mau set no-nya itu diubah jadi waktu saat ini juga jadi contohnya teman-teman bisa gunakan E new date contohnya ya eh get time seperti ini atau Ya sama aja sih ya kayak yang di atas de tik no conya nah seperti ini jadi kita set terus-terusan Jadi waktu saat ini setiap misalnya 10 MS nah tapi kan kita nanti pengin juga ng-stop si set intervalnya nah artinya set interval ini kita harus simpan di dalam sebuah variabel nah masalahnya kita tidak mungkin simpan di state ya Kenapa karena ini kan tidak mungkin men-rigger render ulang ya untuk e set interval jadi eh yang kita lakukan adalah kita akan simpan di dalam e ref ya Jadi kita akan Bikin timer sama dengan use ref ya Nah kita set awalnya N0 ya Nah lalu kita ambil timer titik current sama dengan set interval seperti ini Oke Nah selanjutnya kita bikin function handle stop ya Nah seperti ini Nah kalau stop simpelnya adalah tinggal diclear interval ya dan timer tik current kita clear nah selesai jadi kita sudah bikin timernya jadi timer ini kita Simpannya di state ya di sini oke saya coba start Nah lihat dia naik terus ya setiap 10 MS Ketika saya stop nah dia berhenti seperti ini saya start lagi dia ngulang lagi dari awal lalu saya stop lagi Ya Nah jadi seperti ini nah jadi ini juga teman-teman bisa simpan ya E untuk menyimpan timernya di sini ya itu teman-teman bisa simpan di dalam ref Nah jadi kalau memang ada bagian eh kode atau data yang kita pengin simpan tapi kita tidak mau Trigger render ulang gitu ya teman-teman bisa gunakan ref ini Oke sekarang kita bahas manipulasi Dom ya dengan ref nah Rex secara otomatis akan meng-update Dom ketika melakukan render ulang ya Jadi kita tidak perlu memanipulasi Dom secara manual lagi nah tapi kadang-kadang kita mungkin perlu mengakses Dom secara carara manual contohnya memindahkan fokus ke salah satu elemen misalnya ya jadi setelah klik misalnya nah kita pengin fokusnya dipindahkan ke salah satu elemen atau misalnya teman-teman pengin Scroll otomatis ke elemen tertentu nah Sayangnya tidak ada cara untuk melakukan hal tersebut ya kalau kita menggunakan react Nah jadi kita perlu tangani hal tersebut secara manual nah salah satu caranya kita bisa menggunakan ref untuk menuju ke Dom elemen yang kita mau nah caranya Nanti pada elemennya kita bisa tambahkan atribut ref jadi kita bikin semacam variabel ya yang menunjuk ke elemen tertentu jadi kita bisa gunakan ref juga Oke kita akan lihat ya contohnya kita akan buat dulu di sini e aplikasinya namanya misalnya gasbook kita akan buat dulu Oke saya akan buat di feed config-nya dulu ini adalah gasbook ya jadi kita akan buat buku tamu di sini oke nah saya akan copy yang kontak gestbook Nah kita akan ganti ini jadi gasbook nah selesai kita akan bikin foldernya dulu di sini gestbook ya Nah kita akan bikin main jsx create root di sini dokumen get Element by ID lalu kita akan render ya eh trick mode lalu di sini nanti kita akan tambahkan yang e gasbook-nya Oke kita akan buka dulu gasbook nah isinya masih kosong oke yang pertama kita akan bikin yang gasbook-nya ya berarti ya Jadi kita akan bikin gestbook-nya di mana di sini dia punya name lalu dia punya message ya Nah lalu di sini kita akan bikin yang handle submit ya Jadi kita akan set name-nya nanti dikosongkan dikosongkan lalu kita pengin misalnya kan fokus ke input name-nya misalnya seperti ini jadi kalau sudah kita mau masuk ke input name-nya jadi di sini kita gunakan label di sini e html 4 ya karena for itu keyword di javascript lalu html for name contohnya di sini Lanu di sini ada input-nya nah kita bisa gunakan ref sama dengan di sini adalah ref-nya jadi teman-teman bisa bikin di sini cons nama input sama dengan use ref Nah nanti name input ini kita bisa linkkan dengan elemen yang kita mau caranya di sini contohnya input ref-nya sama dengan nama input jadi otomatis nanti nama input ini ya Sorry name input ini isinya akan menjadi elemen input ini jadi kalau teman-teman pengin fokus ke sini misalnya kita bisa gunakan name input titik current sama titik fokus jadi kita masuk ke sini jadi ketika teman-teman butuh mengakses salah satu elemen di dalam komponen di sini teman-teman tinggal gunakan di sini ref ya lalu di sini teman-teman bikin variabel ref jadi simpel sekali Oke kita akan coba nih Jadi intinya form ini Ketika saya submit ya Nah nanti kita hapus semua datanya kita kasih alert ya namanya siapa message-nya apa Nah Saya pengin fokusnya langsung pindah ke input di sini nah jadi seperti itu Oke kita akan coba kita akan buat gasbook di sini eh export default function gestbook ya Nah kita akan bikin di sini eh return dulu H1 misalnya di sini gasbook nah lalu kan di sini kita bikin form E saya akan bikin label dulu di sini contohnya name ini Eh html4 misalnya ya nanti di sini kita bikin E name nah ini saya tambahkan break Oke kita akan bikin input ya lalu di sini type-nya adalah text lalu name-nya itu adalah name Lalu value-nya nanti kita akan e isi ya value-nya Nah lalu di sini ketika diubah Saya pengin ubah name-nya juga jadi di sini value-nya name ya Nah Lalu nanti E ketika ubah ubah name-nya juga jadi di sini kita bikin dulu e cons e name set name ya sama dengan state isinya string kosong dulu oke Ini berarti on change itu kita akan ubah set name itu e.target. value Oke saya akan tambahkan ke bawah ya biar kelihatan nah seperti ini Oke saya tambahkan e break ya Oke kita bikin juga label lalu message nah ini html4-nya adalah message Nah kita akan buat ya dalam bentuk text area misalnya ya jadi teks area di sini misalnya eh name-nya adalah message ya Lalu value-nya nanti kita bikin message jadi di sini kita bikin juga message dan ini Set message jadi ini kalau misalnya on change ya itu ee kita akan set juga ke eh message ya Set message e. target. value oke nah lalu kita akan bikin Oh ya saya tambahkan BR dulu di sini kita akan tambahkan button eh type-nya adalah submit contohnya ya submit seperti ini ini misalnya submit ya Nah on cck ya Nah kita akan nanti bikin handle submit nah seperti ini jadi kita bikin di sini function-nya adalah handle submit ya Oke jadi kita tambahkan e e prevent default ya agar tidak di-submit form-nya Lalu nanti kita reset ya jadi set name-nya Kita reset jadi kosong lagi lalu set message-nya nanti nanti kita reset jadi kosong lagi nah lalu misalnya kita tambahkan alert misalnya name-nya siapa gitu ya lalu eh message-nya itu apa ya Nah seperti ini Oke kita akan coba tambahkan ke main jsx ya Nah di sini ke gasbook ya selesai Oke Biasanya kan kalau kita masukkan contohnya chcho eh hello gitu ya submit gitu ya Nah Hello ya Nah ini kan keereset Nah setelah kereset misalnya Saya pengin Fokusnya ke name jadi di sini jadi saya bisa langsung mengetikkan lagi tanpa harus ngeklik dulu name-nya Nah itu otomatis kan kita kalau manual itu kan biasanya kita tambahin id di sini ya contohnya ID sama dengan misalnya di sini name jadi nanti di sini kita gunakan dokumen get Element by ID misalnya name gitu ya baru fokus nah seperti ini nah jadi kita biasanya lakukan seperti ini ya saya coba misalnya ya chcho E Hello submit Nah lihat dia Fokusnya ke sini nah tapi jangan pakai seperti ini lagi ya kalau kita sudah menggunakan react jadi caranya kita bisa bikin cons Misalnya ini name input ya kita gunakan use ref nah ini kita set N0 dulu pertamanya Nah nanti di sini teman-teman bisa gunakan name input ya E current titik fokus Nah sekarang pertanyaannya name input itu yang mana name input itu misalnya saya akan knectkan dengan input yang ini jadi di sini saya ganti menjadi ref ya itu adalah name input nah selesai jadi seperti ini caranya jadi saya kalau coba Echo misalnya Hello saya submit ya oke nah lihat dia masuk fokusnya langsung ke sini nah jadi untuk eh referensi ke elemen tertentu teman-teman juga bisa menggunakan use ref jadi jangan lagi e manipulasi Doom secara manual Oke jadi ref hanya bisa digunakan di domome elemen ya Nah kita tidak bisa menggunakan ref di komponen jadi teman-teman Jangan berpikir Oke Apakah saya bisa referensi ke komponen Nah itu sayangnya enggak bisa jadi teman-teman cuma bisa referensi ke elemen yang ada di dalam SI komponennya Nah kalau kita menambahkan ref ke komponen maka maka atributnya ya current-nya akan bernilai N0 Jadi kalau teman-teman maksa nanti nilainya tetap akan N0 Nah kita akan coba praktikkan ini dengan membuat gasbook input ya komponennya Nah kita akan coba kita bikin gasbook form ya Nah di sini eh kita akan coba nanti tambahkan ya di sini ini input-nya ya nanti kita akan coba tambahkan ke yang ininya ya yang reference-nya kita akan coba nih Oke kita akan buat di sini namanya gest bookform.jsx ya Nah ini sebenarnya Cuma memindahkan aja export default function guestbook form ya nanti dia ada name dan juga set nameame nah ini Tinggal kita return contohnya di sini nah eh kita tambahkan label yang tadi contohnya yang ini saya akan coba pindah kan referens ini kita hapus ya Nah seperti ini Nah selanjutnya kita akan coba tambahkan di sini gasbook form ya lu teman-teman paksa Oke reference-nya adalah name input di sini nanti kita lihat hasilnya ini harusnya akan error ya Jadi kita akan coba Oke saya berarti ini akan ganti ya ini menjadi gasbook form ya Nah seperti ini name-nya adalah name eh sorry name lalu set name-nya adalah set name Oke lalu teman-teman misalnya ya Eh pengin Oh saya pengin reference-nya ke sini Jadi saya tambahkan reference contohnya Ini name input Nah kita akan lihat hasilnya jadi saat saya e masukkan chcho eh message-nya Echo lagi submit Nah lihat ya dia enggak keluar bahkan alert-nya Kenapa karena error kalau kita lihat di sini di kol Nah Lihat cannot read properties on of null ya jadi di sini tu error nih di bagian sini error kenapa karena currentnya itu N0 jadi ketika teman-teman akses fokusnya itu dia error makanya kode yang di bawahnya pun tidak eh terjangkau ya Karena dia sudah terlanjur error Nah sekarang pertanyaannya gimana nih untuk memperbaikinya ya simpelnya teman-teman harus Berarti kirimkan reference-nya ke dalam ya sebab properties Oke jadi kalau teman-teman mau mengakses komponen Dom elemen ya Nah teman-teman e tahu ya tadi error ya karena komponen tidak bisa dijadikan sebagai reference nah Oleh karena itu kalau kita ingin menggunakan reference untuk Komponen kita bisa menggunakan props ya Nah kita bisa membuat props ref yang kita isi dari nanti ref-nya nah prop ini kita bisa gunakan pada Dom elemen di dalam komponen tersebut Nah sekarang kita akan coba tambahkan ref ke dalam komponen gasbook e form-nya ya nah jadi nanti di sini gasbook form-nya teman-teman tinggal tambahkan ref nah lalu kita pakai di input di sini ref-nya sama dengan ref dari properties-nya ini Oke kita akan coba jadi di sini ini berarti udah ref ya tetap Nah kita akan coba tambahkan ref di sini nah seperti ini jadi nanti di sini kita tambahkan ref sama ref Nah kalau ini bisa ya karena ref yang di sini ini ya itu diteruskan ke rep yang dipr seperti ini oke sekarang saya refresh saya coba Echo misalnya eh hello submit Ya Sukses ya Nah lihat dia otomatis Fokusnya ke sini nah jadi ref juga bisa digunakan sebagai referensi ke elemen tertentu di dalam komponennya sekarang kita bahas tentang efek ya Hook selanjutnya yang akan kita bahas adalah effectfek hooks nah beberapa komponen itu mungkin butuh berkomunikasi dengan eksternal syistem misalnya komunikasi dengan nonreact komponen contohnya ya kalau masih di satu halaman misalnya atau mungkin bahkan berkomunikasi dengan server contohnya via Ajax misalnya seperti itu artinya kan di luar dari si reaknya itu sendiri nah EF hooks ini itu memungkinkan kita membuat kode yang dijalankan setelah proses rendernya selesai sehingga kita bisa berkomunikasi dengan sistem di luar dari reak nya itu sendiri nah Efek itu terjadi setelah proses rendernya selesai jadi kalau teman-teman butuh sesuatu setelah proses render teman-teman bisa gunakan effect ya Jadi bukan sebelum ya tapi setelah proses render Nah kita bisa menggunakan use effect untuk membuat efek Nah jadi jangan terkecoh dengan nama efek ya jadi jangan dipikir Oh kalau ini efek misalnya berarti E ini misalnya efek animasi enggak enggak seperti itu gitu ya ini efek yang memang e komunikasi dengan eksternal sistemnya Oke kita bisa lihat di sini jadi cara penggunaannya kita bisa use effect lalu di sini set up dan juga Dependency nanti kita bahas ya E detailnya Oke pertanyaannya Kenapa sih tidak cukup event handler Kenapa kita harus punya hooks baru contohnya adalah effect hooks ini nah Biasanya kita tahu ya bahwa komponen itu harus pure jadi tidak ada e efek sampingnya dan tidak memiliki efek samping Nah untuk kode yang memiliki efek samping ya atau ya Ada Side Effect misalnya Biasanya kita gunakan event handler nah tapi kadang-kadang ada kebutuhan kita memang perlu membuat komponen yang memiliki efek samping ketika proses render Nah jadi bisa aja gitu ya Misalnya ketika komponen diender kita ingin mengambil data dari server sehingga nanti bisa ee menyebabkan si komponennya otomatis berubah ya kenapa Karena setelah dapat respon dari server datanya berubah nah Padahal komponennya sama tapi datanya bisa berubah seperti itu Nah di sinilah efek Hook ini diperlukan Nah jadi Mungkin kadang-kadang memang ada ya keadaan kita memang butuh efek samping dan itu biasanya terintegrasi dengan sistem eksternal di luar dari react-nya Oke kita akan coba ya kita akan bikin E sebuah halaman daftar produk misalnya di sini Jadi kita akan bikin produk html nanti kita akan bikin di public itu ada produ json ya nanti kita akan coba eh simulasi e ajak SC ya ke produ json ini Oke kita akan buat langsung Oke saya akan ee buat dulu di feed config di sini ini kita buat contohnya eh produk ya Eh tadi namanya produk ya produk ya produk produk ya oke selesai kita akan copy yang kontak menjadi produk ya nah selesai nah ini kita ganti produk Oke kita akan buat di sini namanya adalah produk ya Nah di sini kita akan buat dulu e main jsx ya oke create root misalnya di sini dokumen get Element by ID root lalu kita akan render striak mode ya Nah nanti kita tambahkan si e produknya di sana Oke sekarang kita akan masuk ke public dulu jadi di sini kita menyimpan aset file ya jadi saya akan bikin sebuah file namanya produs.json ya nah isinya apa isinya kita akan lihat di sini contohnya jadi anggap aja kita akan manggil nanti sebuah Ajax api di mana E itu nanti produ suggestion nanti balikannya itu Aray dari data produk misalnya ya Jadi teman-teman silakan masukkan data produk aja sebanyak-banyaknya misalnya J ini nanti aray di dalamnya itu ada contohnya ada ID satu ya Ada [Musik] name produk 1 ada juga e price contohnya 1000 misalnya atau 100 deh ini saya akan copy Nah kita akan ubah dulu ya ini produk du ini produk 2 ini 200 Misalnya ini produk 3 produk 3 misalnya di sini 300 teman-teman silakan masukkan sebanyak-banyaknya ya Ee teman-teman maunya berapa ini contohnya 4 4 400 Oke selesai nanti file yang publ ini itu teman-teman bisa akses ya langsung e akses url-nya di sini contohnya eh produs tik json ya Nah nanti hasilnya ini adalah eh langsung json seperti ini ya Jadi row-nya ini jsonnya Oke jadi nanti kita akan bikin halaman eh produ list ya Di mana akan mengambil data produknya dari sini menggunakan Ajax Oke jadi sekarang kita akan bikin E komponen produknya dulu jadi ini untuk menampilkan data produk produknya isinya simpel di sini ada produk lalu di sini ada produk id-nya produk name-nya dan seterusnya Oke kita akan coba buat di dalam produk di sini kita akan buat namanya produk. jsx ya Nah kita akan buat di sini misalnya export default function produ lalu di sini e product Nah jadi kita bikin propsnya adalah products nah kita returnkan langsung di sini e Div misalnya dua Nah ini kita ambil produk ID misalnya ya lalu di sini product name-nya nah lalu di sini kita tambahkan P misalnya harga produk price Oke selesai jadi kita bikin ini untuk detail tiap produknya ditampilkan dalam bentuk seperti ini Oke sekarang kita akan bikin produk list-nya ya Jadi kita akan ee bikin produ list kita lihat contohnya di sini nah ini product list ya Nah ini product list isinya adalah di sini menampilkan daftar produk ya kita map dari produknya lalu di sini produknya kita ambil dari e key-nya pakai produk ID dan produknya kita kirim data produk yang kita iterasi Nah sekarang pertanyaannya Gimana cara mengambil datanya Oke cara mengambil datanya kita simpel sekali Sebenarnya ya jadi di sini kita akan gunakan use effect nah use effect ini ya itu dia akan dirender setelah render selesai eh sori dipanggil setelah render itu selesai jadi pastikan teman-teman ya ketika teman-teman di sini melakukan perubahan data state hati-hati karena akan dirender ulang ketika dirender ulang maka dia akan Dipanggil lagi Jadi jangan sampai teman-teman di sini isinya mengubah data Eh produ misalnya nanti kan otomatis dirender ulang Nanti dipanggil lagi dirender ulang lagi Dipanggil lagi jadi akhirnya tidak berhenti-berhenti ya jadi istilahnya itu adalah e infin e Infinite Loop ya nah jadi itu hati-hati nanti kita akan demokan jadi di sini Biasanya kita akan bikin istilahnya itu penanda ya jadi di sini kita bikin state-nya pakai products ya set products ya di sini kita gunakan us atau teman-teman mau use emer silakan Nah di sini misalnya kita use effect ya Nah ini di sini teman-teman masukkan function Nah kita cek dulu ya Apakah pernah dioad atau tidak Nah di sini saya akan bikin menggunakan reference ya E loaded kalau dia e load-nya itu false maka baru saya akan Panggil menggunakan fch misalnya saya F ke produ Jason kemudian kita konversi jadi Jason lalu kemudian kita set produ-nya Nah setelah itu kita set loaded-nya ya currentnya menjadi true artinya sudah pernah dioad nah harapannya Ketika nanti kan di sini ada set products ya artinya akan ngetrigger render ulang nah ketika dirender ulang untuk yang kedua kalinya data produknya sudah ada nah tapi dia tidak manggil lagi isi dari kode v-nya karena kita sudah cek loaded current-nya itu menjadi true di sini diubah Nah kalau teman teman tidak tambahkan ini maka ini akan terus-terusan dipanggil dan itu bahaya ya karena akan terjadi Infinite Loop nanti kita coba demo Oke kita akan coba dulu jadi di sini kita akan bikin produ list. jsx E export default funtion misalnya di sini product list Oke jadi yang pertama kita bikin dulu produs ya lalu set product ya sama dengan use state ya Nah ini saya masukkan Aros dulu nah lalu kita akan returnkan di sini H1 di sini produ list ya lalu di sini kita coba produs ya titik map produ oke di sini e produk ya Nah lalu produknya itu kita ambil dari produk nah saya akan tambahkan key ya itu dari produk ID nah seper seperti ini selesai nah ini kalau teman-teman coba tampilkan Ya saya akan coba tampilkan di mainjs di sini ini produk list misalnya seperti ini kita coba buka di sini produk html Nah asnya masih kosong ya karena data produknya tidak ada Jadi yang harus kita lakukan adalah kita akan gunakan use effect ya Nah use effect nah lalu di sini kita akan coba eh tambahkan di sini Nah jadi use effect Nah kita mau ngelakuin apa nah kita kan akan fetch ya fetch data contohnya nanti json di/produs.json ya Nah lalu then kalau sudah dapat ya respons-nya eh respons-nya saya mau ambil respon json nah seperti ini Oke then kemudian saya mau ambil e datanya itu berarti saya akan set produ ke data ini Nah kalau sudah selesai kita mau ngapain nah ini saya akan demokan seperti ini dulu ya Nah kalau tu-an perhatikan loh udah keluar nih udah oke nah jangan berbahagia dulu ya kita lihat dulu nih di inspect konsol ini enggak kelihatan biar lebih enak saya akan coba tambahkan konsol ya konsol titik info eh Call use effect Nah lihat dia manggil terus tuh terus-terusan manggil tuh ya Jadi ini tuh akan dipanggil terus-terusan Kenapa pertanyaannya loh kok dipanggil terus-terusan karena kita melakukan perubahan data produk karena kita melakukan perubahan data produk maka otomatis komponennya akan dirender ulang karena komponennya dirender ulang maka use effect-nya itu akan Dipanggil lagi setelah proses rendernya Nah jadi ini kayak Infinite Loop ya Jadi tidak akan berhenti-berhenti jadi teman-teman pastikan harus dihentikan Gimana cara hentikannya kita bisa bikin state contohnya loaded sama dengan use ref misalnya ya Nah ini contohnya default-nya false dulu jadi ini kita cek dulu nih ya Nah kita cek dulu misalnya n di sini eh if misalnya loaded titik current-nya sama dengan false baru kita Panggil nah tapi jangan lupa Den nah ini eh kita set dulu ya eh sori loaded titik current-nya sama dengan true nah seperti ini saya save Nah lihat dia berhenti ya saya akan refresh Nah lihat dia berhenti ya Nah pertanyaannya loh kok ini dobel ada dua kali misalnya ya nah jadi jadi ini dua kali pertama gitu ya itu karena tadi ini ya yang EE striak mode teman-teman enggak usah khawatir ini gara-gara striak mode nah lalu yang ini Ini adalah ee dipanggil karena kita melakukan perubahan data produk jadi dipanggil sekali lagi tapi harusnya ini enggak Dipanggil lagi Ya Nah karena dia berhenti di sini nah jadi seperti ini kalau teman-teman mau use effect Nah jadi kita biasanya buat manggil ya Eh data contohnya atau diintegrasi dengan sistem di luar dari si rea-nya ya Oke jadi Sekali lagi saya tekankan hati-hati dengan Infinite Loop ya secara default efek akan dieksekusi setelah proses render nah Oleh karena itu kita perlu berhati-hati karena jikalau di dalam efek kita mengubah state maka bisa terjadi Infinite Loop ya yang menyebabkan proses render ulang terus-terusan terjadi tanpa henti jadi kode yang sebelumnya kita praktikkan contohnya di sini ini akan membuat Infinite Loop ya Kenapa karena set produ-nya diubah terus di use effect jadi ketika baru ditampilkan use effect-nya jalan ternyata diubah ya state-nya maka diender ulang lagi nah lalu use effect-nya Dipanggil lagi dirrender ulang lagi terus saja gitu gitu ya Dan ini jangan dilakukan oke yang terakhir kita bahas tentang efek Clean Up pada beberapa kasus mungkin kita butuh melakukan sesuatu setelah eksekusi efek ya selesai dilakukan nah Seperti contohnya misalnya kalau ada triy catch itu kan biasanya ada finally ya ya jadi try catch gitu ya nanti bisa ada finally-nya nah di efect juga ada proses seperti itu ya di efect terdapat proses yang namanya Clean Up clean up itu akan dieksekusi setelah proses effect selesai ya Nah caranya cukup mudah kita tinggal returnkan closure function di dalam efeknya nah Clean Up ini akan dieksekusi sebelum efek selanjutnya dieksekusi Jadi bukan berarti oh dipanggil efeknya Habis selesai dipanggil efeknya dipanggil clean up-nya enggak enggak seperti itu Jadi dia akan dipanggil efeknya dulu Nah nanti kalau dia akan memanggil efek selanjutnya contohnya gara-gara Trigger ulang e render ulang Nah maka barulah clean up-nya akan dieksekusi ya nah jadi e seperti itu Jadi kalau kalau misalnya efeknya akan dilanjutkan ke efek selanjutnya baru dia akan ditrigger ya clean upnya atau kalau komponennya teman-teman hilangkan baru dia akan ditrigger si clean upnya nah cara membuatnya itu simpel ya teman-teman tinggal returnkan aja di use effect ini returnkan aja closure Nah nanti ini akan dipanggil ya Nah ini akan dipanggil Kalau memang dia akan m-rigger use effect selanjutnya kalau belum ya itu tidak akan dipanggil Nah nanti kita lihat bedanya ya Oke kita akan coba ya sekarang tambahkan di sini misalnya Oke saya akan tambahkan return ya ini closure ya Nah contohnya di sini konsol info misalnya produ list ee e component unmounted misalnya ya Oke sekarang kita akan coba ya nah saya akan refresh nah teman-teman Perhatikan ya Eh ini keluar produ list unmounted ini product list unmounted ya Nah ini kan dua kali karena ini ya karena striak mode Ya nah tapi kalau teman-teman perhatikan di sini kan Eh sudah di-set ya eh sorry di call effect yang kedua ini ini sudah di-set data produknya nih menjadi data produk yang banyak nih dari api tapi di sini Kalau teman perhatikan tidak ada produ list komponen unmounted di bawah artinya ini kan tiga kali dipanggilnya ya usep-nya 1 2 3 tapi kok ininya cuma dua kali dipanggilnya Nah karena sebenarnya yang Clean Up ini dipanggil ya kalau akan memanggil efek selanjutnya jadi ini dipanggil nih efeknya lalu clean up-nya dipanggil Kenapa dipanggil karena harus memanggil efek selanjutnya Nah otomatis efek selambutnya ini misalnya dia dipanggil lagi nih clean up-nya Kenapa karena dia harus manggil efek selanjutnya Nah di sini sekarang ini belum dipanggil yang Clean Up ini belum dipanggil pertanyaannya Kenapa belum dipanggil karena kita belum memanggil efek selanjutnya nah kecuali memang terjadi render ulang yang mentrigger pemanggilan use effect selanjutnya nah barulah dipanggil si ininya Nah jadi ini cocok banget nih ya eh teman-teman menempatkan sesuatu misalnya ya kode-kode yang contohnya kalau komponennya di close misalnya ya atau dihilangkan baru dipanggil clean up-nya jadi tidak langsung di clean up e ya contohnya teman-teman di sini buka koneksi webscket misalnya Nah nanti aja di sini teman-teman tambahkan disconnect websocket Nah nanti kan disconnectnya nanti ya ketika memang eh ininya komponennya dirender ulang atau dihilangkan kalau komponennya tidak dirender ulang atau tidak dihilangkan maka websocketnya tidak akan di tutup jadi akan aman jadi bukan berarti langsung ini dipanggil habis itu ini dipanggil enggak enggak seperti itu Jadi ini dipanggil dulu ya nah tapi ini dipanggil nanti kalau komponennya dihilangkan atau komponennya diestroy ya eh atau eh use effect selanjutnya Nah jadi ini adalah use effect Jadi kalau teman-teman butuh integrasi dengan sistem eksternal ya Contohnya kayak Ajax api atau mungkin komponen di luar dari react gitu ya Nah teman-teman bisa gunakan effect hooks ini sekarang kita bahas tentang effect Dependency Oke kita akan lanjutkan tentang efek ya jadi secara default eek itu akan dieksekusi setiap selesai proses render jadi setelah dirender ulang maka akan dieksekusi efeknya nah artinya kalau proses render dilakukan berkali-kali maka efek juga akan dieksekusi berkali-kali setelah proses render selesai nah hal ini menjadikan kita harus melakukan pengecekan secara manual Seperti contohnya di materi sebelum nya ya kita misalnya tidak ingin kode efek dijalankan berkali-kali Nah makanya kita cek dulu misalnya Apakah pernah dioad atau belum misalnya Si produknya baru kita eh jalankan si e kode logic effect-nya nah use effect sebenarnya memiliki parameter kedua yaitu adalah dependensy nah dependensi ini ya kalau teman-an perhatikan eh di use effect ya Nah kita akan lihat contohnya di use effect ini ada parameter dependensi nah dependensi ini memang opsional isinya apa dependensi itu sebenarnya isinya adalah daftar state yang kita mau dengarkan kalau state itu berubah baru use effect-nya dijalankan oke ya jadi kita bisa mengisi dependensi dengan Aray dari state di mana artinya efek hanya akan dieksekusi kalau state tersebut berubah jadi kita bikin Aray teman-teman tinggal masukkan state-state mana yang memang boleh m-rigger eh eksekusi dari efeknya kalau misalnya perubahan state-nya bukan itu maka tidak perlu dipanggil efeknya nah ini lebih gampang gitu ya dibanding kita bikin E flagfag manual ya di semua efeknya nah hal ini mungkin lebih mudah dibanding kita melakukan manual melakukan if Else ya pengecekan apakah e harus e di panggil atau tidak si efeknya Oke contohnya ya kita akan coba modifikasi yang produ listnya nah sebelumnya ya kita akan Eh ini ya bikin contohnya di sini eh produk produk nah lalu contohnya yang load Ya saya akan Ubah menjadi state nah lalu saya akan tambahkan ee tombol klik yang merubah load-nya menjadi true misalnya seperti ini nah lalu di sini kita gunakan use effect ya Nah di sini saya use effect-nya itu akan mendengarkan dari dependensinya adalah load artinya apa kalau value load-nya itu berubah Nah baru saya pengen dipanggil sih nih efeknya ini dalamnya Kalau misalnya tidak berubah maka saya tidak pengin dipanggil Nah kita bisa gunakan seperti ini jadi teman-teman bisa Oh efek Ini contohnya untuk data a saja ya udah saya akan e dengarkan data A jadi kalau data a-nya berubah baru efeknya akan dieksekusi Nah kita bisa lakukan seperti itu jadi daripada kita eh kalau teman-teman tidak memasukkan di sini eh ini dependensi maka secara default eek itu akan selalu dijalankan tiap render Nah kadang-kadang kita enggak mau hal ini dilakukan kita pengin kalau ada perubahan di state tertentu baru kita pengen jalankan misalnya seperti itu Oke kita akan Coba ubah ya yang produ list yang sebelumnya Oke kita akan ubah di sini Ya nah tapi cara mengubahnya Kalau scin ini kan otomatis muncul ya Nah Saya pengin tambahkan tombol tombol di sini button Misalnya ini load product Nah jadi nanti kalau saya klik load products-nya barulah muncul eh ininya ya datanya jadi dirigger oleh load products jadi di sini on cck misalnya handle Click ya Nah seperti ini Nah kita akan bikin di sini function handle Click oke nah Ini nanti kita akan e ubah state-nya jadi di sini kita akan gunakan eh load dan juga set load sama dengan state default-nya adalah false oke di sini ya Eh kita akan set load-nya menjadi true Ya misalnya seperti ini nah lalu di sini kita akan coba kalau dia memang harus dioad ya baru saya akan Panggil Nah kalau tidak ya tidak perlu jadi ini tidak perlu saya ubah lagi state-nya nah ini teman-teman Tinggal tambahkan di sini parameter yang kedua adalah load misalnya ya Nah seperti ini jadi kita akan Coba refresh biar ininya clear nah seperti ini ya Nah artinya kalau saya Trigger load gitu ya maka dia akan ee e dipanggil ya si use effect-nya karena load ini dia berubah nilainya jadi dia hanya akan dirigger kalau state load-nya itu berubah kalau tidak berubah dia tidak akan dipanggil si use effect-nya Oke saya coba klik ya Nah lihat dia muncul Nah kalau saya coba klik lagi Ya Nah lihat dia tidak dipanggil Padahal saya di sini set through terus ya Atau saya tambahkan konsolle eh info misalnya eh handle cck ya nah saya coba load nah lihat dia keluar handle Click terus ya artinya E state-nya itu diubah terus-terusan di sini Nah tapi dia tidak dipanggil lagi Karen Apa karena use effect itu mendeteksi Oh load itu ternyata nilainya tetap true berarti tidak perlu saya panggil ulang si eh kode use effect-nya jadi memang hanya dipanggil ulang kalau memang gitu ya Eh nilai s si load-nya itu berubah contohnya jadi false misalnya nah baru dia dipanggil ulang nah tapi kalau tidak seperti ini maka dia tidak akan dipanggil ulang nah jadi teman-teman bisa tambahkan ya yang dependensi seperti tadi oke Ada juga empty Dependency ya kadang-kadang itu mungkin kita hanya ingin memanggil EF sekali saja sebelum pertama kali komponen diender Nah setelah itu kita tidak mau memanggil efeknya lagi bahkan kalau terjadi render ulang Saya tidak mau memanggil efeknya lagi misalnya pada kasus seperti ini kita bisa gunakan mempt Aray sebagai dependensinya maka efek hanya akan dipanggil sekali saja setelah proses render pertama kali Nah selanjutnya tidak akan Dipanggil lagi nah jadi teman-teman jangan Samakan ya antara tidak ada parameter sama MT Ar Kalau tidak ada parameter maka artinya dia akan dirender ulang terus-terusan sampai e selama proses render ulang ya Dipanggil terus-terusan maksudnya nah tapi kalau tidak MT Dependency MT are maksudnya itu dia cuma akan dipanggil sekali aja Nah jadi kalau nanti dirender ulang dia tidak akan Dipanggil lagi nah jadi simpelnya contohnya kalau teman-teman pengin bikin use effect yang cuma dipanggil sekali aja ketika proses ee pertama kali di load ya diender Nah teman-teman tambahkan MT Aray nah artinya walaupun nanti dia akan dirender ulang dia tidak akan pernah Dipanggil lagi Oke kita akan coba ya jadi saya akan tambahkan di sini use effect misalnya saya akan coba tambahkan di sini konsol eh info misalnya eh Call use effect MTI misalnya ya seperti ini Oke jadi di sini kita tambahkan MTI selesai nah saya akan Coba refresh Nah lihat di sini ada call use effect with mtrrii ya Nah ini gak usah khawatir Kenapa dua kali karena ada striak mode lalu kalau saya coba load Nah lihat ya kalauan perhatikan tidak dipanggil lagi yang use effect ini ya dia masuknya langsung ke handle Click produ list compponent unmounted lalu call usack yang ini nah artinya yang ini tidak dipanggil lagi nah Nah jadi kalau teman-teman mau ubah berapa kalipun gitu ya Nah dia tidak akan Dipanggil lagi Jadi kalau teman-teman tambahkan MTI Arai dia cuma dipanggilnya sekali aja ya nah tapi kalau kita hapus MT ar-nya saya akan Coba refresh saya coba load gitu ya Nah lihat dia dipanggil lagi ya lihat jadi dia akan dipanggil terus-terusan ya Nah seperti ini jadi setiap dia render ulang Contohnya seperti ini ya Ini dia dipanggil lagi nah jadi teman-teman bebas ya mau menentukan apakah dia mau sekali aja kalau sekali aja teman-teman tambahkan MTI Ari kalau teman-teman pengin terus-terusan dirender ulang e dipanggil ulang ya use effect-nya ke ketika proses render Nah teman-teman tinggal hapus ya atau kalau teman-teman pengin Oh kalau misalnya ada state yang berubah baru dirender gitu ya Nah teman-teman tinggal tambahkan di sini state Mana yang mau eh men-trigger proses yang use effect ini nah jadi ini adalah efek dependeny sekarang kita bahas tentang asing code di efek kadang-kadang saat kita berhubungan dengan sistem eksternal misalnya memanggil api biasanya kan kita bikin kodenya dalam bentuk asing misalnya ya Nah sayangnya Efek itu tidak mendukung asing function nah Oleh karena itu kalau kita bisa menggunakan promise secara langsung nah kita bisa saja langsung gunakan promis-nya jadi tanpa menggunakan asing wiight nah contohnya di kode sebelumnya ini kita menggunakan promise ya jadi teman-teman gunakan F Den Den dan sebagainya jadi ini tidak bisa kita konversi menjadi asing weight karena memang use effect itu tidak mendukung asing e function nah tapi kalau kita memang mau menggunakan asing uate maka kita harus buat function yang e nanti dipanggil di use effect-nya nah misalnya kita akan Coba ubah kode sebelumnya ya menjadi kode asing ya lalu kita akan coba ambil data produknya menggunakan kode asing W tapi tidak bisa langsung di dalam promis-nya jadi teman-teman harus bikin dulu function-nya nya Nah sebenarnya sih kalau teman-teman ee sudah terbiasa menggunakan promise saya sarankan teman-teman menggunakan promise Ya karena memang secara default-nya si react-nya itu tidak mendukung yang e di use effect-nya itu tidak mendukung e asing wiit kita akan coba nih kalau teman-teman coba ee ubah di sini menjadi asing misalnya ya kita akan coba running kita coba E jalankan nah ini error ya enggak kelih lihat enggak muncul harusnya di sini ada errornya sih Nah di sini ya nah ini kelihatan ya use effect must not return anything beside a function ya Which is user use for Clean Up nah ini enggak enggak bisa nah jadi ini enggak bisa kalau teman-teman pengen eh asing function ya di sini dikasih tahu ya teman-teman bikin dulu di sini asing function-nya lalu teman-teman baru panggil si asing function-nya di sini nah jadi kita bisa lakukannya seperti itu Jadi enggak bisa kita langsung di sini asing di dalamnya harapannya ada wight-nya nah itu sayangnya enggak bisa nah jadi ini kita harus hapus lagi lagi Oke kita akan coba modifikasi yang product list jadi kode asing tadi kalau teman-teman pengen konersi jadi asing weight ya kita bikin dulu di sini contohnya fetch products nah ini adalah asing function contohnya Ini produ-nya apa kita ambil dari fage lalu itu habis itu kita wait lalu kita set produk Nah nanti yang vage produ ini Kita tinggal panggil aja fage product selesai jadi kita lakukannya seperti itu ya Oke kita akan coba nih Oke jadi kita konversi dulu ya jadi di sini teman-teman tinggal e ganti aja e bikin asing function asing e function ya Nah di sini contohnya F product Oke kita pindahkan aja semuanya Ya nah tapi kan pindahkannya ini bukan promise lagi misalnya jadi kita eh cons respon sama waight ya Nah lalu misalnya cons eh data ya sama dengan waight respon json lalu kita akan Set produ-nya data Nah kita lakukan seperti ini Nah nanti kalau dia load Ya tinggal kita Panggil fetch produk-nya nah seperti ini nah seperti ini ya Oke saya akan Coba refresh Nah ya saya akan Panggil Nah lihat hasilnya hampir mirip Nah jadi kalau teman-teman mau bikin kodenya asing uet teman-teman bungkus dulu dalam sebuah function Mau disimpan di dalam use effect atau mau disimpan di luar misalnya ya silakan aja tapi intinya di sini cuma bisa panggil langsung metod-nya ya Jadi tanpa asing wiit Nah jadi ketika kita Panggil fetch product ini sebenarnya balikannya berupa Eh ini ya Eh promise Oke setelah teman-teman tahu ada eh effectf hooks mungkin teman-teman sekarang terinspirasi Oke semuanya kita akan ee gunakan efek saja gitu Ya nah tapi sebenarnya rekomendasi dari reactnya itu sendiri jangan terlalu banyak menggunakan EF Nah kita bahas di sini hal-hal Yang jangan menggunakan effectf ya Oke jadi effectect Hook itu adalah cara di luar ya dari yang biasa dilakukan di react Nah effectf itu memungkinkan kita keluar dari kebiasaan di react dan memungkinkan komponen kita berinteraksi dengan eksternal sistem Contohnya seperti nonreact compponent atau network contohnya Ajax api call dan lain-lain Nah kalau tidak ada interaksi dengan eksternal syistem maka sebaiknya jangan menggunakan efek jadi eek itu memang difokuskan untuk berinteraksi dengan eksternal system kalau teman-teman interaksinya dengan dalam komponennya SI rea sendiri contohnya atau perubahan state atau masih menggunakan state konteks dan lain-lain itu Usahakan jangan menggunakan efek ya jadi meminimalisir penggunaan efek akan membuat kode kita mudah untuk dibaca dan cepat dieksekusi ya dan juga minim error Nah jadi jangan ter lalu abuse ya istilahnya tu fitur dari efek ini jangan dibikin dikit-dikit pakai efek dikit-dikit pakai efek gitu ya kecuali memang kita mau integrasi dengan sternal system Oke contohnya jangan gunakan efek untuk inisialisasi aplikasi nah kadang-kadang beberapa proses dilakukan di awal sebelum halaman itu ditampilkan nah pada kasus ini gunakan saja kode javascript langsung di luar dari reactnya jadi teman-teman mau bikin variabel kah Mau bikin apa gitu ya Nah itu teman-teman bikin aja langsung gitu ya di luar dari kode react-nya dibanding teman-teman menggunakan e ya untuk inisialisasi aplikasi Nah kenapa Karena kan kita tahu kalau eect itu akan dieksekusi setelah proses render artinya setelah ditampilkan nah artinya react-nya sudah terlanjur muncul dulu ya E objeknya Jadi kalau teman-teman butuh sebelum react-nya bahkan dieksekusi ya teman-teman langsung bikin kode di javascript aja Nah jadi seperti itu Nah selain itu juga kalau di react itu kan dieksekusi ulang tiap render ulang jadi teman-teman harus menambahkan pengecekan logik jadi kalau mau bikin contohnya misalnya teman-teman bikin Global variabel itu teman-teman bikin di luar dari reak aja ya langsung di kode javascript-nya oke yang terakhir jangan gunakan e effect untuk mengubah data di server nah jikalau terjadi logic di eek melakukan perubahan data di server ini perlu hati-hati contohnya teman-teman bikin efek untuk ee mengirim data ee misalnya data barang gitu ya atau mengirim data produk nah itu harus hati-hati Kenapa karena kan Efek itu bisa dieksekusi berkali-kali karena proses render ulang contohnya kalau di mode development stak mode itu akan melakukan pemanggilan efek dua kali bayangkan teman-teman berharap di e bikinkan objeknya sekali ternyata dikirimnya dua kali Nah itu kan berbahaya atau tiap render urang dikirim ulang lagi dikirim ulang lagi itu kan bahaya untuk servernya Nah jadi kalau teman-teman mau mengirim perubahan data ya ke server itu jangan menggunakan efek ya Nah kecuali teman-teman mau mengambil data ya kayak sebelumnya kita praktiikkan itu kan enggak masalah karena kita tidak mengubah data di servernya nah Oleh karena itu tidak direkomendasikan untuk menggunakan eek untuk mengubah data di server nah lantas pertanyaannya lah kalau saya pengin ngubah data gimana nah kalau mau mengubah data ya gunakan aja event handler ya karena kan event handler tujuannya memang untuk Side Effect ya untuk perubahan efek samping Jadi kalau teman-teman contohnya mau mengirim data ke server ya gunakan event handler contohnya ketika form-nya di-submit ketika e tombolnya diklik baru kita kirim gitu ya jangan menggunakan efek Nah jadi menggunakan efek bisa menyebabkan perubahan data di server terjadi berkali-kali karena proses render ulang komponen Nah jadi ini adalah beberapa hal ya yang teman-teman perlu perhatikan ketika menggunakan efek jadi Efek itu memang ada tapi teman-teman juga harus bijak menggunakan Hook effects-nya ini sekarang kita bahas tentang memo ya memo itu singkatan dari memoization ya Nah memo ation adalah teknik optimasi untuk mempercepat program di komputer kita ya dengan cara menyimpan data secara sementara ya di memori biasanya dari hasil kalkulasi yang biasanya berat ya Nah sehingga kita tidak perlu kalkulasi ulang jadi contohnya teman-teman mau mengkalkulasi a gitu ya Nah dibanding teman-teman kalkulasi ulang berkali-kali padahal hasilnya bakal sama ya lebih baik teman-teman simpan data sebelumnya ya hasil kalkulasinya ketika teman-teman pengin coba kalkulasi a lagi ya balikin aja ya data yang sebelumnya jadi kita tidak perlu kalkulasi ulang nah ini adalah bagian dari performance hooks namanya ya Nah di mana kita bisa menggunakan function yang namanya use Memo ini callback-nya apa ini dependeninya apa Jadi ini mirip seperti penggunaan effect ya Nah kita bisa lihat di sini Jadi ini adalah use memo ya Nah di sini adalah function untuk mengkalkulasinya jadi anggap aja di sini function eh beratnya ya nanti di sini adalah dependensinya dependensi itu adalah ketika ada perubahan eh state di sini misalnya ya Nah nanti baru saya mau panggil ulang si function-nya Kalau tidak ada perubahan maka saya akan gunakan data yang sama misalnya seperti itu Nah ini adalah case value-nya jadi ini hasilnya nah ini cocok untuk kasus misalnya kita perlu memanggil kode yang berat Ya dan hasilnya selalu sama sebenarnya nah dibandingkan kita Panggil terus-terusan Setiap proses render lebih baik kita lakukan sekali saja dan pada proses pemanggilan berikutnya kita cukup kembalikan hasil yang pertama jadi tidak perlu di render ulang atau tidak perlu dikalkulasi ulang oke contohnya ya misalnya pada aplikasi notes yang sebelumnya sudah kita buat kita ingin tambahkan proses untuk mencari notde nah jadi teman-teman bisa nyari notde nyari notde itu kan misalnya proses yang berat karena kita harus nyari dari semua notes semakin banyak notes-nya semakin berat proses pencariannya Nah kalau misal pengguna melakukan pencarian dengan value yang sama dibandingkan kita lakukan pencarian ulang kita kembalikan aja hasil yang sama seperti yang sebelumnya contoh Saya nyari notes-nya Misalnya Echo lalu saya nyari chcho lagi lalu saya nyari chcho lagi gitu ya berkali-kali ya dibanding saya harus e filter ulang filter ulang gitu ya ya udah balikin aja value yang sama karena toh hasilnya bakal sama Nah kita bisa gunakan memo Oke kita akan Coba ubah ya Yang sebelumnya jadi Yang sebelumnya Yang not list itu kita akan ubah ya jadi di sini kita akan bikin Eh ini ya Eh search input-nya ya Nah di sini search input-nya ee itu untuk ini ya untuk ee input ya di sini ya untuk input ini untuk pencarian ya nanti ketika teman-teman misalnya ee ada tombol klik ketika saya klik tombolnya Nah nanti saya pengin lakukan pencariannya jadi simpelnya gimana ya simpelnya adalah di sini eh handle search-nya ya itu Saya akan cek ya search input value-nya gitu ya kalau misalnya value-nya eh berubah nanti saya akan ubah Nah nanti saya ambil di sini filtered notes-nya Nah di sini ya Ada filtered notes itu menggunakan use Memo ini adalah function untuk pencariannya itu simpel noes eh sorry noes tik filter lalu kita cari yang teksnya ada kata yang dicarinya nah ini kalau misalnya eh search-nya berubah ya baru saya akan panggil si use memonya di dalamnya kalau ternyata s-nya tidak berubah ya saya tidak akan Panggil ngapain saya panggil gitu ya karena datanya tidak berubah nanti kita akan tambahkan ini ya console lock filtering notes untuk memastikan Apakah dia di panggil lagi atau tidak Oke kita akan coba Oke jadi ini halamannya adalah yang notes ya Nah ini nanti di sini saya akan tambahkan input baru untuk memfilter data ini jadi di sini contohnya eh saya akan ubah ya yang not list-nya di sini Oke jadi di sini kita akan tambahkan dulu ya jadi di eh sini kita akan e bungkus dalam Div misalnya nah di atasnya di sini kita akan tambahkan input untuk pencariannya ya Nah di sini ini eh place holder misalnya search oke lalu di sini kita tambahkan button ya lalu buttonnya search oke nah input di sini kita kan perlu e teks ya Nah di sini saya akan bikin state ya cons eh search state Nah di sini kita pertamanya kosong dulu ya string kosong Oke selanjutnya lalu di sini tombolnya ketika onciikck misalnya itu kita akan Coba search ya Jadi kita handle misalnya search nah jadi kita akan bikin function handle search ya nah kita kan pengin dapetin di sini contohnya eh ini ya kita pengin dapetin input yang ada di sini lalu kita akan Timpa ke dalam search ini ya state-nya Jadi yang perlu kita lakukan berarti kita harus dapetin input-nya dulu nih caranya gimana nah caranya kita bisa menggunakan reference ya Jadi kita gunakan cons misalnya di sini search input sama dengan use ref ya Nah ini default-nya N0 dulu Nah nanti kita akan kasih di sini ref adalah search input nah selesai jadi ini yang kita cari ya itu ya tinggal set search itu tinggal search input titik current titik value-nya apa ya jadi value dari si in -nya selesai Nah berarti kan setiap ada perubahan search-nya akan berubah ya Nah kalau search-nya berubah misalnya Saya pengen Trigger biasanya kan kita Trigger efek misalnya nah ini enggak kita pengen Trigger memo misalnya ya jadi caranya gimana caranya tinggal use memo ya Nah teman-teman tinggal bikin use memo di sini nah lalu kita bikin Nah di sini tinggal contohnya misalnya eh returnkan ya Eh data Notes itu kan nots itu nanti itu dia adalah Aray ya filter misalnya note itu note titik teks-nya itu includes itu kalau ada kata search-nya nah seperti ini selesai nah ini kita akan simpan ya datanya di namanya filtered notes sama dengan seperti ini Nah kita mau ya use Memo ini dirigger ulang ya Eh untuk isi dari function ini itu kalau yang berubah adalah notes-nya dan juga e ininya ya E search-nya nah seperti ini kalau tidak ada yang berubah ya udah enggak usah gitu ya enggak usah dirigger ulang berarti dia akan menggunakan yang sama Nah untuk lebih jelas kita akan coba tambahkan konsol info misalnya ya di sini filtering notes nah nah ini misalnya consol info eh search ya Nah lalu terus di mana terus filtered Note ini kita pakai untuk gantikan yang notes di sini jadi Ini pakainya filtered notes selesai ya Nah sekarang kita lihat lihat ini dipanggil ya filtering notes-nya karena ini pertama kali dipanggil tapi ini kenapa dua kali sekali lagi ini adalah karena karena striak mode ya Nah sekarang kita akan coba tambahkan misalnya Echo misalnya saya add nah lihat filtering notes-nya itu Dipanggil lagi kenapa karena notesnya berubah karena notesnya berubah maka ing notes-nya itu Dipanggil lagi yang ini nah tapi kita akan Coba lakukan pencarian contohnya pencarian eh CSS ya nah saya akan Oh saya ini harus huruf besar CSS saya search nah dia panggil searchnya ya jadi handle searchnya itu dipanggil Nah filtering notes-nya otomatis Dipanggil lagi kenapa karena eh ininya set search-nya itu berubah jadi dependensi di search ini berubah kalau saya klik lagi Ya Nah Lihat senya berubah terus ya saya klik ya setusnya Dipanggil terus tapi kalau tem-an perhatikan filtering notesnya itu tidak dipanggil lagi jadi yang Memo ini tidak dipanggil lagi pertanyaannya Loh kenapa tidak dipanggil lagi karena datanya tidak berubah jadi ini tetap CSS karena datanya tetap CSS di sini notesnya E searchnya dan notesnya juga tidak berubah secara otomatis gimana ya Secara otomatis ini tidak akan diubah ya jadi filtering notnya akan mengembalikan nilai yang sebelumnya nah Jadi kalau orang ng-esarch berkali-kali gitu ya Nah ini lebih aman karena kita tidak memanggil yang metod anggap aja di sini metodya E berat gitu ya Nah itu tidak dipanggil berkali-kali kecuali dia ganti ya contohnya html search nah dia baru dipanggil tapi kalau saya klik html lagi gitu ya Nah lihat dia cuma search aja tapi dia tidak e memanggil si filtering notes lagi nah jadi ini kalau teman-teman mau menambah performance dari e aplikasinya ya Di react-nya jadi kita bisa menggunakan use memo di mana Di sini kita wrap function ini ini yang function yang berat misalnya dan teman-teman pengin ng-etrigger function ini kapan dipanggil ulang itu berdasarkan state di dependeny ini Jadi mirip seperti use effect ya sebenarnya Oke jadi sekarang sebenarnya teman-teman hampir sudah mengerti semua hooks ya yang ada di react nah pertanyaannya bisa enggak sih kita bikin Hook sendiri contohnya kan kita menggunakan imer Ya imer itu kan dia punya Hook juga n namanya use Emil atau use email reducer itu kita bilang adalah hooks juga walaupun sebenarnya di dalamnya menggunakan state Hook ya dan juga reducer hooks tapi intinya itu hooks juga ya jadi teman-teman juga bisa kalau teman-teman pengin bikin hooks juga kita sekarang akan coba Bikin custom hooks ya jadi custom e hooks buatan kita sendiri jadi react secara default sudah memiliki banyak hooks untuk kita gunakan untuk mempermudah membuat aplikasi menggunakan react nah tapi kita juga bisa membuat Hook secara manual kalau kita mau nah membuat hooks biasanya menggunakan function dengan awalannya use makanya kayak use Tate use reducer gitu ya use memo use effect atau juga yang use imir dan lain-lain nah contohnya ya kita akan coba Bikin hooks untuk mendeteksi Apakah sekarang Eh kita sedang online atau sedang offline Nah nanti kalau online nanti nilai hooks-nya adalah true kalau sedang offline nilai hooks-nya adalah false misalnya seperti itu Nah kita pengin bikin kayak gitu ya Nah kita akan coba Bikin oke sekarang teman-teman bikin dulu ya halamannya online.html lalu registrasikan ke Fed config kita akan coba eh Nah ya ini kita akan coba buka Nah ini kita akan eh online ya online nah seperti ini nah lalu kita akan copy yang counter kita paste online.html nah ini saya akan ganti online Oke kita akan buat di sini folder namanya online Nah kita akan bikin main jsx oke seperti biasa create root ya documen get Element by ID root lalu render ya stak mode Nah kita nanti tambahkan Oke selanjutnya yang perlu kita bikin kita akan bikin online hook-nya ya jadi di sini saya akan bikin file namanya online Hook ya nah ini sebenarnya teman-teman bisa pakai JS aja kalau isinya kode JS atau ya jsx kalau nanti akan ada elemennya ya nah saya akan pakai jsx jaga-jaga kalau nanti akan ada elemennya nah kurang lebih seperti apa ya Nah kurang lebih seperti ini jadi kita akan bikin sebuah function yang namanya Use online nah lalu kita akan di dalamnya bikin state state-nya itu adalah is online dan juga set is online Nah nanti kita returnkan state is online-nya Jadi kalau nanti dia itu online nanti return-nya otomatis dia akan true misalnya kalau dia offline itu returnnya false nah caranya gimana nah karena kita harus berinteraksi dengan E Browser ya nah jadi kita akan gunakan use effect jadi use effect di sini e function yang pertama ini handle online ya ini set online-nya menjadi true lalu di sini function untuk handle offline ini set online-nya menjadi false nah ketika use effect Ini pertama kali berjalan kita mau di Window browser kita menambahkan event listener kalau online kita pengin handle online Nah kita akan tambahkan juga window add Event listener yang offline itu kita handle offline jadi Intinya kalau browsernya itu online maka otomatis set is online-nya jadi true kalau dia offline maka set is offline-nya eh sorry set is online-nya menjadi false Nah jadi nilainya jadi true false jadi simpel banget nah habis itu jangan lupa kita tambahkan e Clean Up effect ya di sini nah jadi kalau misalnya sudah tidak digunakan lagi misalnya state-nya kita mau clean up di mana kita remove evenent listener-nya Nah jadi kita remove yang online dari method ini e function ini dan kita remove yang offline dari function ini Oke kita langsung praktiikkkan ya Jadi di sini kita akan eh bikin export function Use online ya jadi nama depannya itu pakai use lalu kita bikin eh state ya is online lalu di sini set is online sama dengan use state nah ini default-nya e true misalnya ya oke selanjutnya kita returnkan is online nah seperti ini Oke jadi kita akan use effect nah ini kita akan coba ya bikin function handle online dan juga function handle offline Nah kalau yang online kita set is online-nya jadi true Nah kalau yang ini set is online-nya jadi false Oke selanjutnya tinggal gunakan kan window add evenent listener ini misalnya kalau dia online kita akan handle online nah lalu kalau dia offline Nah kita mau handle offline nah Lalu setelah itu tinggal kita returnkan clean up method-nya itu Window remove event listener ya yang online itu yang handle online kita hapus lalu juga yang handle offline kita hapus juga Oke selesai Jadi sebenarnya simpel ya untuk bikin E hooks Oke sekarang kita akan coba ya Jadi kita akan coba gunakan contohnya saya akan bikin online jsx nah isinya simpel kita gunakan hooks kita nah lalu kita coba tampilkan kalau dia online e tampilannya apa kalau dia offline tampilannya apa Oke kita akan coba langsung ya kita berarti bikin file baru di sini online jsx e export default function ini adalah online misalnya Oke kita akan bikin is online sama dengan Use online ya Nah seperti ini Oke kita akan returnkan di sini langsung aja H1 misalnya nah kalau dia is online kita mau Tampilkan tulisannya adalah online ya eh sorry ini pakai ternar Kalau tidak offline nah selesai jadi cuma seperti ini aja kita akan coba tampilkan di sini online Oke selesai kita coba tampilkan di sini oke ini online ya Nah lihat dia online ya Kenapa karena Kebetulan saya lagi online saya akan coba disconnect dari wi-fi saya contohnya saya akan coba tutup ya Nah lihat dia berubah menjadi offline jadi secara otomatis tuh nah kalau saya coba connect lagi ya ke Inter net Ya misalnya nah lihat dia berubah menjadi online lagi nah jadi seperti ini kalau teman-teman mau bikin custom hooks ya Jadi tinggal bikin sebuah function yang balikannya eh apapun itu ya sebenarnya teman-teman tinggal gunakan use belakangnya nama hooks-nya Oke teman-teman sebenarnya materi react dasar itu sudah selesai ya Jadi teman-teman sekarang sebenarnya sudah mulai bisa membuat aplikasi menggunakan react ya ya kalau teman-teman pakai yang EE khusus untuk react dasarnya nah sebenarnya banyak juga fitur-fitur kecil lainnya yang mungkin bisa membantu teman-teman itu teman-teman bisa baca langsung referensi lengkapnya nah sebenarnya sih fitur secara e Garis besarnya itu sudah kita bahas semua di materi react dasar ini tapi kalau teman-teman pengin baca Lebih Detail itu saya sarankan teman-teman baca referensi dari react-nya di sini Jadi ini adalah react reference ya jadi fiturnya apa aja seperti hooks Ya sudah kita bahas kayak kayak komponen dan lain-lain jadi ini teman-teman bisa baca juga kalau teman-teman mau contohnya di hooks di bagian sini itu kita sudah bahas kayak stat Hook context Hook dan lain-lain nah banyak juga ya metode-metodenya contohnya e teman-teman use contex gitu ya use effect itu semuanya e ada penjelasan Lebih detail lagi kalau teman-teman pengin memperdalam lagi nah termasuk yang komponen gitu ya komponen juga sama yang kita pakai sing sering yang kayak gini ya Ini namanya adalah fragmen contohnya Lalu ada striak mode itu untuk apa gitu ya ini untuk mode development dan lain-lain Nah jadi ada banyak sekali ya di sini kalau teman-teman pengin baca lebih detailnya tapi sebenarnya semuanya hampir sudah kita bahas semuanya ya Nah teman-teman kalau pengin Lebih detail lagi ya untuk referensi lengkapnya yang mungkin agak sulit kalau dibuatkan videonya ya teman-teman bisa baca langsung di halaman react reference ini jadi saya sarankan teman-teman juga jadikan ini sebagai acuan ya kalau teman-teman pengin tahu lebih detailnya Oke teman-teman selesai sudah ya materi tentang react dasar jadi saya ucapkan selamat sekarang harusnya teman-teman sudah mengerti Bagaimana cara membuat e aplikasi front end ya itu menggunakan react jadi simpel banget teman-teman tinggal ganti semua e halaman teman-teman jadi berbasiskan komponen dan teman-teman bisa reuse komponennya di semua halaman web yang teman-teman buat Nah kira-kira apakah akan ada lanjutannya untuk materi react ini ya nanti kita akan buatkan materi lanjutannya tapi lebih tepat tepatnya bukan materi react lagi ya tapi lebih ke ekosistem pendukung dari si react-nya Nah next-nya kita akan coba bahas Beberapa ekosistem pendukung yang lumayan populer nah salah satunya adalah react JS router lalu kita nanti juga akan bahas react JS redaux ya Nah Sebelumnya kan kita hanya bikin satu halaman satu halaman Nah kadang-kadang kan kalau kita bikin website gitu ya kita penginnya ee bikinnya misalnya multihalaman ya dan multihalaman itu gampang kita bikinnya pakai react semua misalnya Nah nanti kita bahas di materi di react router ya Nah nanti juga kita akan bahas tentang redux ya Jadi kita tahu kalau state managementen yang di react itu basisnya di komponen aja misalnya nah kadang-kadang kita butuh yang e set managemennya itu yang agak sedikit kompleks yang global gitu ya Yang bisa multi halaman atau juga multi komponen gitu ya nanti kita juga bahas di materi react redux ya nah jadi ini adalah dua materi yang nanti kita akan tambahkan di kelas react ini Oke jadi itu aja teman-teman ya kalau teman-teman ada kritik saran atau pertanyaan teman-teman bisa di masukkan di kolom komentar atau teman-teman juga bisa diskusinya di discord-nya programmer zamanau kita ketemu lagi di materi selanjutnya salam programmer zamanau bye bye