Halo semuanya, selamat datang kembali di channel Pipkot Studio bersama saya, Apip Sepulo. Di video sebelumnya, kita udah ngebahas tentang apa itu Atomic Design, terus juga kita udah tau konsepnya seperti apa. Nah, di video kali ini kita akan coba melakukan implementasi Atomic Design untuk kode kita ya.
Jadi kita akan coba di sini untuk membuat halaman login nantinya ya, tapi kita akan gunakan pendekatan Atomic Design. Nah tapi sebelumnya kita akan coba buat dulu dalam bentuk satu file utuh ya sehingga nanti kita akan bisa membandingkan antara tanpa atomic design dan juga ketika sudah menggunakan atomic design. Nah kita coba run project kita ya npm run dev.
Nah ini adalah kondisi project kita sebelumnya ya. Nah kita akan coba buat berarti disini untuk halaman loginnya ya. Nah ini saya akan hapus dulu untuk button nanti.
akan kita gunakan. Nah disini saya mau tambahkan div dengan class name-nya yaitu w-full kemudian max-w-xs. Nah ini biar dia nanti width-nya full tapi maksimal width-nya itu akan berukuran lebih kecil ya.
Nah ini sebetulnya basic tailwind saja ya. Kemudian saya akan buat H1 di dalamnya. Misalkan saya beri kelas juga. Di sini X Blue 600 misalkan.
Nah yang ini BG Blue saya akan hapus dulu ya. Kita bikin warna backgroundnya aja di warna putih aja. Nah kayak gini ya. Nah di sini saya akan tulis login.
Hai nah ini udah muncul login terus saya mau coba tambahkan lagi teksnya ya jadi teks 3xl supaya ukurannya besar kemudian font-bold kemudian mungkin saya mau kasih margin sedikit ya nanti sini MB2 Oke login kemudian saya mau bikin P class namenya yaitu font-medium kita coba tambahkan warnanya text-late 500 misalkan welcome please enter your details ya Nah ini sudah ada untuk subtitle kemudian saya mau bikin form di dalam formnya itu saya mau bikin dulu div kita beri jarak setiap inputnya nanti dengan margin kemudian label kelas namenya saya mau kasih blog blog terus text-late 700 kemudian text-sm supaya dia kecil ya kemudian font bold MB2 Oke kita beri label email misalkan ya Nah ini HTML4, jadi kalau misalkan kita biasanya itu menggunakan for untuk label, nah kalau di React itu dia menggunakan HTML4 ya. Nah di sini berarti email, kemudian kita tambahkan input, input, kelasnya kita berikan text SM dulu, Kemudian border, kemudian rounded, W, O ya, supaya dia nanti ukurnya sama dengan parentnya. Kemudian P, Y, 2 ya, ini adalah padding untuk vertical.
Kemudian P, X, ini untuk horizontal ya. Kemudian text slate 700, ini biar nanti dia... warnanya jadi slate kemudian disini mungkin saya mau tambahkan placeholder ya placeholder nya example misalkan at mail.com kita coba cek nah ini dia ya sudah ada kemudian placeholder nya saya mau opacity 50 nah jadi dia enggak terlalu ini ya tidak terlalu jelas lah warnanya Oke yang ini saya tambahkan margin bottom delapan ya biar dia enggak terlalu numpuk Oh ini ada yang salah bukan 2 full tapi w full ya. Nah dia jadi lebih panjang. Kemudian setelah itu saya akan copy aja yang ini karena dia akan mirip nantinya.
Nah seperti ini kemudian ini saya ubah jadi password misalkan. password yang ini sama password tipenya juga sama password kemudian disini place order nya itu mungkin saya coba pakai bintang bintang bintang nah seperti ini ya untuk password kemudian disini saya tambahkan button ya Nah ini bisa kita ambil dari komponen yang sudah kita buat ya. Di folder components.
Kemudian masuk ke element dan button ya. Karena kita udah bikin sebelumnya berarti kita bisa langsung pakai disini buttonnya. Untuk textnya login. Kemudian variannya. Ini warna.
Atau juga ini bisa kita. Tambahkan style yang lain ya. Jadi ini nanti sebetulnya bisa aja kita ubah.
Jangan varian ya. Tapi bisa aja kita ubah jadi class name ya. Misalkan ini class name gitu ya.
Tapi kita biar nanti nggak bingung. N-nya huruf kecil ya. Kalau class name di tag HTML biasa itu N-nya huruf besar gitu.
Nah ini bgblue600. Kemudian saya mau tambahkan wful ya. Biar dia nanti ukurannya.
Sama dengan parentnya. Nah, yang ini bukan varian berarti. Ini kita ubah aja jadi class name. Nah, seperti ini saja ya untuk loginnya. Kita bikin halaman yang simple aja.
Nah, tapi kita akan coba pecah sekarang ya. Jadi kalau sebelumnya kita... Satukan dalam satu file seperti ini. Kita akan coba berpikir ala React Developer.
Menggunakan konsep Atomic Design. Jadi kita akan coba pecah ini. Mungkin yang pertama akan saya pecah adalah yang ini ya.
Yang di dalam form ini. Label dan juga input. Ini kita bisa pecah. Kebetulan di video sebelumnya kita sudah siapkan ya.
Sebuah folder input di dalam elements. Di mana di dalamnya ada file input.jsx. Nah berarti di sini saya akan buat const input.
Sama dengan, nah ini arrow function ya. Di sini jangan lupa untuk export default input. Nah, di sini baru return.
Yang di return adalah inputnya. Nah, yang ini kita coba cut aja. Kita masukkan ke sini ya.
Hai nah input ini tipenya berarti dia harus dalam bentuk properties nantinya ya jadi sini kita ambil props cons tipe karena nanti akan ada tipe password ya di sini berarti sama dengan props yang ini teks kita ubah jadi props Nah, kemudian yang class name. Class name ini mungkin biarkan aja karena inputnya sama ya. Untuk sementara atau nanti kalau mau di-custom berarti kita harus tambahkan lagi kondisi ya. Tapi kita akan biarkan dulu seperti ini ya.
Kemudian placeholder ini akan berbeda tentu kita akan ambil dari placeholder nantinya. Nah, di sini kita tambahkan placeholder. Oh ini salah bukan props ya tapi type ya.
Oke untuk input sudah. Kemudian kita pisahkan yang label sekarang ya. Yang label disini. Kita cut.
Kemudian kita masukkan ke label.jsx. Kita buat disini const label sama dengan. function kemudian disini export default label return nah labelnya ini HTML4 berarti kita berikan disini HTML4 juga saja sama biar nggak bingung nantinya ya nama propsnya oke kemudian disini ada tikons HTML4 sama dengan props Baru disini class name biarkan.
Dan email berarti ini kita tuliskan aja text aja disini. Terus disini berarti kita berikan text ya. Nah disini ada div. Kalau yang div ini berarti kita akan coba masukkan dia ke dalam index.js nanti ya. Nah disini kita panggil const.
Ini namanya bebas ya. Design misalkan input form ya. Return.
Nah, di sini baru kita panggil yang label. Ini diimport dari label.jsx ya. Ini ada sedikit kesalahan kayaknya. Nah, ini tadi huruf kecil ya.
Ini harus di rename dulu karena dia tidak tahu bahwa sebelumnya itu huruf kecil. Kalau kita rename-nya dengan nama yang sama, itu dia akan terdeteksinya adalah huruf kecil ya. Nah, ini di rename dulu tadi jadi labels, kemudian di rename lagi jadi label lagi, dibalikin lagi ya.
Kemudian berarti di sini export, default, input form. Selain label, kita juga tambahkan di sini untuk input. Nah, inputnya kita import dari input, ya. File yang ini.
Nah, ini label mungkin jangan text, ya. Kita ubah jadi children aja. Karena kita udah pelajari konsep children juga. Children. Nah, di sini kita bisa masukkan nanti melalui props ya, title aja ya, atau judul dari formnya nanti apa gitu ya.
Cons title sama dengan props. Kemudian untuk input, ini nanti akan butuh tipe ya. Tipe nanti kita akan ambil lagi dari tipe. Karena ini akan kita panggilnya bukan di sini nanti ya.
Tapi di sini ya. Nah kemudian setelah itu ini bisa kita ubah. Jadi self-closing tag namanya gitu ya. Jadi tidak perlu penutupnya. Cukup tambahkan slash aja di akhir tag pembukanya ya.
Ini biasanya kalau kita sering lihat mungkin untuk BR ya. Seperti ini. Kalau di tag HTML biasa. Nah, jadi di React juga dia bisa gunakan self-closing tag kalau dia nggak punya children, ya. Ini label dia punya HTML4, ya.
HTML4 juga nanti kita akan ambil. Nah, ini input. Karena kita menggunakan HTML4, berarti dia harus punya name, ya. Name, kita tambahkan di props-nya name, ya. Oke, nah ini nanti akan kita ambil dari name, dan yang input ini, namenya, kita juga ambil dari props name, karena dia nanti harus sama ya.
Nah, ini salah satu kegunaan React ya, sudah terlihat satu buah kelebihan, bahwa di sini kita bisa kirimkan parameter yang sama ya, atau props yang sama, yaitu name, tapi dia akan gunakan di dua komponen yang berbeda gitu ya. Oke kita cek lagi input ini dia butuh apa lagi placeholder nah placeholder kita tambahkan disini placeholder ambil dari placeholder nah seperti ini baru kita panggil disini input form atau ini biar Bingung, pakai label aja ya. Jadi di sini juga kita akan ubah dulu sedikit. Ini jangan title, tapi label ya.
Nah, seperti ini, label. Labelnya adalah email. Oh, sorry, ini adalah string harusnya.
Kemudian dia butuh apa lagi? Kita cek lagi. di input form ini dia butuh name tipe dan placeholder ya kita tambahkan dulu tipe kemudian placeholder nah disini tipe berarti text atau email ya karena email itu dia punya tipenya sendiri ya kalau di input kemudian placeholder ini tadi adalah example up ini harusnya string ya example at mail.com misalkan dan terakhir name ya namenya ya udah kita kasih nama email oke nah ini bisa kita ubah jadi self closing tag ya nah seperti ini kita refresh up ada yang error kayaknya apa yang error kita cek di sini input form is not defined katanya belum kita import ya Nah, ini udah sama ya kayak tadi sebelumnya.
Email, kemudian kita punya inputnya yaitu berupa email juga. Nah, ini kita coba refresh biar hilang error di konsolnya. Kita coba cek ya di sini apakah udah betul untuk input ini.
Nah, kita lihat ya tipenya email sesuai dengan yang kita kirimkan di sini. Kemudian placeholdernya. example at mail.com, kemudian dari titelnya, yaitu nanti akan jadi label di sini, email juga, dan untuk namenya itu juga email ya di sini. Nah ini kalau mau diubah jadi huruf besar ya untuk labelnya, nah seperti ini. Dia udah oke ya, sekarang kita coba kalau password gimana.
Nah ini berarti kita bisa hapus juga di sini. Saya duplikat. Labelnya jadi password.
Kemudian tipenya password juga. Example ini kita ubah. Jadi bintang-bintang-bintang.
Name-nya jadi password. Nah, ini hasilnya sama ya. Tuh, jadi sekarang kita udah punya komponen input ya, baru lagi. Kita mau bikin lagi yaudah tinggal duplicate lagi aja ya.
Gampang banget. Nah, ini baru 2. Nah, berarti disini saya akan masukkan lagi untuk yang form ini di fragment ya. Nah, fragment ini akan saya beri nama form login.jsx ya. Design const. form login export default form login nah disini kita bisa return yang ini kita coba cut kita paste disini berarti kita import yang input form ini ya dan juga button tadi nah button ini kita import juga yang disini bisa kita hapus kita cek Oh belum dipanggil kita panggil coba di sini ya sebelum nanti kita akan pindahkan lagi form login ini kita Berikan self closing tag.
Nah, jadi ya. Form-nya udah jadi lagi. Terus saya mau bikin lagi sekarang layouts. Di sini layouts-nya misalkan adalah out layouts ya.
Atau mau out aja nggak apa-apa sih. Sama aja. Tapi kalau saya biasanya buat kalau dia layout. Biar nggak bingung nanti antara pages atau layouts.
Nah, bisa ditambahkan layout seperti ini. outlayouts.jsx ya, nah berarti kalau outlayouts itu nanti saya mau bikin register misalkan ya, nah itu bisa harusnya kita cut dulu aja, kita masukkan ke outlayout nanti disini kita tambahkan out layout, props kemudian disini export default out layout return nah ini paste ke sini Oke kita coba berarti nanti kalau kita mau bikin register gimana gitu ya Nah itu akan kita atur di dalam pages kita coba bikin dulu di sini pages Nah kalau pages biasanya itu huruf kecil ya bukan huruf besar karena nanti akan berhubungan dengan Sistem routing kalau di Next.js ya. Ketika kita nanti menggunakan Next.js. Dan dia biasanya tidak ada di dalam components. Tapi di luarnya components.
Ini bisa kita pindahkan. Nah jadi seperti ini ya. Jadi dia terpisah antara components dengan pages.
Oh ini masuk ke dalam asset ya. Harusnya di dalam src. kita pindahkan lagi nah jadi seperti ini ya jadi ada aset komponen dan pages nah login ini kita buat seperti ini login page misalkan kemudian export default login page return nah yang return apa berarti tinggal masukkan out layout Seperti ini.
Tapi di dalamnya nanti akan saya masukkan. Yang ini berarti form login ya. Karena nanti akan berbeda dengan form register kayaknya ya. Nah disini berarti kita bisa cut dulu yang ini.
Form login. Nanti kita akan kirim dia sebagai children. Nah seperti ini.
Kemudian berarti kita tangkap. Cons. children props ya terus berarti disini yang ini sama nanti kita akan gunakan juga di register ya nah yang ini berarti ya tito kita ubah ya title title berarti disini kita berikan title sama dengan login Hai nah di FJS kita panggil up ini karena tadi kita katya jadinya hilang kurungnya Jadi kalau saham hanya satu baris dia biasanya hilang kurungnya kalau kita menggunakan autosave nah disini kemudian kita masukkan yang login page yang formnya saya hapus atau dikat aja karena kita nanti butuh di page yang ini ya Nah di sini kita coba cek ada error login page is not defined Oke yang ini belum kita panggil ya nah ini ada sedikit error katanya ini harusnya kita mundur masuk ke components ya Nah sekarang sudah ya Semua udah rapi nih. Dia udah kita masukkan ke dalam setiap komponen. Kemudian juga kita udah pecah berdasarkan prinsip atomic design.
Terus saya mau bikin lagi. Register di sini. Register.jsx misalkan. Saya tinggal copy aja yang ini. Nah tapi saya bikin lagi berarti di sini fragment baru yaitu form.
register.jsx isinya bisa kita copy dulu dari form login ini diubah loginnya ya jadi form register kemudian inputnya ini saya mau coba tambahkan input formnya misalkan disini labelnya full name ya full name kemudian tipenya text kemudian disini placeholder nya insert your name here gitu ya namenya berarti full name nah terus email password ya di sini saya mau tambah lagi satu lagi Confirm password ya. Biasanya register itu diminta untuk confirm password ya. Nah, di sini tipe password, namenya confirm password ya. Loginnya kita ubah jadi register.
Nah, kita coba ubah yang register ini ya. Ini login page. Saya mau ubah jadi register page ya.
Register page. Titelnya saya ubah jadi register. Form login saya ubah jadi form register.
Ya dia auto importnya jalan. Nah disini saya ubah yang ini jangan login page. Atau kita komentari dulu.
di sini saya mau tambahkan register page ini bisa self closing tag belum terimport ternyata nah beres ya jadi kita punya dua halaman tinggal copy-copy aja kalau dia tipenya sama gitu ya mirip-mirip antara register dan juga login ini kan dia mirip-mirip ya hanya berbeda di bagian teks yang ini misalkan ya yaitu button registernya kemudian titlenya dan juga beberapa input-an yang berbeda gitu ya Nah itu adalah salah satu contoh kemudahan dari react nah jadi saya akan coba jelaskan alurnya dulu ya jadi kita panggil dulu register page berarti kita akan masuk ke pages register.jsx ya yang ini kemudian dia akan memanggil outlayout yang mana dia punya children yaitu form register outlayouts adalah yang ini ya dia akan render yang ini dengan childrennya yaitu adalah form register nah ini ada tipo ternyata ya saya coba seperti ini form register berarti ini diimportnya pun harus kita perbaiki sedikit nah ini dia kadang rename ya tapi kita harus save lagi karena tadi ada perubahan ya kemudian kita lanjutkan tadi sedikit terdistract children childrennya adalah tadi berupa form register ya yang ini dia memanggil atau merender beberapa input form ya input formnya ada di elemen yang Ini, index.jsx di dalam folder input. Nah, input form ini, dia punya label dan juga input, ya. Label, yang ini, dan juga input.
Ya, jadi di-render. Untuk input dan labelnya kalau kita panggil input form ya. Nah jadi konsepnya seperti itu.
Atomic design itu dia dibikin kecil-kecil kemudian kita satukan jadi molekul. Kemudian kita satukan lagi. Itu jadi sebuah fragment atau disebutnya organism.
Terus kita buat layout ya. Karena nanti mungkin akan ada pages yang sama. Baru lanjut ke pages ya.
Jadi itu adalah konsep Atomic Design ketika kita menggunakan React. Nah, kemudian gimana caranya kalau misalkan saya mau menampilkan login page, itu nanti di slash login misalkannya. Nah, atau nanti saya mau menampilkan register di slash register. Nah, ini hasilnya kan sama. Kalau saya tulis register, ditampilin yang register.
Kalau saya tulis login, tampilnya masih register juga. Kalau saya tulis lagi, misalkan, hello, sama register. Nah, ini dia karena ambil dari app.js, yang mana di-render adalah register page. Kita akan bahas di video berikutnya.
Untuk itu, jangan lupa untuk subscribe, comment, like, dan share video ini. Kita ketemu lagi di video berikutnya.