Halo semuanya apa kabar mudah-mudahan semuanya dalam keadaan sehat ya kembali lagi di channel wpu bersama saya Sandika Galih dan kali ini kita akan memulai sebuah seri baru dimana seri ini menjadi seri yang paling banyak diminta oleh teman-teman semua dari sejak cukup lama ya teman-teman ya jadi serinya itu adalah mengenai tutorial riak kita akan coba membahas sebuah teknologi yang sangat populer saat ini yang dinamakan dengan react dan kalau teman-teman lihat judulnya Bahkan teman-teman bukan hanya akan mendapatkan tutorial trik tapi akan mendapatkan tutorial react yang paling masuk akal untuk pemula penasaran kan maksudnya Seperti apa makanya tonton terus videonya sampai akhir oke teman-teman ya kalau misalkan teman-teman mau langsung ngikutin tutorialnya sebenarnya teman-teman bisa langsung skip aja videonya ke menit berikut ini kalau teman-teman enggak mau ngedengerin saya ngomel atau menggerutu dulu nih di awal-awal kenapa mau menggerutu dulu karena kita akan bahas dulu mengenai hal yang paling masuk akalnya terlebih dahulu ya mungkin teman-teman ada yang nanya kenapa paling masuk akal Pak Emang ada ya tutorial yang nggak masuk akal Ya jadi kita bahas ini dulu ya Jadi selain memang supaya judulnya agak-agak klik beite Saya mau kasih tahu dulu Alasannya kenapa saya bilang paling masuk akal Jadi yang pertama gini kalau kita mau belajar sebuah teknologi bahasa pemrograman atau Framework atau library atau apapun lah ya itu kan sebetulnya tempat belajar paling tepat adalah dari dokumentasi resminya bener nggak teman-teman jadi sebenarnya kita jangan dulu cari-cari di tutorial-tutorial lain kita jangan dulu cari di Youtube kita jangan dulu cari di take over flow tanya chat GPT kita baca dulu dokumentasi resminya dari pembuatnya karena kan harusnya dokumentasinya lah ya ngasih tahu kita teknologi itu apa Cara pakainya gimana dan lain sebagainya ya Dan menurut saya dokumentasinya rileks ini kurang masuk akal khususnya untuk pemula dan ini menurut saya Ya teman-teman ya jangan marah dulu tenang Nanti kita akan cari tahu kenapa menurut saya enggak masuk akal pasti ini buat teman-teman yang udah jago react ada yang enggak setuju nih sama saya ini tapi sebelum ke sana kita bahas dulu mengenai definisi pemu dulu ya si pemula apa sih maksud saya di sini ya Jadi maksud saya pemula di sini dia adalah yang udah belajar javascript udah tahu javascript Ya udah tahu gimana cara bikin aplikasi menggunakan javascript dia udah tahu yang namanya manipulasi Dome dia udah tahu teknik-teknik javascript PS6 misalnya ya tapi belum pernah pakai react atau bahkan belum pernah menggunakan istilahnya front and Framework gitu Jadi udah bisa javascript tapi belum pernah pakai react itu Yang saya maksudkan dengan pemula di sini ya supaya nanti kita sepakat dulu Jadi silakan posisikan teman-teman di sini sebagai orang yang misalnya udah belajar ya Mas script tapi belum pernah pakai react nah ceritanya kita mau belajar react nih jadi kan kita datang dulu nih ke dokumentasinya ried ya jadi dokumentasi reak kalian bisa datang di read.dave/ nanti kita akan buka sama-sama dan jangan salah menurut saya ini sebetulnya salah satu dokumentasi yang bagus banget cuman buat pemula enggak masuk akal aja dan bahkan buat teman-teman yang belum tahu sebetulnya kita tuh punya dokumentasi reak yang berbahasa Indonesia jadi kalau teman-teman belum tahu teman-teman bisa kunjungi di halaman ini di id.triax.dev jadi ini adalah dokumentasi reak yang sudah diterjemahkan oleh jagoan-jagoan program Indonesia yang keren-keren banget ya supaya kita lebih mudah belajarnya nih jadi kalau teman-teman kunjungi id.3/ Nah ini teman-teman Lihat tutorial trik dalam bahasa Indonesia itu tadi Silakan teman-teman baca Ya ini kita buka sama-sama Nah ini dibuat oleh developer developer keren Indonesia yang ini nih ini maintenernya jadi kita harusnya berterima kasih sekali buat teman-teman developer ini yang udah bantuin kita untuk bisa baca dokumentasi reak berbahasa Indonesia dan dari sini hampir semuanya Saya kenal Saya bahkan berkesempatan untuk ketemu langsung ya mereka orang-orangnya keren-keren semua selain developer developer yang jagoan kontribusi mereka terhadap dunia open source juga luar biasa Jadi saran saya teman-teman kunjungi link ini lalu klik nama-nama developer ini langsung follow aja githubnya atau sosial medianya ya jadi respect banget buat developer developer Indonesia ini Nah sekarang kita ke dokumentasi rekan dulu ya kita akan lihat Kenapa menurut saya ini nggak masuk akal Ya ini pada saat kita datang ke sebuah dokumentasi yang pertama kali ingin saya tahu setidaknya untuk saya nih ya adalah mengenai Apa itu teknologinya dan kebetulan di sini kita nggak ketemu langsung setidaknya penjelasan mengenai Apa itu react ya Jadi kalau teman-teman lihat di sini kalimat pertamanya di sini adalah Ini kan ada jargone atau tank lainnya dia adalah library untuk web dan active user interface oke ya sekarang kalau Scroll ke bawah kita langsung dikasih tahu membuat user interface dari komponen Nah di sini dikasih tahu react membuat kita dapat membangun user interface gitu Jadi bukan Apa itu react tapi apa yang bisa dilakukan oleh riek gitu Padahal kalau saya Saya pengin tahu dulu ya itu apa yang pertama kita enggak bisa lihat ya kalau Scroll ke bawah Cara pakainya nah dan Cara pakainya itu kita tiba-tiba di dari sebuah function kita nggak dikasih tahu ini function kita taruh di mana Jadi seolah-olah riyek ini dibikin untuk orang yang udah tahu Cara pakainya cara pakai front and Framework atau front and library gitu Kalau teman-teman udah tahu maka baca ini akan lebih mudah tapi buat yang belum tahu dan sama sekali belum pernah pakai menurut saya agak bingung Padahal kalau teman-teman lihat dokumentasi reak yang versi sebelumnya ini Kebetulan saya juga buka ini dokumentasi reak yang lama ya teman-teman lihat ini tagline-nya agak berbeda kalau ini menurut saya lebih mudah dipahami ya sebuah javascript library untuk membuat UI kalau yang tadi kita lihat sebuah library untuk web dan native UI itu bedanya dan kalau di Scroll ke bawah yang lama tuh kita dikasih tahu penjelasannya react adalah library yang deklaratif berbasis komponen belajar sekali tulis di manapun katanya gitu Kalau menurut saya sih ini lebih lebih menarik gitu ya walaupun tetep aja kalau kita Scroll ke bawah simple komponen nah ini komponennya ditaruh di mana nih Apakah saya copykan ke file javascript saya langsung jalan Kayaknya nggak gitu Nah kalau misalkan kita telusuri lagi yang baru ya kita balik ke yang baru terus sekarang kita masuk ke learn katanya kalau mau belajar react masuk yang learn ini yang pertama kita langsung dikasih tahu quick start Selamat datang di read dokumentation halaman ini memberikan kita pendahuluan ke 80% konsep proyek yang bisa dipakai sehari-hari katanya jadi langsung dikasih tahu satu halaman ini udah ngasih tahu kalian 80% Apa yang bisa dilakukan oleh riek katanya dianggap kita belum ngerti apa-apa ya baru tahu javascript Scroll ke bawah langsung dikasih tahu bikin komponen katanya ketemulah position nah ini functionnya saya taruh di mana gitu Kan ini menurut saya agak bingung jadi karena saya pengen belajar react ini buat diajarin lagi itu yang bikin saya bilang dokumentasi ini kurang masuk akal sampai saya udah coba buka satu-satu sampai saya masuk ke installation-nya nah begitu saya masuk ke installation ada satu menu di sini yang tulisannya start a new react Project nih Katanya gini kalau kita mau membangun sebuah aplikasi atau sebuah website yang secara full menggunakan react kami rekomendasikan supaya kita memilih salah satu dari react Framework Waduh saya pikir Iya kayaknya aja belum belajar terus kita tiba-tiba dikasih tahu kalau mau bikin aplikasi atau website pakai ring pakailah remote nah salah satunya ada yang disebut dengan next GS Saya tadinya enggak akan mengunjungi xcs karena saya pikir reak-nya aja belum paham kan Tapi karena setelah saya baca beberapa halaman di depan sini masih belum menemukan alasan kenapa pelajari saya coba deh masuk ke sini ke next GS nih di sini ada next JS tutorial nah ini di halaman setelah saya masuk ke sini saya baca tutorialnya sedikit yang saya baca ini katanya next GS adalah sebuah frame create yang fleksibel blablabla gitu ya ini saya masih belum ngerti terus ke bawah nah ini ada di sini apa itu riek jadi saya menemukan Apa itu riek bukan di dokumentasi reaknya mulai dari react adalah apa bahkan dikasih tahu user interface itu apa Nah ini menurut saya ini lebih masuk akal dan kalau kalian lihat ke kiri di atas kiri ya ini ada satu menu yang menuliskan from javascript to react kalau kalian klik Nanti kalian bisa tahu bagaimana belajar react kalau kalian datang dari javascript nah ini yang saya cari gitu ya jadi untuk mencari pendahuluan tentang bagaimana kita belajar react malah saya nemunya di sini di next JS jadi teman-teman bisa kunjungin aja linknya di sini ya next js.or/foundation slash from JavaScript dan ini menurut saya adalah dokumentasi Riyad yang paling masuk akal gitu Jadi sebetulnya maksud saya yang paling masuk akal di sini adalah dokumentasi react yang ada di next JS ini Paling masuk akal untuk pemula jadi kalau kita kembali ke sini kalian bisa belajar mengenai react dengan mengikuti ada 9 halaman di sini ya Ada 9 menu yang bisa kalian klik dan ini menurut saya cocok banget buat kalian yang pemula silahkan ikutin aja tutorial yang ada di next CS atau penjelasan yang ada di next CS ini kalau kalian benar-benar belum pernah belajar atau belum pernah menggunakan react sama sekali ya tapi kalau misalkan Kalian mau belajarnya bareng-bareng sama saya untuk mengikuti tahapan-tahapan yang ada di website next DS ini untuk mengetahui cara pakai riak Seperti apa fungsi utama yang ada di read itu apa aja sampai nanti akhirnya kita bisa membuat sebuah aplikasi yang sangat sederhana dengan menggunakan trik ya teman-teman ya jadi itu mungkin pengantarnya sedikit keluh kesah saya mengenai dokumentasi dari reak Oke teman-teman sekarang kita masuk ke bagian dan yang pertama seperti biasa kalau teman-teman ngikutin tutorial di channel BPU pasti kita akan bahas dulu mengenai ketika kita mau belajar sesuatu sebuah teknologi frame claberry atau apapun pertama-tama pasti kita akan belajar dulu mengenai apa dan kenapanya dulu ya Jadi sebenarnya apa itu react dan Kenapa sih kita harus pakai reagen jadi sabar dulu buat yang pengen bikin aplikasi pakai riak kita bahas definisinya dulu ya Oke sekarang kita lihat Apa itu react di kota di teman-teman baca di website nxjs itu katanya react adalah sebuah library ya library javascript untuk membuat antar muka pengguna atau UI user interface ya user interface itu antar muka pengguna yang interaktif menurut mempelajari keyword keyword yang ada di kalimatnya nah sedangkan antar muka pengguna itu adalah elemen-elemen pada layar yang kalian bisa lihat dan kalian interaksikan ya bisa diklik bisa digeser bisa di Scroll bisa kalian input sesuatu ya jadi pokoknya yang bisa kalian lihat dan interaksi kan itu adalah user interface atau antar muka pengguna nah terus berikutnya Kenapa sih reyex disebut Lib Kenapa bukan disebut tremor nah ini katanya dia disebut library karena react tuh menyediakan fungsi-fungsi untuk membangun ui jadi dalamnya kita bisa pakai fungsi-fungsinya Tapi terserah kita sebagai developer mau pakai fungsi yang mana Jadi nggak ada aturan khusus harus bikinnya sesuai urutannya seperti ini nggak ada aturan khusus kalian harus bikin struktur foldernya seperti apa arsitekturnya seperti apa ada best practice-nya tapi secara umum diserahkan atau dibebaskan ke para developernya Kenapa karena react itu disebut sebagai library yang UN opinion Jadi silakan aja bebas para penggunanya untuk ber opini atau menggunakan caranya masing-masing gitu beda dengan Framework banyak Framework yang udah diatur dari mulai instalasinya struktur folder yang udah dibikinin konfigurasinya udah dikasih tahu tinggal kita edit-edit ya seperti itu jadi reak relatif an opini terserah kita sebagai developer untuk pakainya mau kayak gimana nah itu menyebabkan si ekosistem dari react ini jadi besar dan berkembang karena banyak cara banyak ragam banyak varian banyak gayanya masing-masing gitu untuk ngoding menggunakan riet sehingga tools pihak ketiganya itu banyak banget ya ini bisa jadi keuntungan bisa jadi kerugian ya kalau untuk yang baru mulai belajar atau pemula biasanya sesuatu yang UN opininated itu malah bikin bingung gitu ya buat yang udah expert buat yang udah tahu bisa bongkar pasang bisa ubah sana ubah sini yang unloping United itu bisa membebaskan dirinya jadi buat pemula kadang-kadang justru yang opinion yang udah dikasih tahu caranya yang lebih mudah ya tapi itu ada dua perbedaan aja ya nah sekarang kita lihat sejarahnya sedikit ya jadi reak ini dibuat pada tahun 2013 awalnya oleh seorang yang namanya Jordan walk Dia adalah seorang engineer di Facebook Kayaknya sampai saat ini juga masih ya react saat ini udah ada di versi 18.2.0 ya jadi saat video ini dibuat itu 18.2.0 mungkin aja teman-teman yang nonton nanti di masa yang akan datang ini udah lebih baru jadi selalu pastikan sesuaikan siapa tahu nanti versinya berbeda dokumentasinya beda Cara pakainya juga beda Nah pertama kali dibuat itu karena Facebook itu makin besar ya jadi saat itu tuh lagi nggak develop Facebook Ads mulai ada fitur chatting yang di bawah kanan tuh ya terus karena baru mengakuisisi Instagram Facebook tuh lagi melakukan integrasi supaya antara Instagram sama Facebook itu bisa informasinya sih plus gitu melakukan update di Facebook Instagram ikut berubah melakukan update di Instagram yang ada di Facebook juga bisa ikut berubah gitu misalnya ya terus juga lagi bikin atau ngembangin mobile app-nya untuk Facebook sehingga UI dari masing-masing aplikasi tadi itu kan harus lebih mudah dikelola gitu kalau kita misalnya melakukan sesuatu di mobile ya pastikan Pengennya yang di desktop berubah gitu Nah untuk melakukan itu Nah makanya dikembangkanlah si Riyad ini walaupun sebelumnya namanya bukan trik yang menggunakan nama yang lain atau bahkan library atau remote yang lain ya Dan ini teman-teman sebetulnya bisa lihat di halaman dokumentasi di bagian community terus ada reak video jadi teman-teman masuk ke dokumentasinya react di atas ada community nanti masuk di bagian video di sini ya ini ada video penjelasan mengenai react dari mulai yang paling baru mirip conference sampai yang paling bawah nih yang tadi saya jelaskan itu ada di paling bawah nih video pertama tentang ried Saran saya teman-teman nonton ya videonya ini keren banget ya Jadi ini si Jordan work-nya ini ini ada Tom okino dia ngejelasin mengenai awal mula Kenapa sih ada reak gitu ya ini Sakti banget nih oke berikutnya Kenapa disebut reyex disebut reyex itu karena pengennya itu menjadi sebuah library yang reaktif reaktif gitu ya yang artinya apa Dia memiliki kemampuan untuk bereaksi atau merespon secara dinamis ketika ada interaksi atau perubahan data jadi ketika kita melakukan sesuatu pengennya aplikasinya itu cepet bereaksi gitu nah ini sebetulnya reaktif reaksi nah saat ini tim membuat triac yang bikin rileksnya kortimnya itu terdiri dari engineer engineer yang ada di Meta atau di Facebook ya terus engineer engineer yang ada di fair sale dan kebetulan tadi next JS yang teman-teman lihat itu kan yang buat perusahaannya versial juga ya jadi saya juga yakin kalau dokumentasi reak yang dibuat oleh Verrell itu pasti bener gitu karena engineer Kebanyakan orang versal juga gitu ya dan selain dari dua perusahaan ini banyak juga kontributor dari seluruh dunia baik itu yang ngembangin core-nya koreknya maupun kontributor untuk yang lain itu salah satunya tadi dokumentasi ya Nah dan sampai saat ini ini yang mantap ya yang keren react ini sudah unduh atau didownload sebanyak 19,3 juta kali kalau kalian lihat statistiknya di NPM dan kalau kalian buka repository-nya digital itu yang ngasih start udah 200.000 lebih gitu start ya jadi sangat populer sekali ya itu ya Jadi teman-teman sedikit mengenai react Apa itu react terus sejarah nyarinya terus awal mula reaksi Seperti apa mudah-mudahan jadi kebayang lah ya berikutnya kita masuk ke bagian kedua kita akan mencoba untuk transisi dari javascript ke read kita lihat dulu kalau misalkan teman-teman udah tahu javascript mau masuk create itu sebenarnya apa sih yang ditawarkan oleh riek itu ngapain pakai riak kalau javascript aja bisa melakukan hal yang bisa dilakukan oleh Ryan kita lihat ya jadi supaya nanti kedepannya kita bisa paham reactnya kalau kita udah paham javascript Oke kita lihat kita mulai dengan mengingat-ingat kembali Gimana caranya halaman web kita atau browser kita ngerender UI hasil codingan html kita atau istilahnya Bagaimana browser itu menginterpretasi coding kita untuk menghasilkan UI nggak usah ngomongin yang interaktif dulu sebetulnya menghasilkan UI aja dulu ya nih jadi saat kalian ngoding dengan kode yang ada di sebelah kiri Ini contohnya kan kita kalau loading web itu pasti punya struktur seperti ini ya Nah ML ada body di dalamnya kita bisa bikin ada gifnya terus kalau mau bikin judul halaman pakai heading kalau mau bikin list pakai Ul atau OL dalamnya ada Li ya Jadi ini yang kita ketikkan di kode editor kita ya begitu kita save dan kita buka di browser nah sebetulnya yang terjadi adalah browser akan membuat sesuatu yang disebut dengan Dom ya pasti udah tahu kan dokumen objek model jadi dia akan memodelkan struktur coding yang sebelah kiri menjadi ilustrasinya adalah sebuah Dome Tree pohon dong ya Kenapa disebut pohon dong Karena ada hierarkinya sama seperti hierarki susunan atau silsilah keluarga gitu ya ada parent ada Child kalau anaknya banyak ada children kalau parent-nya parent kita sebut grand parent kalau sejajar kita sebut dengan siblings atau saudara atau adik kakak lah ya si blinks gitu nah Jadi sebetulnya direpresentasikan sama browser sebagai dometri seperti ini jadi ada coding Kalian ada Doom 3 nah terus berikutnya Dome itu apa Dome itu adalah representasi objek kalau tadi kan visualnya ya Pohonnya itu visual sebenarnya di belakang layar bentuknya Dom itu dia adalah objek visualkan supaya kita gampang lihat dan mahamin aja ya sebenarnya Dom itu dia objek dari HTML tadinya coding diubah jadi objek jadi yang tadinya Tri seperti ini bisalah tampil di ui-nya atau di browsernya jadinya seperti ini jadi dari source code diterjemahkan dulu jadi Dome baru tampil lah di ui-nya secara presentasinya Ya sesimpel apapun kalian nulisin coding html-nya dan kalau misalkan teman-teman masih bingung mengenai Indomie itu apa terus cara nyeleksi dong Seperti apa cara nelusurin dong Seperti apa sampai manipulasindo Seperti apa teman-teman bisa kunjungin aja playlist belajar dokumen objek model yang ada di channel wpu ini saya sudah buatkan cukup lengkap ada beberapa belas video ya Yang bisa kalian ikutin mulai dari teori dometri Bagaimana cara menyeleksi elemen pada Dome sampai Dome manipulasi ya Nah sebenarnya manipulasi Dome itu apa Jadi kita bisa mengubah tampilan atau mengubah UI yang ada di dalam halaman kita berdasarkan codingan htmlnya ya jadi kita bisa menambah mengubah atau menghapus titik-titik pada dometri tadi tapi nggak lewat codingan kita bisa memanipulasinya pakai javascript nih contoh Nih misalnya kita punya struktur html sederhana lah seperti ini ya kita punya html head title body dan sebuah Deep yang nama id-nya app misalnya jadi nggak aneh lah ya Div nama id-nya app isinya kosong udah ini kita coding-nya begini aja index html terus kita save Nah sekarang gimana caranya kalau kita mau menyisipkan tag H1 di dalam gif ini yang di dalam th1-nya ada tulisan Belajar react bareng wpu tambahin emoji roket lah gitu ya supaya masuk ke dalam Dev ini tapi enggak mengubah struktur html-nya kita mengubahnya pakai javascript pakai teknik domanipulation ya teman-teman harusnya bisa dong Jadi saya minta ini latihan Ya silakan di pause dulu videonya ketik ini di html kalian bikin aja file namanya index html terus aja di bawahnya bikin aja script Java script terus silakan manipulasi Agar kalian bisa nyicipin H1 di dalamnya oke silakan gimana sudah Nah kalau sudah kita lihat hasilnya nih jadi kalau teman-teman mau nambahin sesimpel hanya tag H1 aja yang ada tulisan Belajar bareng wpu ini yang harus kalian lakukan pertama bikin tank script dulu di bawah sebelum penutup body ya kalian bikin dulu script tipenya teks javascript terus yang pertama kali kalian lakukan adalah kalian seleksi dulu elemen app-nya yang ini kalian seleksi dulu pakai javascript ya pakai Dome selection kalian bisa pakai dokumen.get Element by ID jadi javascript Tolong carikan saya elemen yang id-nya APP atau kalian bisa pakai query selector ya dokumen titik query selector terus kasih hastag atau tanda pagar F gitu untuk menyeleksi elemen gif Setelah itu kita create elemen H1 jadi kita bikin dulu di memori kita bikin namanya header atau heading sih ini harusnya namanya headings kita bikin dokumen titik create elemen H1 disiapin tuh di memori h1-0 terus berikutnya kita bikin teks untuk elemen H1 tadi kita bikin elemen yang ada di dalam h1-nya yaitu tulisan Belajar react bareng wpu udah tuh jadi ada 2 note ada dua elemen ada teks ada H1 berikutnya adalah teksnya Kita masukin ke dalam H1 caranya kita append header konten ke dalam header jadilah kita rangkai itu H1 yang ada tulisan belajar di bareng wpu udah jadi itu masih di memori nih sekarang elemen H1 yang ada teksnya kita masukkan lagi ke elemen app yang udah kita siapin Nah kan kita Taruh lagi f a pen Child header masuklah tuh H1 ke dalam gif yang kosong tadi sekarang kalau kita lihat di browser muncul Tuh pelajari x bareng WP simple banget ini bisa dilakukan pakai Dome selection dan domeibolation ya mudah-mudahan kalian nyobain tadi ya Nah sekarang kita lihat bedanya antara source code yang pertama kali kita buat dengan hasil yang sudah ditampilkan ya ini perbedaan kode awal dan setelah dilakukan manipulasido nih kalau teman-teman Klik Kanan lalu view page source yang teman-teman lihat adalah codingan awal ada coding David app yang kosong Lalu ada script buat manipulasi dome-nya di sini h1-nya enggak ada karena h1-nya dibikin pakai javascript kan nah tapi kalau teman-teman Klik Kanan lalu pilih inspect tampilannya begini lihat codingannya beda yang di sebelah kiri enggak ada salah satunya tapi di sebelah kanan ada h1-nya jadi kalau teman-teman buka webnya pake inspek lalu klik tab Element ini adalah representasi dari Dome setelah kita lakukan manipulasi pakai javascript itu ya jadi inilah yang dilakukan ketika kita mau memanipulasi website pakai javascript Oke Harusnya sih nggak ada yang aneh ya jadi manipulasido menggunakan javascript yang pertama html yang kalian tulis itu merepresentasikan konten halaman awalnya jadi codingan awal tuh merepresentasikan konten halaman awalnya nah Dome itu merepresentasikan konten halaman yang telah di-update atau yang udah diperbaharui menggunakan javascript tadi Nah kalau kalian mengubah Dome menggunakan javascript polos atau istilahnya vanilla javascript enggak pakai Framework enggak pakai library apapun Emang kelihatannya Sakti ya kita bisa nambahin satu elemen kayak tadi ya nambahin H1 kita mau nambahin paragraf kita mau bikin supaya elemennya bisa diklik pakai javascript bisa dan kelihatannya keren gitu ya tapi nulisnya ribet teman-teman mungkin tadi enggak kelihatan karena kita nambahinnya cuman satu elemen H1 doang gitu ya tapi bayangin ketika Kalian mau bikin halaman yang utuh bikin button bikin card bikin navbar bikin slider gitu tapi pakai javascript kalian gak tulis manual tuh si htmlnya semakin banyak yang harus kalian buat pakai javascript pasti makin ribet karena harus diseleksi harus di create elemennya dimasukin ke dalam elemennya ribet gitu ya lama-lama yang tadi kalian coba Itu kan ditulis manual buat nambahin 1 buah H1 buat nambahin H1 aja kalian nulisnya begini bikin dulu elemennya bikin teksnya masukin teks ke elemen masukin Elemen Ke wadahnya gitu ya bayangin kalau kalian punya paragraf nah ingin kalau kalian punya list item ada beberapa create elemen yang harus ditulis gitu Jadi semakin banyak kalau pakai teknik yang tadi pakai javascript polos pakai vanila ya waktu yang kalian butuhin pasti banyak kan lama gitu ya nanti kita sebagai developer itu bakalan ngabisin waktu buat NU mungkin bagaimana sesuatu akan dilakukan Ya tadi kan satu-satu tuh bikin elemen masukin elemen simpen elemennya kedif jadi kita capek gitu nulisin satu-satu gimana-gimana gimana gimana nah alangkah lebih baik anaknya gitu ya kita bisa nulisin apa yang harus dilakukan bukan Gimana caranya tapi bikinin saya tombol bikinin saya heading Enaknya kan gitu ya Dan biarkan komputer yang mikirin langkah-langkahnya gitu kan enaknya gitu daripada Kita nulisin satu-satu mending kalian kasih tahu aja bikin heading udah nanti yang ngerangkai bikin elemen masukin ke sini masukin ke sini itu Pengennya sih biarin si komputernya gitu nah hal ini apa dan bagaimana ini ada istilahnya teman-teman ada yang disebut dengan imperatif atau deklaratif programming yang kita lakukan di javascript tadi yang polos itu itu disebut dengan imperatif ya sedangkan yang ingin kita lakukan itu disebut dengan deklaratif ya atau supaya lebih jelas kita bahas sedikit ya imperatif dan deklaratif programming jadi imperatif programming itu nulisin langkah demi langkah bagaimana sesuatu harus dilakukan bikin elemen masukin elemen masukin ke mana masukin ke mana gitu ya satu-satu gitu sedangkan deklaratif menuliskan apa yang pengen dihasilkan bikinin saya tombol bikinin saya heading yang bikin saya card bikinin saya naffter itu deklaratif mendeklarasikan atau istilahnya gini deh kalau imperatif programming itu seperti kalau kalian ke restoran pengin pizza gitu ya tapi kalian enggak bilang pengen pizza enggak Saya pengin peproni pizza gitu ya tapi enggak kalian datengin kokinya terus Kalian bilang satu-satu Pak koki tolong bikin adonan terus ratain adonannya terus masukin toppingnya terus masukin ke oven dengan suhu sekian tungguin nah kalian kalau nyuruh-nyuruh gitu ke kokinya di restoran diusir pasti makanya enggak gitu kalian datang ke restoran kalian pesen aja mau bikin apa dan kayaknya kalian enggak terlalu peduli gitu langkah-langkah yang dilakukan oleh si kokinya yang penting makanannya datang dimakan enak itu namanya deklaratif programming Nah kenapa saya jelaskan i dan deklaratif karena riek itu merupakan UI library yang deklaratif Nah dari sini aja Dari satu kalimat ini aja harusnya kalian udah bisa setidaknya memahami bahwa Oh react ini membuat sesuatu yang tadinya imperatif yang harus kita tulis satu-satu tadi bisa jadi deklaratif gitu itu aja harusnya udah bikin kita senang gitu berarti mempermudah nih ya jadi itu sedikit penjelasan mengenai apa yang rileks ingin lakukan gitu nah berikutnya yang seru nih kita masuk ke bagian ketiga yaitu kita akan mulai bekerja dengan reak Nah di sini kita akan coba bikin aplikasi yang sangat sederhana ya menggunakan trik Nah jadi buat kalian yang enggak sabar pengin react sekarang lah saatnya ya mari kita mulai reak ya kita baca dulu penjelasannya sedikit yang pertama nih kalau kita mau menggunakan react kita butuh dua script pria yang kita Panggil lewat sebuah cdn atau konten delivery Network jadi kita bisa menjalankan react-nya dengan memanggil library reach-nya di dalam script kita ini bukan cara yang disarankan tapi ini cocok banget buat kalian yang masih pemula dan baru pakai riak jadi kita nggak perlu mikirin dulu gimana cara ngompol reaknya atau melakukan bundling pada react-nya menggunakan sistem modulnya react nggak perlu kita bisa jalanin lewat file html yang sangat sederhana ya nanti kita lihat gimana caranya nah Tadi katanya ada dua script apa aja itu yang pertama adalah kita Panggil reak-nya itu sendiri sebagai library utamanya Terus di bawahnya kita Panggil package yang namanya react Dome supaya kita bisa menggunakan metode untuk manipulasi Dom memang mempermudah kita kalau mau nambah elemen menghapus elemen mengubah elemen dan seterusnya ya Jadi ada dua kalian nulisnya begini misalkan kalian punya indeks html kasih saja struktur dasar ya kasih Dev kosong sebagai tempat penampungannya tadi kalau tadi kan pakai javascript kita lihat deep-nya kita kasih ID app Nah kalau sekarang react ngasih namanya ganti ya kalau yang sebelumnya reak 17 itu id-nya app tapi di-read 18 dia ganti id-nya jadi root Nah kenapa nanti kita lihat ya tapi yang pasti nih yang tadi saya bilang reactnya manggil dua script tuh ini jadi ada scriptnya rileks 18 dari sini dan juga react Dome dari sini nanti di dalamnya kita tinggal buat nyiapinnya ini sebenarnya buat nyiapinnya kalian bikin javascript yang memanggil si root ini sebagai kontainer jatuh kalau misalkan teman-teman enggak mau ngetikin ini males Pak ngetik gitu ya kita kunjungin dokumentasinya Rex Silahkan datang ke dokumentasinya reyex terus klik learn terus kita ke installation supaya dapetin file-nya ya kalian Scroll ke bawah ada di sini try reactly ini kalian bisa download aja nih di sini Jadi kalau kalian klik Nanti kalian akan diarahkan ke sebuah script yang ada scriptnya ya yuk kita siapin Buka kode editornya di sini saya bakalan pakai Visual Studio code Oh ya Tapi sebelumnya tolong siapin dulu folder ya teman-teman ya saya udah nyiapin foldernya di desktop saya kasih nama foldernya Belajar react seperti ini supaya nanti kita bisa menyimpan file-nya di dalam ya kalau sudah silakan buka vsco-nya ini dia dibuka vscode-nya terus kita maksimas dulu kita ke file Open folder yang tadi yang ada di desktop ini ya kita select folder Nah sekarang kita bikin file namanya index html Oke kalian boleh copy-in semua script yang tadi dari dokumentasi reak-nya tapi kita akan copy-in dikit-dikit supaya nanti kita Paham maksud dari masing-masing garisnya apa Oke jadi teman-teman boleh ketik aja tanda seru Tab di sini nih supaya simple kita me tanya hapus dulu aja ya kita metanya hapus dulu di sini kita kasih belajar ya terus di bodynya tadi kita bikin sebuah gift yang id-nya root oke terus di bawah sini kita punya Script yang tipenya teks slash javascript yang di dalamnya kita panggil apa tadi cons lalu apa container dokumen titik get elemen by ID sebenarnya mau pakai query selector juga bisa ya pas Rip carikan saya elemen yang id-nya oke lah ya tinggal kita copy kan link ke reak-nya kita buka lagi tadi dokumentasinya kita copy 2 baris ini scriptnya aja ya kalian bisa lihat lengkapnya ada di sini ya cuman anggap aja kita nggak paham gitu ya Pak yang ada di dalamnya maka kita akan ikuti yang ada di tutorial next ys-nya dan copykan dua ini dulu kembali ke sini kita simpan di bagian head sudah ya Jadi kita udah manggil dua script save dulu jangan dulu dijalanin kita balik dulu ke slidenya Oke udah ya dua ini sudah berikutnya kita siapin aplikasi kita kita tadi udah bikin Dev yang nama kelasnya root itu akan kita jadikan sebagai wadah dari aplikasi kita ya Nah ini untuk menyiapkan aplikasi react kita butuh method yang namanya react Dome titik create ini diambil dari package Dome yang udah kita Panggil tadi Kalau kalian nggak panggil yang baris 2 nya ini nggak akan jalan ya method tadi kita akan gunakan sebagai wadah dari aplikasinya jadi react tuh pengen tahu dulu root aplikasinya mana nih Setelah itu kita butuh sebuah metode yang namanya render buat nampilin elemen yang kita mau dalam hal ini elemen H1 ya supaya kasusnya sama dengan kasus waktu kita bikin pakai html polos tadi ya Oke jadi nulisnya gini kita butuh variabel namanya root sebenarnya namanya bebas aja ya terus kita Panggil react Dome create root dari elemen yang udah kita tentukan tadi kebetulan tadi kan elemennya namanya Div dengan ID root kita simpan ke container masukin ke dalam create baru kita Panggil root titik render buat nampilin elemen yang mau kita tampilkan dari sini harusnya teman-teman sudah bisa lihat buat nampilin ya kita cukup satu baris kalau pakai javascript tadi kita butuh 5 sampai 6 baris ya kita coba dulu kalian mau ketik manual ini Boleh silakan disalin atau mau balik lagi kita copy dari script yang kita download juga bisa ya balik ke sini kita ambil aja ini nih ambil cuman kan di sini tulisannya My f ya ini disebutnya komponen kita masih akan bahasnya nanti ya kita copy dulu aja kita simpan di bawah sini Nah rendernya kan kita nggak mau my app ini apa kita belum belajar nih kita bikin manual aja kita pakai H1 kita tulis satu dulu ya terus misalnya kita tadi mau tulisannya apa Belajar react bareng wpu atau bareng Pak Dika itu kita munculin roketnya Pencet kalau kalian pakai Windows pencet Windows titik terus cari aja roket nah ini ya supaya muncul sudah nampilinnya cukup satu baris nah buat ngejalaninnya temen-temen bisa kalau pakai VSCO Klik Kanan terus open with Life server Kalau misalkan gak ada Pak saya kok nggak ada live servernya install dulu Klik tombol extension di sebelah kiri terus cari aja live server ini sebuah ekstension buat menampilkan web menggunakan lokal servernya Silahkan di install kalau sudah nanti kalau diminta restart vsco-nya restart aja tapi kalau nggak ya nggak usah udah balik lagi kita tutup saya bar-nya Klik Kanan Open with Life server nah tampilannya kosong gini teman-teman mana h1-nya Kalau kosong tampilnya atau enggak tampil apa-apa itu kemungkinan ada error Mari kita lihat errornya di mana ya caranya kalian Klik Kanan terus inspect terus kalian ke konsol nah ini ada error nih Katanya an token kenapa nih ternyata reak Tidak mengenali tag H1 di dalam rendernya Loh kenapa Mari kita kembali dulu ke slide ya harusnya teman-teman juga sama harusnya error ya errornya kayak gini tuh kan expected token ternyata memang ini adalah error yang diharapkan gitu justru kalau nggak error h1-nya tampil Nah itu justru ada yang aneh kenapa error nih karena ternyata react-nya enggak mengenali H1 ya di dalam metode render H1 ini bukan javascript Terus apa itu Itu adalah sebuah sintaks html atau ekstensi dari HTML yang namanya jsx dan secara default browser itu enggak mengenali jsx yang dikenal sama browser itu kan html cscript ya supaya si browser ini bisa mengenali CSX kita butuh sebuah compiler yang bisa menerjemahin jsx jadi syntax javascript biasa supaya kebaca Nah gimana cara menginstal compilernya Kita akan menggunakan sebuah compiler yang namanya bubble yang akan kita gunakan sebagai penerjemahnya ya Jadi kalian bisa nambahin bubble bubble itu websitenya resminya ada di sini sama ya kita pakai cdn lagi Lewat UN package ya tapi jangan lupa nanti kalian ubah tipe dari javascript menjadi teks slash jsx kan tadinya teks les javascript ya Untuk menginformasikan pada si bubble-nya bahwa kita bakalan ngubah jsx menjadi javascript nih kalian tambahin ini di atas script-nya terus jangan lupa nanti ganti nih tadi kan ini kita tulisnya javascript ya Oke kalian bisa copy lagi dari script yang di-download tadi nih kembali ke sini harusnya bubble-nya ada di sini Oh ini disimpannya di head ya ini Boleh aja Mau disimpan di head boleh kita kembali ke coding-nya kita simpan di head di sini kalau di slide saya disimpannya di bawah sini ya enggak apa-apa juga sama aja terus jangan lupa ganti ini bisa jadi CSX atau bisa jadi Bubble sama aja ya Kalau teman-teman ganti jadi Bubble nanti tulisan di sininya tetap warna-warni Oke sekarang kita lihat lagi nah sekarang errornya udah nggak ada tulisannya udah tampil tuh ya Mantap ya Sama nggak teman-teman jadi saya ucapkan selamat buat kalian karena itu adalah aplikasi react pertama kali ya harusnya Sekarang semuanya udah berhasil nampilin web seperti ini nah dan Sekarang kita akan lihat kita akan bandingin ya script vanilla javascript dan script yang udah kita buat nih ini javascript buat nampilin H1 yang tulisannya Belajar react bareng wpu tadi sedangkan teriak seperti ini Nah mungkin teman-teman bilang pak cuma beda 2 baris Pak enggak apa-apa lah pakai javascript ya memang kalau elemennya cuman satu bedanya 2 baris tapi bayangin kalau misalnya kalian bikin elemennya ada 5 10 20 akan menduplikat berapa baris ini kalau di-reac nambahnya enggak akan terlalu banyak tapi kalau pakai vanila nambahnya bisa berkali-kali lipat ya jadi menggunakan react itu bisa mempermudah atau mempersingkat manipulasi dong kita Mantap ya sekarang sebelum lanjut kita bahas dulu dikit mengenai jsx kali ya apa sih sebenarnya jsx itu Pak Apa bedanya sama html Nah kita lihat ya jadi jsx itu adalah sebuah ekstensi sintaks untuk javascript yang biasanya dipakai untuk deskripsiin UI yang sintaksnya kayak html Jadi sebenarnya yang kita tulis di dalam metode tadi itu javascript ya Nanti kalian bisa lihat tuh gimana caranya jsx bisa keluar masuk javascript dengan mudah tapi sebenarnya itu javascript yang bisa nulisin sintaks kayak html mirip html nah meskipun ada cara lain untuk bikin komponen-komponen tuh istilahnya elemen html-nya gitu ya Ada cara lain tapi kebanyakan developer itu pakai jsx untuk bikin komponennya jadi kita ikutin aja ya kita pakai jsx saja syntax jsx ini kelihatannya kayak html tapi dia lebih Strik nah Strike kayak gimana nanti kita lihat ya dan dia juga bisa nampilin informasi yang dinamis beda seperti html yang statis Nah untuk nulisnya kita harus ingat tiga aturan CSX jadi jsx itu punya tiga aturan penting yang harus kita ingat-ingat saja kita bahas satu-satu aturannya ada di sini ya kalau teman-teman mau lihat dengan lebih detail ada di dokumentasi reaknya yang pertama GSX ini pada saat kita render harus selalu mengembalikan satu buah elemen gak boleh lebih dari satu nah tapi kan kalau kita bikin komponen elemennya banyak Pak misalnya bikin card kan dalamnya ada tulisan ada gambar ada tombol Gimana bikinnya kita lihat yang kita udah coba Itu kan pada saat kita nge-render kita nampilin cuman satu elemen ya elemen H1 yang ada tulisannya ini enggak masalah karena cuman satu elemen jadi aman jadi tampil dengan normal dah tampil sekarang gimana kalau gini pada saat kita ngerender di dalamnya ada 3 elemen Nah kalau kalian tulis begini error Pasti karena metode render-nya tidak mengembalikan satu elemen malah 3 elemen kalau kalian pengen bikin ini menjadi satu komponen yang harus kalian lakukan adalah membungkus 3 elemen ini ke dalam satu elemen lagi karena kalau ini dijalanin ini Pasti error tuh ya Jadi kalau misalkan ada elemen J X yang sejajar gitu yang bersebelahan maka dia harus dibungkus dengan tag pembungkusnya Nah apakah yang Anda maksud adalah jsx fragmen jadi JSS fragmen itu adalah banyak elemen yang mau kita jadikan satu tapi tanpa bikin elemen baru Sebenarnya kalian bisa bungkus ini pakai Div tapi nanti div-nya jadi elemen sendiri kalau kalian gak mau kalian bisa bungkus pakai tank kosong kayak gini pokoknya metode rendernya harus ngembaliin satu elemen ya maka ini akan normal dengan asumsi kalian udah punya gambarnya ya itu yang pertama jadi harus ngembaliin satu elemen ingat-ingat yang kedua kalian harus selalu tutup semua tag-nya nah ini yang saya bilang tadi salah satu karakteristik jsx yang Strike kalau html itu enggak semua elemennya kita butuh tutup tang ya teman-teman kayak misalkan kalian bikin tag Ul terus di dalamnya ada le-nya kan l itu punya bukali sampai tutup Li Ya kalau kalian hilangin tutupnya jadi LED buka tulisan enggak ada tutupnya itu boleh sama html-nya boleh aja tapi kalau jsx wajib ditutup Contohnya kayak gini ya tadi semua udah bener h1-nya ada tutupnya bahkan kalau ada tag yang gak punya pasangan ya nggak punya penutup teks tersebut harus self closing jadi ini harus Ditutup nih Padahal kalau html nggak ada tutupnya begini nggak masalah kan kalau tag membuka tag penutup tuh oke lah ya biasanya juga kalian lakukan bahkan kalau di vscode udah ditutupin manual tapi kalau kalian lupa misalnya enggak pakai tutup kayak gini error dia antarminated jsx konten jadi dia anggapnya si jsx-nya enggak selesai itu yang kedua selalu tutup semua tag-nya inget-ingat yang ketiga Kalau ada atributnya kalian gunakan camel case hampir untuk semuanya ini contohnya kalau misalnya kalian punya method yang namanya on Click ya kan kalau di html tuh nulis on Click boleh aja kayaknya kecil tetap jalan tapi kalau di jsx harus huruf besar Nah ada beberapa atribut yang berubah nama contohnya kelas kalau di html kita mau ngasih kelas ke elemen cukup tulis kelas huruf kecil semua selesai tapi kebetulan di jsx kelas itu Udah dipesan namanya jadi tulisan kelas di sini beda nanti dia bentrok sama kelasnya javascript Makanya kalau kalian mau ngasih kelas di html di komponen kalian ganti jadi kelas name huruf n-nya jadi besar yaitu contohnya ya Jadi kalau kita udah masuk belajar jsx dengan lebih dalam kita bakalan tahu atribut-atribut apa aja yang bisa kita pakai Terus kalau berubah berubahnya Jadi gimana oke itu tiga aturannya dan ini kalau kita jalanin tampil color seperti biasa ya kalian boleh coba tinggal tadi di bawah saja videonya terus disalin ya jadi Itu sekilas mengenai cara pakai react yang sangat sederhana teman-teman berikutnya kita masuk ke topik yang saya sebut dengan Peri requised nah ini biasanya selalu saya sampaikan ketika kita memulai sebuah seri baru ya Di mana kita harus tahu dulu nih apa aja yang harus kita siapin Kalau kita mau belajar ya Baik itu dari sisi pengetahuannya atau dari sisi softwarenya ya kita lihat satu-satu yang pertama Materi apa yang harus kalian kuasai terlebih dahulu jadi jangan main loncat aja ke reak kalau materi-materi ini belum kalian pahami ya yang pertama jelas html dan CSS itu karena harusnya kalian udah bisa bikin website yang bagus dulu pakai atml CSS baru habis itu kalian belajar javascript fundamental ya ini harus nggak bisa dilewat ya kalian harus tahu mengenai variabel tipe data pengulangan pengkondisian objek function Rei harus ngerti dulu baru kalian belajar Dom ya karena jelas kalau misalnya Kalian pakai reyex tanpa ngerti dong kalian enggak akan ngerti manfaat react itu apa jadi cuman pakai-pakai saja tapi kalau kalian sudah pernah bikin sebuah aplikasi javascript pakai domanipulation yang polos gitu aja pastry polos pasti kerasa begitu pakai sebuah Framework atau labering Oh ternyata ini berusaha untuk menyelesaikan Problem apa ya berikutnya kalian harus paham juga mengenai teknik-teknik pemrograman di modern javascript atau S6 apa aja nanti kita lihat ya terus Kalian harus paham juga mengenai command Line interface dan juga gitu nanti kedepannya kalian akan sering banget menggunakan CLI atau terminal entah itu buat download package ambil dari kitab repository orang jadi harus bener-bener paham Gimana caranya menggunakan gate dan juga menggunakan terminal ya atau CLI kalau kalian nginstal Git Di komputernya biasanya itu udah ada yang namanya good base atau kalau yang pakai Windows ada Power Sale atau kalau yang pakai Linux sama Mac OS juga pasti ada terminalnya silakan pahami perintah-perintah dasar yang biasanya dipakai di terminal ya terus Kalian juga harus belajar mengenai package Manager karena kedepannya react itu enggak dipakai dengan cara yang kita pakai tadi kita harus pakai misalnya NPM modul Butler Builder dan masih banyak lagi dan untuk memahami itu kalian butuh paham juga mengenai no Jazz jadi ini yang harus kalian kuasai dulu sebelum lanjut belajar react-nya jadi buat yang belum paham mengenai salah satu materi ini sabar dulu Tahan dulu ya silakan mundur dulu aja belajar materi-materi ini karena jangan khawatir teman-teman untuk belajar materi ini nah terus tadi untuk modern javascriptnya karena sebetulnya teknik-teknik di javascript modern ini banyak banget ya Apa aja yang harus kalian pelajari yang pertama harus tahu mengenai variabel pada S6 tahu kapan waktunya kalian deklarasi variabel pakai LED Kapan kalian pakai cons ya pokoknya jangan lagi pakai far berikutnya kalian tahu gimana cara bikin function ya tahu caranya bikin function expression dan juga function Declaration dan kalian harus tahu juga yang namanya arrow function beserta perilakunya kalian harus paham mengenai objek dan juga class beserta Cara pakainya ya tahu gimana caranya instansiasi sebuah objek tahu apa itu prototipe inherence atau pewarisan pada javascript berikutnya kalian harus paham mengenai array dan method-method pada array dan pahami juga ada yang disebut dengan higher order function gitu salah satunya adalah di method-method pada array seperti map filter radius itu harus benar-benar paham ya tahu caranya distrak sharing Gimana caranya memecah objek menjadi variabel terus tahu bagaimana cara pakai template literal sehingga kalian dapat dengan mudah merangkai string yang ada variabel di dalamnya nggak perlu keluar masuk nggak perlu konkatenasi pahami template literal dan juga pahami tertarik operators karena direct ini sering banget dipakai ya tertarik operator sih yang tanda tanya dan titik dua untuk ngeganti if else menjadi one liner atau satu baris dan terakhir kalian harus paham mengenai modul sistem pada javascript Gimana caranya import eksport file kita atau metode kita menjadi sebuah modul ini yang harus kalian pelajari kalau misalkan ada yang masih belum paham enggak usah khawatir karena di channel ini saya sudah sediakan jalur belajar ya teman-teman bisa ikutin semua materi yang dibutuhin untuk belajar ya Ada semua mulai dari HTML CSS javascript Java scriptnya bahkan ada 3 playlist ya ini kalau di total-total bisa sampai 70 video kali ya silakan untuk yang javascript terus ada juga Git dan github beserta belajar cla ada di dalamnya dan kita belajar no JS dan MPM ada juga di situ ya jadi Silahkan itu Dipelajari dulu ya jangan buru-buru pengen belajar reak tapi fundamentalnya belum paham nah berikutnya setup editornya untuk menggunakan atau membuat aplikasi pakaian tentu saja kita butuh editor ya atau kode editor kalian bisa pakai macam-macam cuman yang akan kita gunakan di seri ini adalah VSCO yang harus kalian instal internetnya yaitu es lilin itu coba cek extensionnya udah diinstall apa belum Terus konfigurasinya Udah dilakukan apa belum Nanti kalau misalkan belum teman-teman bisa cek di dokumentasi reak-nya ada Gimana cara konfigurasi linternya jangan lupa juga install extension untuk format kode kalian supaya gampang diaturnya enggak perlu ngerapihin manual yang namanya preteer dan kalian bisa install browser extension yang namanya react developer tuh ini kayaknya ada untuk semua browser-browser populer Ya setidaknya untuk browser yang saya pakai yaitu Google Chrome ini ada oke itu jadi requised untuk belajar diet di seri kita kali ini Oke Dan kalau teman-teman sekarang udah siap untuk belajar lebih jauh mengenai react ini di bagian kelima kali ini kita akan masuk ke bagian paling penting yaitu kita akan membahas mengenai konsep-konsep utama yang ada pada reak ya jadi apa aja sih konsep yang menjadi inti yang harus kita pelajari di dalam Riyad ini Baik teman-teman lihat ada tiga Core konsep dalam react yang pertama jelas adalah komponen kedua ada yang disebut dengan props yang ketiga ada yang disebut dengan stang ya jadi tiga hal ini harus teman-teman kuasai dulu atau minimal tahu dulu ya sebelum kita masuk ke konsep-konsep rileks lain atau fitur-fitur read lain yang lebih kompleks lagi kita bahas dulu mengenai komponen Ya gimana cara kita membuat UI di dalam react menggunakan komponen Jadi intinya pada saat kita membuat ui ya sebuah UI itu kita bisa pecah menjadi bagian-bagian yang lebih kecil yang kita sebut dengan komponen mulai dari contohnya yang tadi kita buat adalah komponen header ya atau heading gitu sebuah komponen itu bisa sangat sederhana hanya terdiri dari satu elemen saja atau bahkan sangat kompleks bahkan satu halaman web pun itu kita bisa anggap sebagai sebuah komponen walaupun jadinya komponennya gede banget gitu ya jadi komponen-komponen UI yang bisa kita lihat dan kita interaksikan bisa kita anggap sebagai komponen Nah dengan komponen itu kita bisa bikin potongan kode yang independen atau Mandiri yang kedepannya bisa kita gunakan kembali Oh jadi komponen yang reusable istilahnya ya jadi contohnya kalian bisa anggap sebagai blok-blok pada Lego lah ya Yang bisa kalian susun gitu gimana nantinya kita bisa susun potongan-potongan kecil tadi agar menjadi sebuah blog atau sebuah bentuk yang lebih besar yang kalau misalkan kita mau bongkar pasang itu bisa kita lakukan dengan lebih mudah Jadi kalau pengen mengubah elemen pada ui-nya kita tinggal Ubah komponennya aja nah ini contoh komponen yang bisa kalian lihat misalnya kita mau bikin sebuah media komponen yaitu di dalamnya juga bisa terdiri dari beberapa komponen lagi ada komponen image ada komponen deskripsi ada komponen button jadi yang kecil-kecil ini juga komponen ketika kita rangkai menjadi sesuatu yang lebih besar contohnya media ini atau card lah ya itu juga bisa kita jadikan sebagai komponen nanti card ini kita simpan ke dalam sebuah section tertentu di dalam website kita section itu bisa kita anggap juga jadi sebuah komponen Nah untuk bikin komponen direac itu gimana caranya pertama teman-teman harus pahami dulu bahwa komponen pada riec itu pada dasarnya adalah sebuah function yang kita bikin pakai javascript jadi nanti setiap teman-teman mau bikin komponen harus bikin function dulu nah terus nama functionnya itu kalian harus tulis diawali dengan huruf besar ya kan kalau function itu biasanya huruf kecil ya huruf kecil terus Kemal case tapi kalau khusus untuk Komponen teman-teman bikinnya pakai huruf besar Nah nanti functionnya mengembalikan nilai elemen ui-nya dan elemen UI itu teman-teman tulis pakai jsx ya jadi strukturnya html tapi di dalamnya bisa pakai javascript Nah nanti pada saat mau ngerendernya teman-teman panggil seolah-olah dia adalah tag HTML gitu kayak tadi kita manggil H1 gitu tapi sekarang kita manggil komponennya dengan ada tank pembuka dan tank penutupnya ya Contohnya kayak gini Jadi kalau tadi tulisannya kita langsung tulis di metroder sekarang kita tarik untuk jadi sebuah komponen terpisah caranya teman-teman bikin sebuah function misalnya kita kasih nama header depannya huruf besar terus dalamnya kalian nge-return gsx-nya jadi yang tadinya ada di render pindah ke function header terus pada saat di render Kita tinggal panggil komponennya tapi pakai lebih kecil dari dan self closing tag-nya gini ya Mari kita coba ya kita balik ke coding-nya lagi Sekarang kita akan ubah agar komponen kita yang tadinya langsung ditulis di render jadi sebuah komponen terpisah ya kita bikin function-nya di sini function huruf besar header misalnya nulisnya kayak function biasa langsung return kurung buka kurung tutup jsx-nya ini kita Cut aja Cut masukin ke dalam tinggal kita Panggil jangan lupa ditutup teksnya ya ini caranya kalau mau pakai gaya komponennya kita save dulu kita lihat hasilnya Ya sama aja sekarang kalau kita lihat kita inspect elemennya ada di sini ya dipelajari ya bareng pak dalam bentuk H1 berikutnya kita bisa bikin komponen yang bersarang jadi kita bisa bikin komponen berada di dalam komponen lain kita lihat sebuah aplikasi itu biasanya di dalamnya terdapat banyak komponen jadi kayak tadi kita lihat media komponen itu di dalamnya ada tiga komponen jadi dibentuk oleh komponen-komponen kecil lain di dalamnya kita bisa menyimpan komponen di dalam komponen lain contohnya nih kita mau masukin komponen header yang udah kita buat tadi ke dalam komponen homepage jadi misalnya satu halaman penuh kita mau bikin dia jadi sebuah homepage yang di dalamnya kita bikin strukturnya misalkan ada header dan main ada footer gitu misalnya ya tapi di sini kita mau bikin headernya dulu aja nah caranya kita harus bikin function untuk setiap komponen yang mau kita buat caranya gini dari tadi kita udah punya komponen header sekarang kita punya komponen homepage yang di dalamnya ingat kita harus mengembalikan sebuah elemen ya ini turunan jsx yang di dalamnya ada header kalau mau pakai Dev gini boleh atau kalau mau bikin sebagai fragmen enggak ada def-nya juga boleh ya jadi tag kosong Nah nanti pada saat render Kita tinggal panggil komponen yang gedenya yaitu homepage Oke kita coba lagi sekarang kita kembali ke coding-nya sekarang di sini kita bikin function ingat huruf depannya huruf besar terus biasanya dibikin sebagai camel case ya kalau ada kata berikutnya huruf besar juga dia return gini ya kalian bisa bikin pakai fragmen Jadi cukup begini aja atau mau bikin pakai gif juga boleh ya atau biar rapi ininya kita turunin ajalah ya ininya turunin baru di dalamnya kita Panggil sih headernya gitu jadi homepage memanggil header homepage kita render di sini home kita lihat lagi hasilnya kembali ke browser aman ya kalau kita lihat inspect harusnya Sekarang dia ada di dalam root seperti ini baik teman-teman ya sekarang setelah kita tahu bagaimana caranya bikin komponen bersarang kita akan coba untuk menggunakan kembali komponen yang sudah pernah kita buat ya karena tadi kan konsep komponen pada salah satunya adalah reusable ya kita cukup bikin satu komponen kita bisa pakai berulang-ulang ya caranya gimana kita akan lihat ya jadi kita bisa menggunakan komponen secara berulang-ulang dengan cara menuliskan teksnya kembali di dalam komponen lain atau saat kita render Contohnya kayak gini Jadi kalau misalnya di dalam komponen homepage kita mau manggil dua kali komponen header ya walaupun contoh kali ini agak aneh ya tapi ini bisa Maka nanti akan menghasilkan 2 komponen seperti ini tampilannya silahkan kalau kalian mau cobain komponennya Jadi dua jadi tiga bisa Ya nah tapi selain kita bisa menggunakan komponennya berulang-ulang tentu saja kita juga pengen pada saat kita panggil komponennya lagi informasi yang ada di dalamnya itu berbeda ini perilaku dari komponen yang berikutnya yaitu dinamis Jadi selain riuhsable Dia juga dinamis ya Jadi gimana caranya nih kalau kita pengen menggunakan komponen yang sama tapi informasinya beda ya contoh sederhana di dalam komponen header kita misalnya kita pengen nampilin tulisan yang berbeda Nah itu bisa kita lakukan dengan menggunakan yang namanya props ya kita bahas dulu apa itu props jadi di dalam html biasa itu kan kita bisa pakai atribut untuk mengubah perilaku dari sebuah elemen ya kita bisa kasih kelas kita bisa kasih ID kalau Image kita bisa kasih source src kita bisa kasih style dan masih banyak lagi ya Dan itu menyebabkan perilaku dari setiap elemennya bisa berubah meskipun elemennya sama gitu contohnya nih tadi ya seperti atribut src yang ada di dalam elemen Image kita bisa mengubah sumber gambarnya jadi kita bisa punya image yang src nya beda-beda tanknya sama tapi gambarnya beda-beda gitu ya itu kalau di html nah mirip seperti itu kita juga bisa mengirimkan properti sebagai informasi buat sebuah komponen nah react nyebutnya ini props ya props itu nantinya bisa ditangkap sebagai sebuah objek saat komponen dibuat jadi pada saat kita bikin komponen props-nya bisa dikirim dan pada saat ditangkap props itu bentuknya adalah objek Nah kita akan coba untuk menampilkan tulisan yang berbeda pada komponen header kita ya misalnya gini kita Panggil komponen header 2 kali tapi setiap komponennya punya trops ya kita sebutnya props autore yang nilainya beda maka author ini nanti akan Ditangkap atau dikirimkan ke parameter props yang bentuknya adalah objek sehingga bisa kita Panggil nanti di dalam jsx-nya sebagai properti dari objeknya nulisnya kan gini ya props titik author nah kalian bisa nyimpen propertinya ke dalam kurung kurawal nah kurung kurawal di sini digunakan untuk masuk ke dalam script javascript pada saat kita lagi ada di jsx dan ini maka akan menghasilkan tampilan yang berbeda karena masing-masing punya props autore yang beda kita coba ya balik ke coding Kita sekarang kita Panggil headernya dua kali ya kalian bisa Klik di sini terus alt shift bawah nah tapi kita kasih crop yang beda kita kasih nama aja autor ya nama props-nya bebas ya misalnya penulis gitu atau kita kasih name aja ya name gitu ya Sama aja yang pertama name-nya adalah wpu begini yang kedua namenya adalah padika Begini Nah sekarang kita udah punya propsnya akan dikirim ke komponen header tangkap di sini drops karena dia bentuknya objek maka kita bisa ganti kurung kurawal untuk manggil javascript Panggil objeknya lalu kita Panggil name ya gitu Coba kita lihat hasilnya save dulu kita kembali ke browsernya Nah ini dia Jadi udah ada yang atas wpu yang bawah Pak Dika ya Sip itu dia komponen yang sama tapi propsnya beda simpel aja oke berikutnya kita bisa melakukan reflektor pada props kita supaya nulisnya lebih rapi yang pertama kita nggak perlu nulisin objeknya kita bisa pakai teknik distrak sharing supaya langsung manggil nama propsnya atau propertinya ya terus kita juga bisa menggunakan ternari operator ketika kita pengen bikin nilai default pada portnya jadi misalnya kita pengen pada saat manggil sebuah komponen itu nggak pakai props tapi ada nilai default yang dipakai tapi kalau kita kasih props maka nilai dari props itu akan nimpa nilai defaultnya contohnya gini jadi kita Panggil dua kali sama seperti sebelumnya tapi komponen yang pertama nggak pakai props nih Harusnya kan error nih tapi kita tangani di sini pakai ternari nah tapi sebelumnya kita lihat dulu nih tadi kan kita ngambilnya pakai sekarang kita nggak perlu Panggil objeknya lagi kita sudah langsung bisa ngambil propertinya menggunakan distrak sharing caranya pada saat nulis parameter kita kasih kurung kurawal supaya langsung masuk ke objeknya ambil propertinya jadi nggak perlu tulis props author atau props nama lagi kita cukup langsung panggil nama propertinya dan di sini kita pakai tertarik nih jika author ada isinya maka pakai nilai author tersebut Kalau nggak ada kalau nilainya false karena ambil yang kanannya kasih nilai default wpu jadi karena yang pertama ini enggak ada makanya yang dipakai wpu tapi karena komponen header yang kedua ini punya props maka Timpa lah wpu pakai isi dari props-nya ya kita coba balik ke sini ini kita hapus jadi name-nya enggak perlu sekarang kita pecah atau kita masuk ke dalam props-nya pakai distrak sharing cukup ambil name-nya sekarang di dalam sini enggak perlu lagi pakai nama objeknya dan bisa kasih tertarik jika nilainya true Tampilkan name-nya jika nilainya false Tampilkan wpu Oke kita akan lihat hasilnya sama ya wpu dan Pak Dika Oke lanjut lagi teman-teman sekarang kalau misalnya teman-teman pengen nampilin data yang banyak menggunakan pengulangan misalnya teman-teman pengen nampilin data menggunakan list item pakai Ul atau OL ya ya jadi kan sangat umum atau biasanya juga kita sering banget pengen nampilin banyak Data pakai pengulangan misalnya datanya dalam bentuk array dalam bentuk objek atau dapat dari api misalnya ngambil dari database pengen tampilin datanya tapi pakai pengulangan nah salah satu caranya kita bisa pakai salah satu method pada array ya kan banyak tuh ya bisa pakai 4x bisa pakai filter bisa pakai map itu metode yang ada pada array Nah itu ditujukan untuk memanipulasi data dan menampilkan elemen UI yang identik secara style kayak misalkan kita nampilin 10 Li Kan sama semua tuh tapi informasinya beda tiap Le punya data yang beda di dalamnya contoh kali ini kita akan coba pakai array Map ya untuk melakukan pengulangannya misalnya kita kasih sebuah contoh klasik kita punya sebuah variabel yang namanya students yang berupa array di dalamnya ada 3 buah data mahasiswa yang pertama ada Sandika yang kedua ada Dodi yang ketiga ada Erik Nah kalau kita mau nampilin datanya ke dalam Li teman-teman bisa gunakan map kayak gini ya Panggil array-nya terus kita map ambil elemen di dalamnya pakai arrow function tampilin tiap-tiap data atau elemen pada array-nya Oke simpel aja kita coba ya balik ke coding-nya kita bikin dulu di sini ya Kita kasih students ada esnya karena dia Renya banyak isinya kita kasih Sandika Dodi dan Erik ya buat yang suka ngikutin playlist pembelajaran di BPU pasti udah kenal lah ya tiga orang ini sekarang kita mau panggil nih header yang ini kita hapus saja sekarang di bawahnya kita mau bikin Ul ya kita bikin Ul seperti ini di dalamnya kita mau looping LED loopingnya berarti kita kan butuh javascript ya kalau mau pakai javascript kita buka dulu kurung kurawal lalu kita tulis students titik Maps kalau kita Panggil eropaction ambil satu elemennya singularnya kan kalau students itu jamak ya plural ya kita ambil singularnya student eropation nah ini karena kita mau nampilin lagi jsx nya kita pakai kurung buka kurung tutup ini buat ganti-ganti mode dari jsx ke javascript kita buka Li kita buka kurung kurawal karena kita mau tampilin studentnya kita tutup lagi lalu sudah ya kita save sekarang kita lihat hasilnya Nah itu dia tampil ya Sandika Dodi Eric kelihatannya udah oke tapi kalau misalkan teman-teman lihat di inspect ini harusnya ada error nih kita lihat di bagian console nah ternyata ada error nih Katanya each Child in English should have a unit key Rock jadi katanya kalau teman-teman bikin list atau melakukan looping pada elemen yang sama tiap-tiap elemen tadi harus punya properti Q yang memiliki nilai yang unik Nah kita tadi nggak ngasih Nah kita tadi nggak ngasih properti apa-apa ya ini kalau kita jalanin aman tapi ada error tuh ya Nah ini kenapa error karena dia butuh Unity Apa itu unique tadi warningnya menjelaskan bahwa ada proxy yang hilang Katanya kita butuh properti yang namanya Q Kenapa ada warning karena react tuh butuh sesuatu untuk menandai elemen dengan nilai yang unik ketika Ele tersebut kita generate menggunakan looping riak nganggapnya semua elemennya sama harusnya tiap elemen tadi meskipun Li nya sama harus punya penanda supaya nanti ketika kedepannya ada perubahan dia tahu yang mana yang berubah karena yang reak-liat elemennya bukan isinya nah di kasus kita kita bisa menggunakan nama student sebagai nilai dari properti key-nya Kenapa karena kebetulan nama studentnya nggak ada yang sama Sandika Dodi Eric beda-beda semua tapi kan kalau kita pakai nama student Ada kemungkinan ketemu dua mahasiswa yang namanya sama Berarti enggak bisa kita pakai harusnya ya eh ke depannya sebaiknya kalian gunakan nilai yang bisa dipastikan unik Misalnya menggunakan unit ID tuh Jadi kalian bisa kasih gini kasih properti Q yang nilainya sama dengan nilai student supaya problem tadi hilang ya kita coba balik lagi ke coding kita kita kasih properti key yang nilainya student ini jadi sama antara Q dan valuenya ya sekarang balik ke browsernya errornya hilang tampilnya udah oke ya berikutnya gimana kalau kita mau nambahin interaksi Nah kita bisa nambahin interaktivitas dengan yang namanya stay nah ini seru nih teman-teman jadi kita tahu bahwa banyak hal di halaman kita yang bisa berubah karena ada interaksitas dari user ya sesimple user ngeklik tombol inputin sesuatu di teks fill atau di kolom inputan atau ngegerakin Mouse Itu adalah sebuah event yang bisa bikin keadaan berubah di halaman kita entah itu tampilannya entah itu sebuah nilai tulisan ganti warna ganti keadaan dan seterusnya di dalam react data yang berubah seiring waktu itu kita sebut dengan state data yang berubah kalau ada yang kita lakukan ya atau seiring waktu itu disebut dengan steak Nah kita bisa nambahin state untuk Komponen yang kita bikin komponen yang manapun dan nilai dari state itu bisa kita ubah atau bisa berubah ketika kita butuhin Nah untuk nambahin interaktivitas pada dokumen atau komponen kita react tuh pakai state dan juga event handler misalkan on klik on keep on Mouse over dan seterusnya ya itu tadi stage nah di dalam react ada juga yang namanya state dan hooks atau hooks ya misalnya gini kita akan membuat sebuah tombol tombol biasa yang kalau kita klik akan menambah jumlah angka sesuai dengan berapa kali tombol tersebut diklik jadi nanti di dalam tombolnya kita kasih angka 0 kalau kita klik tombolnya sekali angka 0 di dalam tombolnya ganti jadi satu klik lagi nambah lagi klik lagi nambah lagi Ya tampilannya kayak gini kita bikin tombol misalkan ada light terus dalam kurung angka Sudah berapa kali ini tombol like di klik gitu Nah react itu punya serangkaian function yang disebut dengan hooks jadi reaksi itu punya banyak hoax ya kegunaannya macam-macam tapi yang jelas hoax ini memungkinkan kita untuk nambahin logic pada komponen kita jadi apa bisa melakukan apa hoax apa bisa melakukan apa salah satu hoax yang biasa dipakai yang tujuannya untuk mengelola state adalah set state jadi ada sebuah hoax yang namanya set state satu dari banyak hoax yang rileks punya tugas dia adalah untuk mengelola state dimana set state ini ketika kita panggil dia mengembalikan nilai berupa array ingat Rei ya nilai di dalamnya bisa banyak dan nanti kita bisa akses isinya paket distrak sering set state merittern yang bisa kita ambil pakai distract sharing elemen pertama pada array hasil kembaliannya itu adalah nilai dari statenya apa yang mau kita kelola variabel nih variabel yang mau kita ke Lol itu elemen pertama elemen keduanya bentuknya function yang bertugas untuk mengubah nilai elemen pertama tadi yang satu nilainya yang mungkin berubah-ubah yang satu fungsi untuk mengubah nilainya ya ada dua selalu berpasangan nilai yang berubah dan cara mengubahnya ada dua nama functionnya boleh apa aja Sebenarnya nama state-nya juga boleh Apa aja ya tapi biasanya nama function ini diawali dengan kata state lalu diikuti dengan nama statenya atau nama nilainya jadi pasangan misalnya tadi like kita bisa mungkin nama statenya like berarti nama functionnya set like atau kalau misalnya statenya score berarti nama function buat ngubahnya set score ya selalu berpasangan Ini contohnya kita bisa punya variabel Lights dan fungsi set Lights kita tulis pakai distract sharing jadi kita Panggil hooksnya react use state ini mengembalikan array langsung kita tangkap pakai distrak sharing kurung siku kurung siku ambil variabelnya ambil function-nya ya yang pertama nanti kita bikin dulu itu terus kita juga bisa ngasih nilai awal pada variabelnya misalnya kita pengen nilai awal dari variabel light ini nol maka kalian Langsung kasih aja argumen pada Hook you state-nya kayak gini nah ini akan menentukan bahwa nilai awal dari variabel Lights itu 0 kalau mau diubah jadi satu gimana nanti pakai set Lights kita lihat set Lights itu disebutnya state updater function sebuah function yang bisa mengupdate nilai dari State vari ya jadi set like tadi namanya state updater function untuk menjalankan function si set Lights ini kita bisa panggil di dalam function lain di komponen kita ya jadi kita bisa bikin function set Lights gitu misalnya misalnya gini kita mau ubah nilai Lights agar bertambah satu setiap tombol di klik dan misalnya kita akan lakukan di dalam sebuah function yang nanti kita buat namanya handle klik ini function ketika event dijalankan ketika tombol di klik Panggil function namanya handle klik nah di dalam handle Klik nanti kita Panggil set Lights gitu ya kayak gini Panggil set Lights di mana Nanti di dalamnya like akan bertambah satu itu cara ngelola state di dalam read nah nyimpan handle kliknya di mana ini bisa kita simpan di dalam komponen kita ya kita lihat saat kita bikin event handler-nya nih jadi terakhir yang perlu kita lakukan tinggal kita bikin tombolnya buat nanganin event-nya ya bikin tombol button biasa kasih props on Click gitu ya jangan lupa nulis nama event harus kita udah bahas tadi di aturan jsx ya nulis on Click kalau di html biasa bisa huruf kecil semua tapi kalau di jsx harus cample case on klik c-nya gede nah terus nanti kita tampilin jumlah likenya di dalam value dari buttonnya kayak gini Jadi kita punya komponen button yang punya props on Click dimana props on Click ini kalau di jalankan event-nya akan memanggil fungsi handle klik ini kenapa di sini enggak pakai kurung buka kurung tutup karena kalau kita pakai kurung buka kurung tutup fungsinya langsung dijalanin kita pengen fungsinya jalan ketika diklik terus isi dari tombolnya ada tulisan like kurung buka lalu Panggil isi dari state likes-nya kita punya state Lights kan tadi ya lalu kurung tutup gitu Jadi ini istilah-istilah yang harus kalian pahami di dalam break ada state sebagai variabel yang bakalan berubah ada state updater function sebagai fungsi yang bakal mengubah nilai dari state-nya ada props yang jadi atribut dari sebuah komponen ada even t yang menjadi Trigger saat kita akan melakukan sesuatu dan juga ada komponen tentu saja ya dan ini hasil akhirnya teman-teman jadi di dalam komponen homepage kita punya tadi variabel dan state update terfation-nya yang merupakan bagian dari Hook you state kita punya function handle klik yang di dalamnya menjalankan function set Lights lalu kita Panggil tombolnya kita coba ya kita ke coding kita kita tulis di bawah sini aja ya Kita kasih di bawah sini tombolnya kita bikin button buttonnya kalau teman-teman mau jadi komponen sendiri juga bisa ya jembatan kita kasih props nya tadi on Click yang akan memanggil fungsi handle klik terus di dalamnya ada tulisan like berapa kali likenya misalnya like gitu ya dapat dari variabel Lights ini dapat dari mana ini dapat dari variabel yang akan kita bikin kita bikin variabel dengan diskring ada dua variabel yang pertama adalah like yang kedua adalah set likes lalu titik use state ya yang nilai awalnya atau inisial valuenya kosong dah berikutnya Kita tinggal panggil functionnya buat nge handle tombol kliknya kita pakai function Declaration handle klik yang akan menjalankan set like like + 1 ya gini jadi ketika diklik jalankan fungsi ini Panggil set like ubah like saya jadi satu tadinya nol Tampilkan ke sini Jadi nilainya akan satu gitu ya Mari kita lihat Oke kita punya kita klik jadi satu klik lagi Jadi dua klik lagi jadi 3 yaitu teman-teman ya jadi itu dia cara pakai state props dan Hook yang sangat sederhana mudah-mudahan Kalian paham nih Nah dan berikutnya setelah kita belajar dasar-dasar dari reak selanjutnya kita bakalan belajar apa nih ya di dalam reyex kalau kalian mau lanjut lagi belajarnya setelah ini yang harus kalian pelajari adalah hal-hal berikut ini teman-teman Jadi kalian harus tahu dulu sebenarnya Bagaimana reaksi itu bekerja ya Kok bisa sih rileks melakukan hal-hal tadi sebenarnya enggak usah terlalu dalam apalagi untuk kalian yang pemula Tapi minimal tahu kenapa kok bisa terjadi seperti itu ya teman-teman harus tahu yang disebut dengan render dan commit teman-teman harus ngerti apa itu virtual Dome dan Bagaimana reaksi membuat dan bekerja dengan virtual dome-nya terus juga Gimana cara mengelola state dengan lebih kompleks bahkan ada istilah yang namanya konteks ini teman-teman juga harus paham apa itu konteks gimana Cara pakainya terus juga harus paham juga mengenai life cycle ya yaitu penting untuk dipelajari terus juga bagaimana menggunakan hooks tadi kita coba dikit aja ya hooksnya masih banyak hoax lain yang sangat bermanfaat yang harus kalian ketahui dan coba dan masih banyak lagi topik-topik lain karena cukup Kompleks itu sebenarnya Jadi kalau misalkan teman-teman pengen belajar yang lebih lanjut Silahkan tulis aja di kolom komentar supaya nanti kita bisa lanjutkan lagi materinya agar kita bisa menyelam lebih dalam ke library ini ya dan sebelum saya akhiri rasanya kurang lengkap kalau kita enggak latihan dulu ya Meskipun kita cuma belajarnya dasar-dasarnya aja kita akan coba terapin konsep yang udah kalian pelajari tadi untuk bikin sebuah aplikasi sederhana ini yang pertama nih Saya pengen teman-teman bikin sebuah simple counter ya atau alat penghitung sederhana tapi kalian udah bisa bikin tombolnya pada diklik nambah nilai sekarang Saya pengen kalian bikin tombolnya ada 3 dan ada satu elemen di tengah-tengah yang nunjukin angka kalau saya Klik tombol tambah di sebelah kanan maka angka di tengah akan nambah terus kalau saya Klik tombol minus di sebelah kiri maka angkanya akan ngurang terus satu-satu dan kalau set pencet tombol reset atau reset di tengah sini maka akan mengembalikan nilai yang tadinya berapapun setelah ditambah atau dikurang balik lagi Jadi nol Ya silakan teman-teman boleh cobain ya ini Pokoknya buat lah agar aplikasinya bisa kayak gini bisa nambah bisa kurang ya kurang terus sampai berapapun nambah terus sampai berapapun terus reset dan kalau mau lebih challenging lagi coba buat hanya menggunakan dua buah komponen satu komponen button kan kita punya 3 button nih bikin jadi sebuah komponen yang punya props yang beda jadi jangan bikin tiga komponen buatan yang beda bikin satu komponen button sama bikin satu komponen teks gitu Jadi kalau pakai kasus kita kalian punya Ho di dalamnya ada dua komponen yang props-nya beda-beda Silahkan dicoba Nah nanti ini kalau udah bisa Coba bikin counter yang lebih kompleks saya udah bikinin contoh kasusnya Jadi sekarang kalau teman-teman lihat nih tombol resetnya Nggak bisa diklik nih Saya mau bikin studi kasusnya gini tampilannya sama tapi saya pengen dia cuma bisa nambah sampai angka 10 aja Jadi kalau angkanya Udah 10 ditambahin maka enggak bisa nambah lagi tulisan nolnya akan berubah menjadi tulisan dan misalnya Terus kalau dikurangin juga enggak bisa kalau dia di bawah nol jadi paling kecil tuh angkanya 0 Kalau di klik tombol minus lagi maka tulisan 0-nya juga berubah jadi dan juga dan saat tulisannya jadi dan tombol reset-nya nyala kalian contohnya gini ini jadi awalnya reset-nya enggak bisa diklik kalau saya klik tanda tambah bisa nambahin terus sampai angka 10 nah kalau sudah 10 tulisannya dan dua tombol ini enggak bisa di klik cuma reset yang bisa diklik jadi saya kliknya reset saya bisa tambah kalau saya kurangin lebih kecil dari 0 dan juga jadi hanya bisa sampai 0 dan 10 baru reset lagi silakan teman-teman modifikasi simple counter yang sebelumnya supaya jadi kayak gini sama juga ya kalau bisa bikin pake dua buah komponen aja jadi Silahkan dicobain ya mudah-mudahan teman-teman nyobain ya supaya ngecek tuh pemahaman yang sudah kita pelajari dari awal tadi Udah masuk apa belum Gitu ya tapi kalau misalkan nanti di akhir kalian penasaran codingnya Seperti apa saya sudah buatkan repository yang berisi codingan kita dari awal sampai dengan latihan kita yang tadi jadi Silahkan kode pikir mau disamain boleh atau Kalau mentok Pak bingung ya udah enggak apa-apa lihat hasil yang udah saya buat di sini atau bahkan kalian punya solusi yang lebih keren lagi dari yang saya buat di sini silakan kirimkan aja solusi kalian supaya teman-teman yang lain Nanti bisa lihat juga bisa lakukan full request aja ke repotnya ya Jadi kita semua bisa belajar bareng-bareng oke teman-teman ya Jadi mungkin itu aja untuk pembelajaran reak kita mudah-mudahan pembelajarannya masuk akal buat teman-teman semua karena menurut saya tutorial yang kita udah buat ini cukup masuk akal karena sekali lagi tutorial ini adalah tutorial yang dibikin sama Framework next GS jadi ini nggak 100% buatan saya yang hampir 90% saya ngambilnya dari tutorial punyanya next JS Jadi kalau misalkan Menurut kalian ini masuk akal silahkan Berterima kasihnya ke next ya Dan kalau misalkan kalian pengen tutorial ini berlanjut untuk mempelajari react lebih jauh lagi ya silahkan kasih like aja dan kasih tahu saya di kolom komentar Kalau kalian pengin lanjutin lagi series ini ya Jadi mungkin itu aja video pertama kita belajar mengenai react mudah-mudahan bermanfaat kita akan ketemu lagi di video berikutnya saya nanti gali pamit dan seperti biasa teman-teman jangan lupa titik koma [Musik]