Halo semuanya, apa kabar? Mudah-mudahan semuanya dalam keadaan sehat ya. Kembali lagi di channel WPU bersama saya Sandika Gali. 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 React.
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 React. 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 nggak 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 react yang nggak masuk akal? Ya jadi kita bahas ini dulu ya. Jadi selain memang supaya judulnya agak-agak clickbait, saya mau kasih tau 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 Stack Overflow, tanya chat GPT. Kita baca dulu dokumentasi resminya dari pembuatnya. Karena kan harusnya dokumentasinya lah yang ngasih tau kita teknologi itu apa, cara pakenya gimana, dan lain sebagainya.
Ya, dan menurut saya dokumentasinya React ini kurang masuk akal, khususnya untuk pemula. Dan ini menurut saya ya teman-temannya, jangan marah dulu, tenang. Nanti kita akan cari tahu kenapa menurut saya nggak masuk akal.
Pasti ini buat teman-teman yang udah jago react, ada yang nggak setuju nih sama saya nih. Tapi sebelum ke sana, kita bahas dulu mengenai definisi pemulanya dulu ya. Sepemula 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 DOM. Dia udah tau teknik-teknik Javascript, ES6 misalnya ya Tapi belum pernah pake React Atau bahkan belum pernah menggunakan istilahnya front-end framework gitu Jadi udah bisa Javascript tapi belum pernah pake React Itu yang saya maksudkan dengan pemula disini ya Supaya nanti kita sepakat dulu Jadi silahkan posisikan temen-temen disini sebagai orang yang misalnya udah belajar Javascript Tapi belum pernah pake React Nah ceritanya kita mau belajar React nih Jadi kan kita dateng dulu nih ke Dokumentasinya React Ya Jadi dokumentasi React Kalian bisa datang di React.dev Slash Learn Nanti kita akan buka sama-sama Dan jangan salah Menurut saya Ini sebetulnya Salah satu dokumentasi Yang bagus banget Cuman Buat pemula gak masuk akal aja Dan bahkan Buat teman-teman yang belum tau Sebetulnya Kita tuh punya Dokumentasi React Yang berbahasa Indonesia Jadi kalau teman-teman belum tau Teman-teman bisa kunjungi Di halaman ini id.react.dev Jadi ini adalah dokumentasi React yang sudah diterjemahkan oleh jagoan-jagoan programmer React Indonesia yang keren-keren banget ya.
Supaya kita lebih mudah belajarnya. Jadi kalau teman-teman kunjungi id.react.dev.learn. Nah ini teman-teman lihat tutorial React dalam bahasa Indonesia.
Nanti silahkan teman-teman baca ya. Nanti 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 React 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 GitHub-nya atau social medianya. Ya jadi respect banget buat developer-developer Indonesia ini. Nah sekarang kita ke dokumentasi react-nya dulu ya.
Kita akan lihat kenapa menurut saya ini nggak masuk akal ya. Gini, 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. Jadi kalau teman-teman lihat di sini, kalimat pertamanya di sini adalah, ini kan ada jargonnya atau tagline-nya, dia adalah library untuk web dan native user interface.
Oke ya, sekarang kalau scroll ke bawah, Kita langsung dikasih tau membuat user interface dari komponen. Nah disini dikasih tau react membuat kita dapat membangun user interface gitu. Jadi bukan apa itu react tapi apa yang bisa dilakukan oleh react gitu.
Padahal kalau saya, saya pengen tau dulu react itu apa. Yang pertama kita nggak bisa lihat ya. Kalau scroll ke bawah itu cara pakenya. Nah dan cara pakenya itu kita tiba-tiba dikasih sebuah function.
Kita nggak dikasih tau ini function kita taruh di mana. Jadi seolah-olah. React ini dibikin untuk orang yang udah tau cara pakenya. Cara pake frontend framework atau frontend library gitu.
Kalo temen-temen udah tau, maka baca ini akan lebih mudah. Tapi buat yang belum tau dan sama sekali belum pernah pake, menurut saya agak bingung. Padahal kalo temen-temen liat dokumentasi React yang versi sebelumnya, ini kebetulan saya juga buka, ini dokumentasi React yang lama ya. Temen-temen liat ini tagline-nya agak berbeda.
Kalo ini menurut saya lebih mudah dipahami ya. Sebuah javascript library untuk membuat UI. Kalo yang tadi, Kita lihat sebuah library untuk web dan native UI.
Itu bedanya. Dan kalau di scroll ke bawah, yang lama itu kita dikasih tahu penjelasannya. React adalah library yang deklaratif, berbasis komponen, belajar sekali, tulis dimanapun katanya gitu. Kalau menurut saya sih ini lebih menarik gitu ya.
Walaupun tetap aja kalau kita scroll ke bawah, simple component. Nah ini komponennya ditaruh di mana nih? Apakah saya kopikan ke file javascript saya langsung jalan? Kayaknya enggak.
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 ke yang Learn ini. Yang pertama, kita langsung dikasih tahu Quick Start. Selamat datang di React Documentation.
Halaman ini memberikan kita pendahuluan ke 80% konsep React yang bisa dipakai sehari-hari katanya. Jadi langsung dikasih tahu, satu halaman ini udah ngasih tahu kalian 80% apa yang bisa dilakukan oleh React katanya. Ini anggap kita belum ngerti apa-apa ya, baru tahu JavaScript. Kita scroll ke bawah. Langsung dikasih tau, bikin komponen katanya.
Ketemulah function. 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.
Ini 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 React-nya aja belum belajar. Terus kita tiba-tiba dikasih tahu, kalau mau bikin aplikasi atau website pakai React, pakailah Framework.
Nah, salah satunya ada yang disebut dengan Next.js. Saya tadinya nggak akan mengunjungi Next.js karena saya pikir React-nya aja belum paham kan. Tapi karena setelah saya baca beberapa halaman di depan sini masih belum menemukan. alasan kenapa belajar react saya coba deh masuk ke sini, ke next.js, disini ada next.js tutorial nah ini dia halemannya, setelah saya masuk ke sini, saya baca tutorialnya sedikit, nah saya baca ini katanya next.js adalah sebuah framework react yang fleksibel, bla bla bla gitu ya, ini saya masih belum ngerti terus ke bawah nah ini ada disini apa itu react, jadi saya menemukan apa itu react, bukan di dokumentasi reactnya Mulai dari react adalah apa, bahkan dia kasih tau 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 tau 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 link-nya di sini ya, nextjs.org slash learn slash foundation slash from javascript to React. Ya, dan ini menurut saya adalah dokumentasi React yang paling masuk akal. 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. Jadi silahkan ikutin aja tutorial yang ada di Next.js atau penjelasan yang ada di Next.js ini. Kalau kalian bener-bener 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.js ini untuk mengetahui cara pakai React seperti apa, fungsi utama yang ada di React itu apa aja, sampai nanti akhirnya kita bisa membuat sebuah aplikasi yang sangat sederhana dengan menggunakan React. Oke ya teman-teman, jadi itu mungkin pengantarnya sedikit keluh kesah saya mengenai dokumentasi dari React.
Oke teman-teman, sekarang kita masuk ke bagian yang pertama. Seperti biasa, kalau teman-teman ngikutin tutorial di channel WPU, pasti kita akan bahas dulu mengenai ketika kita mau belajar sesuatu, sebuah teknologi, framework, library, 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 React? Jadi sabar dulu, buat yang pengen bikin aplikasi pakai React kita bahas definisinya dulu ya.
Oke, sekarang kita lihat. Apa itu React? Jadi kalau tadi teman-teman baca di website NXJS itu katanya React adalah sebuah library ya library JavaScript untuk membuat antarmuka pengguna atau UI User interface ya, user interface itu antar muka pengguna yang interaktif Untuk 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 di klik, bisa digeser, bisa di scroll, bisa kalian input sesuatu Ya jadi pokoknya yang bisa kalian lihat dan interaksikan itu adalah user interface atau antar muka pengguna Nah terus berikutnya kenapa sih React disebut library? Kenapa bukan disebut framework? Nah ini katanya.
Dia disebut library karena React 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 unopinionated. Jadi silakan aja bebas para penggunanya untuk beropini atau menggunakan caranya masing-masing gitu. Beda dengan framework, banyak framework yang udah diatur dari mulai instalasinya, struktur foldernya udah dibikinin, konfigurasinya udah dikasih tau tinggal kita edit-edit.
Ya seperti itu. Jadi React relatif unopinionated. Terserah kita sebagai developer untuk pakenya 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 React. 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 unopinionated itu malah bikin bingung gitu ya. Buat yang udah expert, buat yang udah tau bisa bongkar pasang, bisa ubah sana, ubah sini. yang unopinionated itu bisa membebaskan dirinya. Jadi buat pemula kadang-kadang justru yang opinionated, yang udah dikasih tau caranya yang lebih mudah.
Ya tapi itu ada dua perbedaan aja ya. Nah sekarang kita lihat sejarahnya sedikit ya. Jadi react ini dibuat pada tahun 2013 awalnya ya, 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 Ya jadi saat video ini dibuat, Itu Mungkin aja temen-temen yang nonton nanti di masa yang akan datang Ini udah lebih baru Jadi selalu pastikan Sesuaikan Siapa tau nanti versinya berbeda Dokumentasinya beda Cara pakenya juga beda Nah pertama kali dibuat Itu karena Facebook tuh makin besar ya Jadi saat itu tuh lagi ngedevelop 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 seamless 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 Kalau kita misalnya melakukan sesuatu di mobile Ya pasti kan pengennya yang di desktop berubah gitu Nah untuk melakukan itu makanya dikembangkan lah si React ini. Walaupun sebelumnya namanya bukan React. Dia menggunakan nama yang lain atau bahkan library atau framework yang lain ya.
Dan ini teman-teman sebetulnya bisa lihat di halaman dokumentasi React di bagian community terus ada React 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. New React Conference.
Sampai yang paling bawah nih. Yang tadi saya jelaskan. Itu ada di paling bawah nih. Video pertama tentang react.
Saran saya teman-teman nonton ya. Videonya ini keren banget ya. Jadi ini si Jordan Walknya ini.
Ini ada Tom Okino. Dia ngejelasin mengenai awal mula kenapa sih ada react gitu ya. Ini sakti banget nih.
Oke berikutnya. Kenapa disebut react? Disebut react itu karena pengen itu menjadi sebuah library yang reactive.
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 cepat bereaksi gitu. Kan disebutnya reactive, react, bereaksi. Nah saat ini tim pembuat react yang bikin reactnya, core timnya itu terdiri dari engineer-engineer yang ada di Meta atau di Facebook ya. Terus engineer-engineer yang ada di Vercel, ya dan kebetulan tadi Next.js yang teman-teman lihat.
Itu kan yang buat perusahaannya Versel juga ya Jadi saya juga yakin kalau dokumentasi React yang dibuat oleh Versel Itu pasti bener gitu Karena engineer-nya React Kebanyakan orang Versel juga gitu ya Dan selain dari dua perusahaan ini Banyak juga kontributor dari seluruh dunia Baik itu yang ngembangin core-nya Core React-nya maupun kontributor untuk yang lain gitu Salah satunya tadi dokumentasi ya Nah dan sampai saat ini nih ya Ini yang mantep nih ya Yang keren React ini sudah unduh atau di-download sebanyak 19,3 juta kali. Kalau kalian lihat statistiknya di NPM. Dan kalau kalian buka repositorinya di GitHub, itu yang ngasih star udah 200 ribu lebih gitu starnya.
Jadi sangat populer sekali ya. Itu ya, jadi teman-teman sedikit mengenai React, apa itu React, terus sejarahnya React, terus awal mula React seperti apa. Mudah-mudahan jadi kebayang lah ya. Berikutnya, kita masuk ke bagian kedua.
Kita akan mencoba untuk transisi dari JavaScript ke React. Kita lihat dulu, kalau misalkan teman-teman udah tahu JavaScript, mau masuk ke React itu sebenarnya apa sih yang ditawarkan oleh React gitu? Ngapain pakai React kalau JavaScript aja bisa melakukan hal yang bisa dilakukan oleh React?
Kita lihat ya, jadi supaya nanti ke depannya 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 kodingan HTML kita. Atau istilahnya bagaimana browser itu menginterpretasi coding kita untuk menghasilkan UI.
Nggak usah ngomongin yang interaktif dulu, sebetulnya menghasilkan UI aja dulu. Jadi saat kalian ngoding dengan kode yang ada di sebelah kiri, contohnya kita kalau ngoding web itu pasti punya struktur seperti ini. Ada HTML, ada body, di dalamnya kita bisa bikin ada div-nya, terus kalau mau bikin judul halaman pakai heading, kalau mau bikin list pakai ul atau ol, dalamnya ada li.
Jadi ini yang kita ketikan di kode editor kita. Begitu kita save. Dan kita buka di browser. Sebetulnya yang terjadi adalah browser akan membuat sesuatu yang disebut dengan DOM. Pasti sudah tahu kan?
Document Object Model. Jadi dia akan memodelkan struktur coding yang sebelah kiri menjadi ilustrasinya adalah sebuah DOM tree. Pohon DOM. Kenapa disebut pohon DOM? Karena ada hirarkinya.
Sama seperti hirarki susunan atau silisilah keluarga gitu ya. Ada parent, ada child. Kalau anaknya banyak ada children. Kalau parentnya parent kita sebut grandparent.
Kalau sejajar kita sebut dengan siblings. Atau saudara atau adik kakak lah ya siblings gitu. Nah jadi sebetulnya direpresentasikan sama browser sebagai DOM3 seperti ini. Jadi ada coding kalian, ada DOM3. Nah terus berikutnya DOM itu apa?
DOM itu adalah representasi objek. Kalau tadi kan visualnya ya, pohonnya itu visual Sebenernya di belakang layar Bentuknya DOM itu, dia adalah objek Visual kan supaya kita gampang melihat Dan memahamin aja ya, sebenernya DOM itu Dia objek, dari HTML, tadinya coding Diubah jadi objek, jadi Yang tadinya trik seperti ini Misalnya tampil di UI-nya Atau di browsernya jadinya seperti ini Jadi dari source code, diterjemahkan dulu Jadi DOM, baru tampillah Di UI-nya, itu representasinya ya Sesimpel apapun kalian nulisin Coding HTML-nya Kalau misalkan teman-teman masih bingung mengenai DOM itu apa, terus cara nyeleksi DOM seperti apa, cara melusurin DOM seperti apa, sampai manipulasi DOM seperti apa, teman-teman bisa kunjungin aja playlist belajar dokumen objek model yang ada di channel WPU ini. Saya udah buatkan cukup lengkap, ada beberapa belas video ya yang bisa kalian ikutin.
Mulai dari teori DOM3, bagaimana cara menyeleksi elemen pada DOM, sampai DOM manipulasi ya. Nah, sebenarnya manipulasi DOM itu apa? Jadi kita bisa mengubah. tampilan atau mengubah UI yang ada di dalam halaman kita berdasarkan codingan HTML-nya.
Jadi kita bisa menambah, mengubah atau menghapus titik-titik pada DOM3 tadi, tapi nggak lewat codingan. Kita bisa memanipulasinya pakai JavaScript. Contoh nih, misalnya kita punya struktur HTML sederhana seperti ini.
Kita punya HTML, head, title, body, dan sebuah div yang nama ID-nya app misalnya. Ini nggak aneh lah ya. Div nama ID-nya app isinya kosong.
Udah ini kita codingnya begini aja. Index HTML terus kita save. Nah sekarang gimana caranya kalau kita mau menyisipkan tag H1 di dalam div ini. Yang di dalam tag H1-nya ada tulisan belajar react bareng WPU.
Tambahin emoji roket lah gitu ya. Supaya masuk ke dalam div ini tapi nggak ngubah struktur HTML-nya. Kita ngubahnya pakai javascript.
Pakai teknik do manipulation. Ya teman-teman harusnya bisa dong. Jadi saya minta ini latihan ya.
Silahkan di-pause dulu videonya. Ketik ini di HTML kalian. Bikin aja file namanya index.html.
Terus nanti di bawahnya bikin aja script javascript. Terus silakan manipulasi agar kalian bisa nyisipin H1 di dalam divnya. Oke, silakan. Gimana?
Sudah? Nah, kalau sudah kita lihat hasilnya. Jadi kalau teman-teman mau nambahin sesimpel hanya tag H1 aja. Yang ada tulisan belajar react bareng WPU.
Ini yang harus kalian lakukan. Pertama bikin tag script dulu di bawah. Sebelum penutup body ya.
Kalian bikin dulu. script, dia punya text javascript terus yang pertama kali kalian lakukan adalah kalian seleksi dulu elemen app-nya yang ini, kalian seleksi dulu pakai javascript, ya, pakai dom selection, kalian bisa pakai document.getElementById jadi javascript tolong carikan saya elemen yang id-nya app, atau kalian bisa pakai query selector ya, document titik query selector, terus kasih hashtag atau tanda pagar app gitu, untuk menyeleksi elemen div, setelah itu Kita create elemen H1. Jadi kita bikin dulu di memory.
Kita bikin namanya header. Atau headings ya. Ini harusnya namanya headings.
Kita bikin dokumen.createElementH1. Disiapin tuh di memory H1 kosong. Terus berikutnya kita bikin text. Untuk elemen H1 tadi.
Kita bikin elemen yang ada di dalam H1 nya. Yaitu tulisan belajar react bareng WPU. Udah tuh.
Jadi ada dua node. Ada dua elemen. Ada text. Ada H1. Berikutnya adalah.
Text-nya kita masukin ke dalam H1. Caranya kita append header content ke dalam header. Jadilah kita rangkai tuh H1 yang ada tulisan belajar react bareng WPU.
Nah udah jadi tuh. Masih di memory nih. Sekarang elemen H1 yang ada text-nya. Kita masukkan lagi ke elemen app yang udah kita siapin.
Kita taruh lagi app append child header. Masuklah tuh H1 ke dalam div yang kosong tadi. Sekarang kalau kita lihat di browser, muncul tuh.
Belajar React bareng WPU. Simple banget. Ini bisa dilakukan pakai DOM selection dan DOM manipulation. Ya, bener-bener kalian nyobain tadi ya. Nah, sekarang kita lihat bedanya antara source code yang pertama kali kita buat dengan hasil yang udah ditampilkan.
Ya, ini perbedaan kode awal dan setelah dilakukan manipulasi DOM. Ini kalau teman-teman klik kanan lalu View Page Source, yang teman-teman lihat adalah codingan awal. Ada coding div app yang kosong, lalu ada script buat manipulasi DOM-nya.
Di sini H1-nya nggak ada, karena H1-nya dibikin pakai JavaScript, kan? Nah, tapi kalau teman-teman klik kanan, lalu pilih inspect, tampilnya begini. Lihat codingannya beda.
Yang di sebelah kiri nggak ada H1-nya, tapi di sebelah kanan ada H1-nya. Jadi kalau teman-teman buka websnya pakai inspect, lalu klik tab element, Ini adalah representasi dari DOM setelah kita lakukan manipulasi pakai JavaScript. Nah itu ya. Jadi inilah yang dilakukan ketika kita mau memanipulasi website pakai JavaScript.
Oke. Harusnya sih nggak ada yang aneh ya. Jadi manipulasi DOM menggunakan JavaScript. Yang pertama HTML yang kalian tulis itu merepresentasikan konten halaman awalnya.
Jadi kodingan awal itu merepresentasikan konten halaman awalnya. Nah DOM itu merepresentasikan konten halaman yang telah diupdate. Atau yang sudah diperbaharui. menggunakan javascript tadi nah, kalau kalian mengubah DOM menggunakan javascript polos atau istilahnya vanilla javascript gak pake framework, gak pake library apapun emang keliatannya sakti ya, kita bisa nambahin satu elemen, kayak tadi ya nambahin H1, kita mau nambahin paragraph kita mau bikin supaya elemennya bisa di klik pake javascript, bisa dan keliatannya keren gitu ya tapi nulisnya ribet temen-temen, mungkin tadi gak keliatan karena kita nambahinnya cuma 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 pake javascript Kalian gak tulis manual tuh si htmlnya Semakin banyak yang harus kalian buat pake 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 satu 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.
Bayangin kalau kalian punya list item. Ada berapa create element yang harus ditulis gitu. Jadi semakin banyak, kalau pakai teknik yang tadi, pakai javascript polos, pakai vanilla ya, waktu yang kalian butuhin pasti banyak kan.
Lama gitu ya. Nanti kita sebagai developer tuh bakalan ngabisin waktu buat nulisin bagaimana sesuatu akan dilakukan. Kayak tadi kan satu-satu tuh Bikin elemen Masukin elemen Simpen elemennya ke div Baru tampilin Jadi kita capek gitu Nulisin satu-satu Gimana, gimana, gimana Nah alangkah lebih baik Enaknya 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 tau 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 imperative atau declarative programming. Yang kita lakukan di javascript tadi, yang polos itu, itu disebut dengan imperative. Ya, sedangkan yang ingin kita lakukan itu disebut dengan declarative. Ya, atau supaya lebih jelas kita bahas sedikit ya.
Imperative dan declarative programming. Jadi imperative programming itu nulisin langkah demi langkah Bagaimana sesuatu harus dilakukan Bikin elemen, masukin elemen, masukin kemana, masukin kemana gitu ya Satu-satu gitu Sedangkan deklaratif menuliskan apa yang pengen dihasilkan Bikinin saya tombol, bikinin saya heading Bikinin saya card, bikinin saya nafbar Itu deklaratif, mendeklarasikan Atau istilahnya gini deh Kalau imperative programming itu seperti kalau kalian ke restoran Pengen pizza gitu ya Tapi kalian nggak bilang pengen pizza, nggak Saya pengen pepperoni 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 dateng 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 dateng, dimakan enak Itu namanya deklarat Imperatif programming. Nah, kenapa saya jelasin imperatif dan deklaratif? Karena React 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 santang, gitu. Oh, berarti mempermudah, nih. Jadi itu sedikit penjelasan mengenai apa yang React ingin lakukan Nah berikutnya, yang seru nih, kita masuk ke bagian ketiga, yaitu kita akan mulai bekerja dengan React. Nah disini kita akan coba bikin aplikasi yang sangat sederhana ya, menggunakan React.
Nah jadi buat kalian yang nggak sabar pengen ngoding React, sekarang lah saatnya ya. Mari kita mulai React-nya, kita baca dulu penjelasannya dikit. Yang pertama nih, kalau kita mau menggunakan React, kita butuh dua script React yang kita panggil lewat sebuah CDN, atau Content Delivery Network.
Jadi kita bisa menjalankan React-nya dengan memanggil library React-nya di dalam script kita. Ini bukan cara yang disarankan Tapi ini cocok banget buat kalian yang masih pemula dan baru pake React Jadi kita gak perlu mikirin dulu gimana cara ngompil Reactnya Atau melakukan bundling pada Reactnya Menggunakan sistem modulnya React Gak perlu, kita bisa jalanin lewat file HTML yang sangat sederhana Ya, nanti kita lihat gimana caranya Nah, tadi katanya ada 2 script Apa aja? Yang pertama adalah kita panggil Reactnya itu sendiri sebagai library utamanya Terus di bawahnya kita panggil Rectangle package yang namanya react-dom supaya kita bisa menggunakan metode untuk manipulasi domnya. Mempermudah kita kalau mau nambah elemen, ngapus elemen, ngubah elemen, dan seterusnya. Ya, jadi ada dua.
Kalian nulisnya begini. Misalkan kalian punya index.html, kasih aja struktur dasar ya. Kasih div kosong sebagai tempat penampungannya tadi.
Kalau tadi kan pakai javascript, kita lihat divnya kita kasih id app. Nah, kalau sekarang react ngasih namanya ganti ya. Kalau react sebelumnya, react 17, itu id-nya app. Tapi di React 18 dia ganti ID-nya jadi root. Nah kenapa?
Nanti kita lihat ya. Tapi yang pasti nih. Yang tadi saya bilang React-nya manggil 2 script tuh ini.
Jadi ada script React-nya. React 18 dari sini. Dan juga React DOM dari sini.
Nanti di dalamnya kita tinggal buat nyiapinnya. Ini sebenernya buat nyiapinnya kalian bikin javascript. Yang memanggil si root ini sebagai container. Atau kalau misalkan teman-teman gak mau ngetikin ini.
Males pak ngetik gitu ya. Kita kunjungin dokumentasinya React. Silahkan datang ke dokumentasinya React. Terus klik learn Terus kita ke installation Supaya dapetin filenya ya Kalian scroll ke bawah Ada disini Try react locally Nah ini kalian bisa download aja nih disini Jadi kalau kalian klik Nanti kalian akan diarahkan ke sebuah script Yang ada script reactnya Ya yuk kita siapin Buka kode editornya Disini saya bakalan pake visual studio code Oh iya tapi sebelumnya tolong siapin dulu folder ya temen-temen ya, saya udah nyiapin foldernya di desktop saya kasih nama foldernya belajar react seperti ini, supaya nanti kita bisa nyimpen filenya di dalam, ya kalau sudah silahkan buka VS Code ini dia, dibuka VS Code terus kita maksimal 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 Kalian boleh copy in semua script yang tadi dari dokumentasi reactnya. Tapi kita akan copy in dikit-dikit.
Supaya nanti kita paham maksud dari masing-masing barisnya apa. Jadi teman-teman boleh ketik aja tanda seru tab disini. Supaya simple kita metanya hapus dulu aja ya. Kita metanya hapus dulu. Disini kita kasih belajar react.
Terus di bodinya tadi kita bikin sebuah div. Yang id-nya root. Terus di bawah sini kita punya script.
Yang tipenya text slash javascript. Yang di dalamnya kita panggil. Apa tadi?
Cons. Lalu container. Dokumen.
Titik get element by ID. Sebenarnya mau pakai query selector juga bisa. Javascript carikan saya. Element yang ID-nya root. Oke.
Nah ya tinggal kita kopikan link ke react-nya. Kita buka lagi tadi dokumentasinya. Kita copy dua baris ini. Script-nya aja.
Kalian bisa lihat lengkapnya ada di sini ya. Cuman anggap aja kita nggak paham gitu ya apa yang ada di dalamnya. Maka kita akan ikuti yang ada di tutorial Next.js-nya. Kita kopikan dua ini dulu.
Kembali ke sini. Kita simpan di bagian head. Sudah ya.
Jadi kita udah manggil dua script react. Save dulu. Jangan dulu dijalanin.
Kita balik dulu ke slide-nya. Oke. Udah ya.
Dua ini sudah. Berikutnya. Kita siapin aplikasi kita.
Kita tadi udah bikin div yang nama kelasnya root. Itu akan kita jadikan sebagai wadah dari aplikasi kita. Nah ini untuk menyiapkan aplikasi react, kita butuh metode yang namanya react-dom.
Titik create root. Nah metode ini diambil dari package react-dom yang udah kita panggil tadi. Kalau kalian nggak panggil yang baris 2-nya, ini nggak akan jalan. Metode tadi kita akan gunakan sebagai wadah dari aplikasinya. Jadi react tuh pengen tau 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 Supaya kasusnya sama dengan kasus waktu kita bikin pake HTML polos tadi ya Oke jadi nulisnya gini Kita butuh variable namanya root Sebenernya namanya bebas aja ya Terus kita panggil react-dom create-root Dari elemen yang udah kita tentukan tadi Kebetulan tadi kan elemennya namanya div dengan id root Kita simpen ke container Masukin ke dalam create-root Baru kita panggil root.render. Buat nampilin elemen yang mau kita tampilin. Dari sini harusnya teman-teman udah bisa lihat. Buat nampilinnya kita cukup satu baris.
Kalau pakai javascript tadi kita butuh 5 sampai 6 baris. Kita coba dulu. Kalian mau ketik manual ini boleh. Silahkan disalin.
Atau mau balik lagi kita copy dari script yang kita download juga bisa. Balik ke sini. Kita ambil aja ini.
Ambil. Cuma kan disini tulisannya My App ya. Nah 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. H1 dulu ya. Terus misalnya kita tadi.
Mau tulisannya apa? Belajar. React.
Bareng. WPU. Atau bareng Padika.
Kita munculin roketnya. Pencet. Kalau kalian pakai Windows, pencet Windows. Terus cari aja roket. Nah ini ya, supaya muncul.
Sudah. Nampilinnya cukup satu baris. Nah buat ngejalaninnya, teman-teman bisa kalau pakai VS Code.
Klik kanan, terus open with live server. Kalau misalkan nggak ada apa? Saya kok nggak ada live server ya? Install dulu. Klik tombol extension di sebelah kiri.
Terus cari aja live server. Ini sebuah extension buat... menampilkan web menggunakan local servernya. Silahkan diinstall.
Kalau sudah, nanti kalau diminta restart VS Code-nya, restart aja. Tapi kalau nggak, ya nggak usah. Udah, balik lagi.
Kita tutup sidebar-nya. Klik kanan. Open with live server. Nah, tampilnya kosong gini, teman-teman. Mana H1-nya?
Kalau kosong, tampilnya atau nggak tampil apa-apa, itu kemungkinan ada error. Nah, mari kita lihat error-nya di mana ya. Caranya, kalian klik kanan, terus inspect, terus kalian ke console. Nah, ini ada error nih.
Katanya unexpected token. Kenapa nih? Ternyata React 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. Unexpected token. Ternyata memang ini adalah error yang diharapkan gitu.
Justru kalau nggak error, H1-nya tampil. Nah, itu justru ada yang aneh tuh. Kenapa error? Nih, karena ternyata React-nya nggak mengenali H1. 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 nggak mengenali JSX. Yang dikenali sama browser itu kan HTML, CSS, JavaScript ya. Supaya si browser ini bisa mengenali JSX, kita butuh sebuah compiler yang bisa nerjemahin JSX jadi sintaks JavaScript biasa supaya kebaca.
Nah, gimana cara? install compiler-nya. Kita akan menggunakan sebuah compiler yang namanya bubble. Yang akan kita gunakan sebagai penerjemahnya.
Ya, jadi kalian bisa nambahin bubble. Bubble itu website-nya resminya ada di sini. Sama ya, kita pakai cdn lagi lewat unpackage ya. Tapi jangan lupa nanti kalian ubah tipe dari javascript menjadi text slash jsx. Kan tadinya text slash javascript ya.
Untuk menginformasikan pada si bubble-nya bahwa kita bakalan ngubah jsx menjadi javascript. Nih kalian tambahin ini di atas scriptnya. Terus jangan lupa nanti ganti nih. Tadi kan ini kita tulisnya javascript ya. Oke.
Ini kalian bisa copy lagi dari script yang di download tadi. Nih kembali ke sini. Harusnya bubble-nya ada di sini ya.
Oh ini disimpan-nya di head ya. Jadi boleh aja. Mau disimpan di head boleh. Kita kembali ke coding-nya.
Kita simpan di head di sini. Kalau di slide saya disimpan-nya di bawah sini. Ya nggak apa-apa juga sama aja. Terus jangan lupa ganti ini. Bisa jadi JSX.
Atau bisa jadi bubble. Sama aja. Ya kalau teman-teman ganti jadi bubble. Nanti tulisan disininya tetap warna-warni. Oke sekarang kita lihat lagi.
Nah sekarang errornya udah gak ada. Tulisannya udah tampil. Tuh ya mantap ya. Sama gak teman-teman? Jadi saya ucapkan selamat buat kalian.
Karena itu adalah aplikasi react pertama kalian. Harusnya sekarang semuanya udah berhasil nampilin web seperti ini. Nah dan sekarang kita akan lihat. Kita akan bandingin ya.
Skrip vanilla javascript dan skrip react yang udah kita buat. Ini javascript buat nampilin H1 yang tulisannya belajar react bareng WPU tadi. Sedangkan react seperti ini.
Nah mungkin teman-teman bilang, Pak cuma beda 2 baris Pak. Gak apa-apalah pake javascript. Ya memang, kalau elemennya cuma 1 bedanya 2 baris. Tapi bayangin kalau misalnya kalian bikin elemennya ada 5, 10, 20. Akan menduplikat berapa baris ini. Kalau di react, nambahnya gak akan terlalu banyak.
Tapi kalau pake vanilla nambahnya bisa berkali-kali lipat. Jadi menggunakan React itu bisa mempermudah atau mempersingkat manipulasi DOM 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 render tadi itu JavaScript.
Nanti kalian bisa lihat tuh Gimana caranya JSX bisa keluar masuk JavaScript dengan mudah Tapi sebenernya itu JavaScript Yang bisa nulisin sintaks kayak HTML Mirip HTML Nah meskipun ada cara lain untuk bikin komponen Komponen Itu istilahnya elemen HTML-nya gitu ya. Ada cara lain, tapi kebanyakan developer React itu pakai JSX untuk bikin komponennya. Jadi kita ikutin aja ya, kita pakai JSX aja. Sintaks JSX ini kelihatannya kayak HTML, tapi dia lebih strik. Nah, striknya 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 JSX. Jadi JSX itu punya tiga aturan penting yang harus kita ingat-ingat.
Apa aja? Kita bahas satu-satu. Aturannya ada di sini ya. Kalau teman-teman mau lihat dengan lebih detail. Ada di dokumentasi react-nya.
Yang pertama. JSX 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 kart. Kan dalamnya ada tulisan. Ada gambar. Ada tombol.
Gimana bikinnya? Kita lihat. Yang kita udah coba.
Itu kan pada saat kita ngerender. Kita nampilin cuma satu elemen ya. Elemen H1 yang ada tulisannya. Ini gak masalah. Karena cuma satu elemen.
Jadi aman, tadi tampil dengan normal Udah tampil Sekarang gimana kalau gini Pada saat kita ngerender, di dalamnya ada 3 elemen Nah kalau kalian tulis begini Error pasti, karena metode rendernya Tidak mengembalikan 1 elemen Malah 3 elemen Kalau kalian pengen bikin ini menjadi 1 komponen Yang harus kalian lakukan adalah Membungkus 3 elemen ini Kedalam 1 elemen lagi Karena kalau ini dijalanin, ini pasti error Tuh ya Jadi kalau misalkan ada elemen JSX yang sejajar gitu, yang bersebelahan, maka dia harus dibungkus dengan tag pembungkusnya. Nah apakah yang Anda maksud adalah JSX fragment? Jadi JSX fragment itu adalah banyak elemen yang mau kita jadikan satu, tapi tanpa bikin elemen baru. Sebenarnya kalian bisa bungkus ini pakai div, tapi nanti divnya jadi elemen sendiri. Kalau kalian nggak mau, kalian bisa bungkus pakai tag kosong kayak gini.
Pokoknya, Metode rendernya harus ngembalikan satu elemen. Ya maka ini akan normal. Dengan asumsi kalian udah punya gambarnya.
Ya itu yang pertama. Jadi harus ngembalikan satu elemen. Ingat-ingat. Yang kedua.
Kalian harus selalu tutup semua tag-nya. Nah ini yang saya bilang tadi salah satu karakteristik JSX yang strict. Kalau HTML itu nggak semua elemennya kita butuh tutup tag-nya teman-teman.
Kayak misalkan kalian bikin tag ul terus di dalamnya ada li-nya. Kan li itu punya buka li sama tutup li ya. Kalau kalian ilangin tutupnya. Jadi li buka tulisan gak ada tutupnya itu boleh Sama htmlnya 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 Yang gak punya penutup Tag tersebut harus self closing Jadi ini harus ditutup nih Padahal kalau html gak ada tutupnya begini Gak masalah Kan kalau tag pembuka tag penutup tuh oke lah ya Biasanya juga kalian lakukan Bahkan kalau di vs code udah ditutupin manual Tapi kalau kalian lupa, misalnya nggak pakai tutup, kayak gini, error dia.
Unterminated JSX content. Jadi dia anggapnya si JSX-nya nggak selesai. Tuh, yang kedua, selalu tutup semua tag-nya. Ingat-ingat. Yang ketiga, kalau ada atributnya, kalian gunakan camel case.
Hampir untuk semuanya. Ini contohnya, kalau misalnya kalian punya metode yang namanya onclick. Ya kan, kalau di HTML itu nulis onclick, boleh aja.
C-nya 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 sebuah elemen cukup tulis kelas suruf kecil semua. Selesai.
Tapi kebetulan di JSX kelas itu udah dipesen namanya. Jadi tulisan kelas disini 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. Itu contohnya ya.
Nanti 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 alert seperti biasa ya. Kalian boleh coba, tinggal tadi di-pause aja videonya, terus di-salin.
Ya, jadi itu sekilas mengenai cara pakai React yang sangat sederhana, teman-teman. Berikutnya, kita masuk ke topik yang saya sebut dengan... Pre-requisite.
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 react. Baik itu dari sisi pengetahuannya, atau dari sisi software-nya. Ya, kita lihat satu-satu. Yang pertama, materi apa yang harus kalian kuasai terlebih dahulu. Jadi jangan main loncat aja ke react, kalau materi-materi ini belum kalian pahami, ya.
Yang pertama, jelas HTML dan CSS. Karena harusnya kalian udah bisa bikin website yang Bagus dulu pake HTML, CSS Baru abis itu kalian belajar Javascript Fundamentals Ya ini harus gak bisa dilewat Kalian harus tau mengenai variable, tipe data Pengulangan, pengkondisian, objek, function, array Harus ngerti dulu Baru kalian belajar DOM Ya karena jelas kalau misalnya kalian pake React tanpa ngerti DOM Kalian gak akan ngerti Masukin Tanfaat react itu apa? Jadi cuma pakai-pakai aja.
Tapi kalau kalian udah pernah bikin sebuah aplikasi javascript. Pakai dom manipulation yang polos gitu ya. Javascript polos.
Pasti kerasa begitu pakai sebuah framework atau library. Oh ternyata ini berusaha untuk menyelesaikan problem apa. Berikutnya kalian harus paham juga mengenai teknik-teknik.
Pemrograman di modern javascript atau ES6. Apa aja nanti kita lihat ya. Terus kalian harus paham juga mengenai command line interface. Dan juga git.
Tuh kan nanti. Kedepannya kalian akan sering banget menggunakan CLI atau terminal. Entah itu buat download package, ambil dari GitHub repository orang.
Jadi harus bener-bener paham gimana caranya menggunakan Git dan juga menggunakan terminal atau CLI. Kalau kalian nginstall Git di komputernya, biasanya itu udah ada yang namanya Git Bash. Atau kalau yang pake Windows ada PowerShell.
Atau kalau yang pake Linux sama macOS juga pasti ada terminalnya. Silahkan pahami perintah-perintah dasar yang biasanya dipake di terminal ya. Terus kalian juga harus belajar mengenai package manager.
Karena ke depannya react itu nggak dipakai dengan cara yang kita pakai tadi. Kita harus pakai misalnya npm, module bundler, builder, dan masih banyak lagi. Dan untuk memahami itu kalian butuh paham juga mengenai Node.js. 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 silahkan mundur dulu aja belajar materi-materi ini. Karena jangan khawatir teman-teman. untuk belajar materi-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 variable pada ES6. Tahu kapan waktunya kalian deklarasi variable pakai let, kapan kalian pakai cons.
Ya, pokoknya jangan lagi pakai var. Berikutnya kalian tahu gimana cara bikin function, tahu caranya bikin function expression, dan juga function declaration. Dan kalian harus tahu juga, yang namanya arrow functions beserta perilakunya.
Kalian harus paham mengenai objek dan juga kelas beserta cara pakenya ya. Tahu gimana caranya instansiasi sebuah objek tahu apa itu prototipal inheritance atau pewarisan pada javascript berikutnya kalian harus paham mengenai array dan metode-metode pada array dan pahami juga ada yang disebut dengan higher order function salah satunya adalah di metode-metode pada array seperti map, filter radius. Kita harus bener-bener paham ya Tahu caranya destructuring, gimana caranya memecah objek menjadi variable. Terus tahu bagaimana cara pakai template literals, sehingga kalian dapat dengan mudah merangkai string yang ada variable di dalamnya.
Nggak perlu keluar masuk, nggak perlu konkatenasi. Pahami template literals. Dan juga pahami ternari operators. Karena di React ini sering banget dipakai.
Ya, ternari operators itu yang tanda tanya dan titik 2. Untuk ngeganti if else menjadi one liner atau satu baris. Dan terakhir, kalian harus paham mengenai modul sistem pada JavaScript. Gimana caranya import, export file kita atau metode kita menjadi sebuah modul.
Ini yang harus kalian pelajari. Kalau misalkan ada yang masih belum paham, nggak usah khawatir. Karena di channel ini, saya sudah sediakan jalur belajarnya. Teman-teman bisa ikutin semua materi yang dibutuhin untuk belajar React.
Ada semua. Mulai dari HTML, CSS, JavaScript. JavaScript-nya bahkan ada 3 playlist ya.
Ini kalau di total-total bisa sampai... 70 video kali ya, silahkan. Untuk yang JavaScript. Terus ada juga Git dan GitHub, beserta belajar CLI ada di dalamnya.
Dan belajar Node.js dan NPM ada juga di situ. Ya, jadi silahkan itu dipelajari dulu ya. Jangan buru-buru pengen belajar React, tapi fundamentalnya belum paham. Nah, berikutnya setup editornya. Untuk menggunakan atau membuat aplikasi pakai React, tentu saja kita butuh editor ya, atau kode editor.
Kalian bisa pakai macam-macam, cuman yang akan kita gunakan di seri ini adalah VS Code, yang harus kalian... install linternya yaitu eslint coba cek extensionnya udah di install apa belum, terus konfigurasinya udah dilakukan apa belum, nanti kalau misalkan belum temen-temen bisa cek di dokumentasi reactnya ada gimana cara konfigurasi linternya jangan lupa juga install extension untuk format kode kalian supaya gampang diaturnya, gak perlu ngerapihin manual yang namanya pretier dan kalian bisa install browser extension yang namanya react developer tools, ini kayaknya ada untuk semua browser-browser populer Ya setidaknya untuk browser yang saya pakai yaitu Google Chrome ini ada. Oke itu jadi prerequisite untuk belajar React di seri kita kali ini.
Oke dan kalau teman-teman sekarang sudah 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 React ya.
Jadi apa aja sih konsep yang menjadi inti yang harus kita pelajari di dalam React ini. Jadi kalau teman-teman lihat ada 3 core konsep di dalam React. Yang pertama jelas adalah komponen Yang kedua ada yang disebut dengan props Dan yang ketiga ada yang disebut dengan state Jadi tiga hal ini harus teman-teman kuasai dulu Atau minimal tau dulu ya sebelum kita masuk ke konsep-konsep react lain atau fitur-fitur react lain yang lebih kompleks lagi kita bahas dulu mengenai komponen gimana cara kita membuat UI di dalam react menggunakan komponen, jadi intinya pada saat kita membuat UI, 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 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 independent atau mandiri, yang ke depannya bisa kita gunakan kembali. Itu jadi komponen yang reusable istilahnya. Jadi, contohnya, kalian bisa anggap sebagai blok-blok pada Lego lah ya, yang bisa kalian susun gitu. dimana nantinya kita bisa susun potongan-potongan kecil tadi agar menjadi sebuah blok 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. Nah itu 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. Nah nanti card ini kita simpen ke dalam sebuah seksian tertentu di dalam website kita.
Seksian itu bisa kita anggap juga jadi sebuah komponen. Nah untuk bikin komponen di React itu gimana caranya? Pertama, teman-teman harus pahami dulu bahwa komponen pada React 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 camel 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. Sama kayak tadi kita manggil H1 gitu.
Tapi sekarang kita manggil komponennya dengan ada tag pembuka dan tag penutupnya. Ya, contohnya kayak gini. Jadi kalau tadi tulisannya kita langsung tulis di method render, 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 JSX-nya. Jadi yang tadinya ada di render, pindah ke function header. Terus pada saat di render, kita tinggal panggung. Panggil komponennya.
Tapi pakai lebih kecil dari dan self-closing tag-nya. Gini. Ya, mari kita coba ya.
Kita balik ke codingnya lagi. Sekarang kita akan ubah. Agar komponen kita yang tadinya langsung ditulis di render.
Jadi sebuah komponen terpisah. Kita bikin fungsinya di sini. Function, huruf besar, header misalnya. Nulisnya kayak fungsin biasa. Langsung return.
Kurung buka, kurung tutup. JSX-nya. Ini kita cut aja.
Cut, masukin ke dalam. Tinggal kita panggil. header. Jangan lupa ditutup tag-nya. Ya.
Jadi ini caranya kalau mau pakai gaya komponen ya. Kita save dulu. Kita lihat hasilnya.
Ya sama aja. Sekarang kalau kita lihat. Kita inspect. Elemennya ada di sini ya. Jadi belajar ya bareng Padika 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 3 komponen.
Jadi dibentuk oleh komponen-komponen kecil lain di dalamnya. Kita bisa nyimpen 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, ada main, ada footer gitu misalnya ya. Nah tapi disini kita mau bikin headernya dulu aja.
Nah caranya kita harus bikin function untuk setiap komponen yang mau kita buat. Caranya gini. Jadi tadi kita udah punya komponen header.
Sekarang kita punya komponen homepage. Yang di dalamnya ingat kita harus mengembalikan sebuah elemen ya. Ini aturan JSX.
Yang di dalamnya ada header. Kalau mau pake div gini boleh. Atau kalau mau bikin sebagai fragment gak ada divnya juga boleh tadi 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 codingnya. Sekarang di sini kita bikin function. Home page.
Oke. Ingat huruf depannya huruf besar. Terus biasanya dibikin sebagai camel case ya.
Kalau ada kata berikutnya huruf besar juga. Dia mereturn. Begini.
Ya kalian bisa bikin pakai fragment. Jadi cukup begini aja. Atau mau bikin pakai div juga boleh. Ya atau biar rapi. Ininya kita turunin aja lah.
Ya. Ini. Ininya turunin. Baru di dalamnya. Kita panggil si headernya.
Gitu. Jadi. Home page memanggil header. Homepage kita render Disini Homepage Ya kita save 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 react itu Salah satunya adalah reusable Kita cukup bikin satu komponen Kita bisa pakai berulang-ulang Caranya gimana? Kita akan lihat ya Jadi kita bisa menggunakan komponen secara berulang-ulang Dengan cara menuliskan tag-nya 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 dua komponen seperti ini tampilannya Silahkan kalau kalian mau coba nambahin 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.
Nah ini perilaku dari komponen yang berikutnya, yaitu dinamis. Jadi selain reusable, 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. Kita bahas dulu apa itu props. Jadi di dalam HTML biasa, itu kan kita bisa pakai atribut untuk mengubah perilaku dari sebuah elemen.
Kita bisa kasih kelas, kita bisa kasih ID, kalau image kita bisa kasih source src, kita bisa kasih style, dan masih banyak lagi. Dan itu menyebabkan perilaku dari setiap elemennya bisa berubah meskipun elemennya sama. Contohnya nih, tadi ya seperti atribut src yang ada di dalam Element image. Kita bisa mengubah sumber gambarnya.
Jadi kita bisa punya 5 tag image. Yang src nya beda-beda. Tag nya sama. Tapi gambarnya beda-beda gitu ya. Itu kalau di html.
Nah mirip seperti itu. Kita juga bisa mengirimkan property. 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 props ya kita sebutnya props author 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.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.author 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. Props yang beda. Kita kasih nama aja author. Ya nama propsnya bebas ya.
Misalnya penulis gitu. Atau kita kasih name aja ya. Name gitu ya.
Sama aja. Yang pertama namenya adalah WPU. Begini. Yang kedua namenya adalah Padika. Begini.
Nah sekarang kita udah punya propsnya. Akan dikirim ke komponen header. Tangkap disini. Props. Karena dia bentuknya objek.
Maka kita bisa ganti. Kurung kurawal untuk manggil javascript, panggil objeknya. Lalu kita panggil namenya.
Ya. Gitu. Coba kita lihat hasilnya. Save dulu. Kita kembali ke browsernya.
Nah ini dia. Jadi udah ada. Yang atas WPU.
Yang bawah Padika ya. Sip. Itu dia.
Komponen yang sama. Tapi propsnya beda. Simple aja. Oke. Berikutnya, kita bisa melakukan refactor pada props kita supaya nulisnya lebih rapi.
Yang pertama kita nggak perlu nulisin objeknya. Kita bisa pakai teknik destructuring supaya langsung manggil nama propsnya atau propertinya ya. Terus kita juga bisa menggunakan ternari operator ketika kita pengen bikin nilai default pada propsnya.
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 object props ya. Sekarang kita nggak perlu panggil objeknya lagi. Kita sudah langsung bisa ngambil propertinya menggunakan destructuring. Caranya pada saat nulis parameter kita kasih kurung-kurawal supaya langsung masuk ke objeknya. ambil propertinya, jadi gak perlu tulis props author atau props nama lagi kita cukup langsung panggil nama propertinya dan disini kita pakai ternari nih, jika author ada isinya, maka pakai nilai author tersebut kalau gak ada, kalau nilainya false kan ambil yang kanan ya, kasih nilai default WPU, jadi karena yang pertama ini gak ada, maka yang dipakai WPU, tapi karena komponen header yang kedua ini punya props, maka timpahlah WPU pakai isi dari propsnya.
Ya, kita coba. Balik ke sini. Ini kita hapus. Jadi namenya nggak perlu. Sekarang kita pecah atau kita masuk ke dalam propsnya pakai destructuring.
Cukup ambil namenya. Sekarang di dalam sini nggak perlu lagi pakai nama objeknya. Kita bisa kasih.
Ternari. Jika nilainya true, tampilkan namenya. Jika nilainya false, tampilkan WPU.
Oke. Kita akan lihat hasilnya sama ya. WPU dan padika.
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 dapet dari API misalnya. Ngambil dari database.
Pengen nampilin datanya tapi pakai pengulangan. Nah salah satu caranya, kita bisa pakai salah satu metode pada array. Ya kan banyak tuh ya. Bisa pakai 4-inch, 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 li 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 variable 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 Temen-temen bisa gunakan map Kayak gini ya Panggil arraynya Terus kita map Ambil elemen di dalamnya Pake arrow function Tampilin tiap-tiap data atau elemen pada arraynya Oke simple aja kita coba ya Balik ke codingnya Kita bikin dulu disini ya Kita kasih const students Ada S nya Karena dia arraynya banyak isinya Oke Kita kasih Sandika, Dodi, dan Erik. Ya, buat yang suka ngikutin playlist pembelajaran di WPU pasti udah kenal lah ya.
Tiga orang ini. Sekarang, kita mau panggil ini header yang ini kita hapus aja. Sekarang di bawahnya kita mau bikin ul.
Ya, kita bikin ul. Seperti ini. Di dalamnya, kita mau looping li-nya.
Nah, looping-nya berarti kita kan butuh javascript ya. Kalau mau pakai javascript kita buka dulu kurung kurawal. Lalu kita tulis students.map.
Lalu kita panggil arrow function. Ambil satu elemennya singularnya. Karena kalau students itu jamak ya plural ya.
Kita ambil singularnya student. Arrow function. Nah ini karena kita mau nampilin lagi JSXnya.
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 Erik.
Keliatannya 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 a list should have a unique key prop.
Nah jadi katanya kalau teman-teman bikin list. Atau melakukan looping pada elemen yang sama. Tiap-tiap elemen tadi. Harus punya property key yang memiliki nilai yang unik.
Nah kita tadi nggak ngasih. Nah kita tadi nggak ngasih property apa-apa. Ini kalau kita jalanin aman. Tapi ada error tuh ya. Nah ini kenapa error?
Karena dia butuh unique key. Apa itu unique key? Tadi warningnya menjelaskan bahwa ada prop key yang hilang. Katanya kita butuh property yang namanya key. Kenapa ada warning?
Karena react tuh butuh sesuatu untuk menandai elemen dengan nilai yang unik. ketika elemen tersebut kita generate menggunakan looping. React menganggapnya semua elemennya sama.
Harusnya, tiap elemen tadi, meskipun li-nya sama, harus punya penanda, supaya nanti ketika ke depannya ada perubahan, React tahu yang mana yang berubah. Karena yang React lihat elemennya, bukan isinya. Nah, di kasus kita, kita bisa menggunakan nama student sebagai nilai dari property key-nya. Kenapa?
Karena kebetulan nama student-nya nggak ada yang sama. Sandika, Dodi, Erik, beda-beda semua. Tapi kan kalau kita pakai nama student Ada kemungkinan ketemu dua mahasiswa yang namanya sama Berarti nggak bisa kita pakai harusnya ya Nah ke depannya Sebaiknya kalian gunakan nilai yang bisa dipastikan unik Misalnya menggunakan unique ID Jadi kalian bisa kasih gini Kasih property key yang nilainya sama dengan nilai student Supaya problem tadi hilang ya Kita coba Balik lagi ke coding kita Kita kasih property key Yang nilainya student Ini Jadi sama antara key dan value-nya ya.
Sekarang balik ke browsernya. Errornya hilang, tampilnya udah oke. Berikutnya, gimana kalau kita mau nambahin interaksi?
Nah, kita bisa nambahin interaktifitas dengan yang namanya state. Nah, ini seru nih teman-teman. Jadi kita tahu bahwa banyak hal di halaman kita yang bisa berubah karena ada interaktifitas dari user. Sesimpel user ngeklik tombol, nginputin sesuatu di text field 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 atau seiring waktu itu disebut dengan state. 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 interaktifitas pada elemen atau komponen kita React tuh pake state dan juga event handler Misalkan onclick, onkeyup, onmouseover, dan seterusnya Ya itu tadi state Nah di dalam React ada juga yang namanya state dan hooks Ya 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 di klik. Jadi nanti di dalam tombolnya kita kasih angka 0. Kalau kita klik tombolnya sekali, angka 0 di dalam tombolnya ganti jadi 1. Klik lagi, nambah lagi. Klik lagi, nambah lagi. Ya, tampilannya kayak gini.
Kita bikin tombol misalkan ada like terus dalam kurung angka. Udah berapa kali nih tombol like di klik gitu. Nah, React itu punya serangkaian function yang disebut dengan hooks. Jadi React itu punya banyak hooks.
Ya, kegunaannya macem-macem. Tapi yang jelas. Hooks ini memungkinkan kita untuk nambahin logik pada komponen kita. Jadi, hooks apa bisa melakukan apa.
Hooks apa bisa melakukan apa. Salah satu hooks yang biasa dipakai, yang tujuannya untuk mengelola state adalah set state. Jadi, ada sebuah hooks yang namanya set state. Satu dari banyak hooks yang React punya. Tugas dia adalah untuk mengelola state.
Dimana set state ini ketika kita panggil, dia mengembalikan nilai berupa array. Ingat, array ya. Nilai di dalamnya bisa banyak.
Dan nanti kita bisa akses isinya pakai destructuring. Set state, mereturn array yang bisa kita ambil pakai destructuring. Elemen pertama pada array, hasil kembaliannya, itu adalah nilai dari statenya. Apa yang mau kita kelola. Variable nih, variable yang mau kita kelola.
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 functionnya ini diawali dengan kata state.
Lalu diikuti dengan nama state-nya. Atau nama nilainya. Jadi pasangan. Misalnya tadi like.
Kita bisa bikin nama state-nya like. Berarti nama functionnya set like. Atau kalau misalnya. state-nya score. Berarti nama function buat mengubahnya set score.
Ya, selalu berpasangan. Ini contohnya, kita bisa punya variable likes dan fungsi set likes. Kita tulis pakai destructuring.
Jadi kita panggil hooks-nya, react, use state. Ini mengembalikan array. Langsung kita tangkap pakai destructuring. Kurung siku, kurung siku.
Ambil variablenya, ambil function-nya. Yang pertama, nanti kita bikin dulu itu. Terus, kita juga bisa ngasih nilai awal pada variablenya.
Misalnya kita pengen nilai awal dari variable like ini 0. Nah maka kalian langsung kasih aja argumen pada hook useStatenya. Kayak gini. Nah ini akan menentukan bahwa nilai awal dari variable likes itu 0. Kalau mau dibubah jadi 1 gimana?
Nanti pakai setLikes. Kita lihat. setLikes itu disebutnya state updater function. Sebuah function yang bisa mengupdate nilai dari state, variable state. Jadi setLikes tadi namanya state updater function.
Sekian. Untuk menjalankan function si setLikes ini, kita bisa panggil di dalam function lain di komponen kita. Jadi kita bisa bikin function setLikes gitu misalnya.
Misalnya gini, kita mau ubah nilai likes agar bertambah 1 setiap tombol di klik. Dan misalnya kita akan lakukan di dalam sebuah function yang nanti kita buat namanya handleClick. Ini function ketika event dijalankan. Ketika tombol di klik, panggil function namanya handleClick.
Nah di dalam handleClicks nanti, kita panggil setLikes. gitu ya, kayak gini panggil set likes, dimana nanti di dalamnya likes akan bertambah satu, itu cara ngelola state di dalam react, nah nyimpen handle clicknya dimana ini bisa kita simpen di dalam komponen kita, ya kita lihat saat kita bikin event handlernya, nih jadi terakhir yang perlu kita lakukan, tinggal kita bikin tombolnya buat nanganin eventnya ya, bikin tombol button biasa kasih props on click gitu ya jangan lupa, nulis nama event harus pake camel case, kita udah bahas tadi di aturan JSX ya Nulis onclick kalau di HTML biasa bisa huruf kecil semua. Tapi kalau di JSX harus camel case. Onclick C-nya gede. Nah terus nanti kita tampilin jumlah likes-nya di dalam value dari button-nya.
Kayak gini. Jadi kita punya component button yang punya props onclick. Di mana props onclick ini kalau dijalankan event-nya akan memanggil fungsi handle click.
Ini kenapa di sini nggak pakai kurung buka kurung tutup. Karena kalau kita pakai kurung buka kurung tutup Fungsinya langsung dijalanin Kita pengen fungsinya jalan ketika di klik Terus isi dari tombolnya ada tulisan like Kurung buka Lalu panggil isi dari state likesnya Kita punya state likes kan tadi ya Lalu kurung tutup Jadi ini istilah-istilah yang harus kalian pahami di dalam React Ada state sebagai variable yang bakalan berubah Ada state updater function sebagai fungsi yang bakal ngubah nilai dari statenya Ada props yang jadi atribut dari sebuah komponen Ada event 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 variable dan state updater functionnya.
Yang merupakan bagian dari hook use state. Kita punya function handle click yang di dalamnya menjalankan function set likes. 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 temen-temen mau jadi komponen sendiri juga bisa ya button kita kasih propsnya tadi on click yang akan memanggil fungsi handle click terus di dalamnya ada tulisan like berapa kali likenya misalnya likes dapet dari variable likes ini dapet dari mana Ini dapat dari variable yang akan kita bikin.
Kita bikin variable dengan di structuring ada dua variable. Yang pertama adalah likes. Yang kedua adalah set likes.
Dia adalah react lalu titik use state. Yang nilai awalnya atau initial value-nya kosong. Sudah. Berikutnya kita tinggal panggil function-nya buat nge-handle.
tombol kliknya kita pakai function declaration handle klik Yang akan menjalankan set likes. Like plus 1 ya. Gini. Jadi ketika di klik.
Jalankan fungsi ini. Panggil set likes. Ubah likesnya jadi 1. Tadinya 0. Tampilkan ke sini. Jadi nilainya akan 1. Gitu ya.
Mari kita lihat. Oke kita punya. Kita klik.
Jadi 1. Klik lagi jadi 2. Klik lagi jadi 3. Gitu teman-teman ya. Jadi itu dia. Cara pakai state props dan hook yang sangat sederhana. Bener-bener kalian paham nih. Nah dan berikutnya setelah kita belajar dasar-dasar dari React selanjutnya kita bakalan belajar apa nih?
Ya di dalam React kalau kalian mau lanjut lagi belajarnya setelah ini yang harus kalian pelajari adalah hal-hal berikut ini teman-teman. Jadi kalian harus tau dulu sebenarnya bagaimana React itu bekerja. Ya kok bisa sih React melakukan hal-hal tadi?
Sebenarnya gak usah terlalu dalam apalagi untuk kalian yang pemula tapi minimal tau kenapa kok bisa terjadi seperti itu. Ya teman-teman harus tau yang disebut dengan render dan commit. Teman-teman harus ngerti apa itu virtual DOM dan bagaimana React.
membuat dan bekerja dengan virtual domnya 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 pakenya terus juga harus paham juga mengenai life cycle ya itu penting untuk dipelajari terus juga bagaimana menggunakan hooks tadi kita coba dikit aja ya hooksnya masih banyak hooks lain yang sangat bermanfaat yang harus kalian ketahui dan coba dan masih banyak lagi topik-topik lain karena cukup kompleks ya reaksi itu sebenarnya oke Jadi kalau misalkan teman-teman pengen belajar React yang lebih lanjut, silakan tulis aja di kolom komentar, supaya nanti kita bisa lanjutkan lagi materinya, agar kita bisa menyelam lebih dalam ke library React ini. Ya, dan sebelum saya akhiri, rasanya kurang lengkap kalau kita nggak latihan dulu. Meskipun kita cuma belajarnya dasar-dasarnya aja, kita akan coba terapin konsep yang udah kalian pelajarin tadi untuk bikin sebuah aplikasi sederhana.
Ini yang pertama nih, saya pengen teman-teman bikin sebuah simple counter ya. atau alat menghitung sederhana. Tadi kalian udah bisa bikin tombolnya pada saat diklik nambah nilai. Sekarang saya pengen kalian bikin tombolnya ada 3 dan ada 1 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 saya pencet tombol reset atau reset di tengah sini, maka akan mengembalikan nilai yang tadinya berapapun setelah ditambah atau dikurang. Balik lagi jadi 0. Silahkan teman-teman boleh cobain ya. Pokoknya buatlah agar aplikasinya bisa kayak gini.
Bisa nambah. Bisa kurang. Kurang terus sampai berapapun. Nambah terus sampai berapapun.
Terus reset. Dan kalau mau lebih challenging lagi. Coba buat hanya menggunakan 2 buah komponen.
1 komponen button. Kan kita punya 3 button nih. Bikin jadi sebuah komponen yang punya props yang beda. Jadi jangan bikin 3 komponen button yang beda.
Bikin 1 komponen button. sama bikin satu komponen text. Jadi kalau pakai kasus kita, kalian punya homepage, di dalamnya ada dua komponen yang propsnya 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 gak bisa nambah lagi tulisan 0 nya akan berubah menjadi tulisan done misalnya terus kalau dikurangin juga gak bisa kalau dia di bawah 0 jadi paling kecil tuh angkanya 0 kalau di klik tombol minus lagi maka tulisan 0 nya juga berubah jadi done juga dan saat tulisannya jadi done tombol reset nya nyala misalnya contohnya gini ini jadi awalnya reset nya gak bisa di klik kalau saya klik tanda tambah bisa nambahin terus sampai angka 10 nah kalau udah 10 tulisannya done Dua tombol ini gak bisa di klik. Cuma reset yang bisa di klik.
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. Silahkan teman-teman modifikasi simple counter yang sebelumnya.
Supaya jadi kayak gini. Sama juga ya. Kalau bisa bikin pakai 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 kalau udah bikin mau disamain boleh Atau kalau mentok pak bingung yaudah gapapa Lihat hasil yang udah saya buat disini Atau bahkan kalian punya solusi yang lebih keren lagi dari yang saya buat disini Silahkan kirimkan aja solusi kalian Supaya temen-temen yang lain nanti bisa lihat juga Bisa lakukan pull request aja ke reponya Ya jadi kita semua bisa belajar bareng-bareng Oke temen-temen ya jadi mungkin itu aja Untuk pembelajaran RIE kita Mudah-mudahan pembelajarannya masuk akal buat temen-temen 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.js. Jadi ini gak 100% buatan saya, ya hampir 90% saya ngambilnya dari tutorial punya Next.js.
Jadi kalau misalkan menurut kalian ini masuk akal, silahkan berterima kasihnya ke Next.js-nya. Ya dan kalau misalkan kalian pengen tutorial ini berlanjut Untuk memperajari react lebih jauh lagi Ya silahkan kasih like aja Dan kasih tau saya di kolom komentar Kalau kalian pengen lanjutin lagi seri react ini Ya jadi mungkin itu aja Video pertama kita belajar mengenai react Mudah-mudahan bermanfaat Kita akan ketemu lagi di video berikutnya Saya Sadiqa Ghalib pamit Dan seperti biasa teman-teman Jangan lupa titik koma