Tips All

Bayangin begini: pagi-pagi kamu bangun tanpa suara alarm yang bikin kaget, nggak perlu buru-buru mandi, dandan, atau rebutan kendaraan sama orang rumah. Sambil ngopi santai, kamu buka laptop, duduk di meja kerja favorit, dan mulai kerja dari ruang tamu, teras, atau bahkan dari kamar. Nggak ada bos yang ngawasin dari balik meja, nggak ada meeting dadakan di kantor yang bikin stres. Kedengarannya kayak mimpi, ya? Tapi nyatanya, kerja remote udah jadi kenyataan buat banyak orang. Apalagi sejak pandemi kemarin, dunia kerja berubah drastis. Banyak perusahaan sadar kalau karyawan tetap bisa produktif walaupun kerja dari rumah. Bahkan sekarang, banyak perusahaan luar negeri yang membuka peluang kerja remote untuk siapa aja, dari mana aja. Tapi mungkin kamu berpikir, "Kerja remote kan buat orang-orang yang bisa ngoding, ngerti IT, atau lulusan teknik komputer." Nah, ini dia kesalahan yang sering banget terjadi. Banyak orang merasa nggak cukup “pintar teknologi” buat kerja remote, padahal faktanya banyak pekerjaan remote yang bisa dikerjakan tanpa skill coding sama sekali. Aku pun dulu berpikir gitu. Ngerasa kerja remote itu cuma buat programmer. Tapi setelah cari tahu, ternyata ada begitu banyak peluang buat yang latar belakangnya non-IT. Mulai dari penulis konten, admin sosial media, sampai virtual assistant—semuanya bisa dikerjakan dari rumah, bahkan dari desa sekalipun, selama ada koneksi internet. Di artikel ini, aku bakal share ke kamu 25 jenis pekerjaan remote yang bisa kamu lakuin tanpa harus jadi ahli teknologi. Pekerjaan ini cocok buat kamu yang pengen ganti suasana kerja, mulai karier baru, atau sekadar cari penghasilan tambahan dengan cara yang lebih fleksibel. Siapkan cemilan dan kopi kamu, karena kita bakal bahas satu per satu—siapa tahu salah satunya cocok buat kamu. 😉 Apa Itu Kerja Remote & Kenapa Banyak Dicari? Apa itu kerja remote & kenapa banyak dicari? Image by freepik Sebelum kita bahas daftar pekerjaannya, yuk kenalan dulu sama istilah yang lagi naik daun ini: kerja remote. Kerja remote itu sederhananya kerja yang nggak harus dilakukan dari kantor. Artinya, kamu bisa kerja dari mana aja—rumah, warung kopi, coworking space, bahkan dari kota atau negara lain sekalipun. Yang penting kamu tetap bisa komunikasi sama tim dan menyelesaikan tugasmu tepat waktu. Dulu, kerja remote tuh dianggap “tidak normal”. Kalau bilang ke orang tua, “Aku kerja dari rumah aja,” mungkin dibalas dengan, “Lho, kok nggak ke kantor? Emang itu beneran kerja?” Tapi sekarang, kerja remote udah makin diterima, bahkan jadi pilihan utama banyak orang. Apalagi generasi sekarang makin sadar bahwa hidup itu bukan cuma soal kerja 9 to 5 dan terjebak macet setiap hari. Bukan cuma kita yang butuh fleksibilitas. Perusahaan juga mulai sadar bahwa dengan sistem remote, mereka bisa rekrut talenta dari mana aja tanpa harus nyiapin kantor fisik. Lebih hemat biaya, dan kadang justru lebih produktif. Nah, tren ini makin kuat sejak pandemi 2020. Banyak perusahaan akhirnya "dipaksa" buat coba kerja jarak jauh, dan ternyata... berhasil! Sejak saat itu, lowongan kerja remote terus meningkat, termasuk untuk pekerjaan non-IT. Dan yang menarik, sekarang banyak kerja remote yang nggak butuh kamu jadi expert teknologi atau lulusan informatika. Punya kemampuan dasar seperti komunikasi yang oke, manajemen waktu, dan sedikit skill digital udah cukup buat mulai. Tapi pertanyaannya: emangnya ada kerjaan kayak gitu? Jawabannya: ADA! Banyak malah. Yuk kita intip daftar 25 pekerjaan remote yang bisa kamu mulai dari sekarang—tanpa harus jadi jago ngoding atau ngerti IT tingkat dewa. 25 Pekerjaan Remote untuk Pemula, Ibu Rumah Tangga, dan Fresh Graduate (Tanpa Harus Jago Coding!) Kerjaan ini bisa kamu mulai walau belum punya banyak pengalaman. Bahkan banyak yang bisa dikerjakan paruh waktu atau fleksibel, cocok buat kamu yang masih kuliah, baru lulus, atau punya kesibukan di rumah. Pekerjaan Remote Buat yang Suka Nulis dan Komunikasi Content Writer Image by Freepik Content Writer Bayangin kamu duduk di teras rumah, ditemani secangkir teh hangat, dan mulai nulis artikel tentang tips menata dapur kecil biar tetap kece. Itulah kerjaan seorang content writer. Tugas utamanya adalah menyampaikan informasi lewat tulisan yang ringan dan menarik. Nggak perlu jadi sastrawan—yang penting kamu bisa riset, nulis dengan gaya yang asyik, dna tahu siapa yang baca. Rutinitas sehari-hari: Cek brief dari klien atau tim editorialRiset topik dan cari referensi dari berbagai sumberBuat kerangka atau outline artikelMenulis artikel sesuai gaya bahasa target audiensEdit tulisan agar lebih enak dibaca dan bebas typoTambahkan elemen pendukung seperti gambar, infografis, atau kutipanSubmit artikel ke Google Docs, CMS, atau langsung ke klien Copywriter Image by Freepik Copywriter Kamu pernah baca iklan simpel tapi langsung bikin pengen beli? "Diskon cuma hari ini!" misalnya. Nah, itu kerjaan copywriter. Tugasnya bikin tulisan singkat tapi "nendang" buat promosi produk. Bisa berupa slogan, email marketing, caption, atau landing page. Cocok buat kamu yang suka main kata dan mikir out-of-the-box. Rutinitas sehari-hari: Menganalisis brief dan tujuan iklan/tulisanRiset target audiens dan produkMenulis headline dan copy untuk iklan, landing page, email, dllMerevisi berdasarkan feedback klien atau timMenyesuaikan tone & voice sesuai brand Transcriber Image by Freepik Transcriber Bayangin kamu lagi dengerin podcast tentang parenting, sambil ngetik apa yang mereka omongin. Transcriber kerjaannya seperti itu: mendengarkan audio (kadang video), lalu mengetik ulang isi pembicaraannya dengan rapi. Cocok buat kamu yang teliti, sabar, dan nyaman bekerja sambil pakai headset. Rutinitas sehari-hari: Menerima file audio/video dari klienMendengarkan rekaman dan mengetik isi percakapanMenandai bagian tidak terdengar jelas (jika perlu)Memastikan ejaan dan tanda baca sesuai standarMengedit hasil transkrip sebelum dikirim Translator Image by Freepik Translator Kamu jago bahasa Inggris, Korea, Jepang, atau bahasa lain? Jadi translator remote bisa jadi ladang cuan! Misalnya, kamu nerjemahin artikel resep dari Bahasa Inggris ke Bahasa Indonesia. Atau subtitle drama Korea buat channel YouTube. Asal ngerti dua bahasa dan tahu konteks, kamu udah bisa mulai. Rutinitas sehari-hari: Menerima dokumen atau file dari klienMenerjemahkan teks sesuai konteks dan budayaMengecek akurasi terjemahan secara menyeluruhMemastikan konsistensi istilah teknisMengirim hasil akhir dalam format yang diminta Customrer Support Image by Freepik Customer Support (Live Chat/Email) Bayangin kamu jadi "penolong pertama" buat pelanggan toko online yang bingung soal pengiriman barang. Kamu bantu mereka lewat chat atau email, menjawab pertanyaan, dan bikin pengalaman mereka lebih nyaman. Cocok buat kamu yang sabar, komunikatif, dan suka bantuin orng. Rutinitas sehari-hari: Mengecek tiket pertanyaan pelangganMenjawab pertanyaan via chat, email, atau media sosialMenyampaikan laporan masalah ke tim teknisUpdate knowledge base atau FAQRekap interaksi harian ke sistem/CRM Pekerjaan Kreatif yang Bisa Dipelajari Cepat Desain Grafis Image by Freepik Desain Grafis Pernah iseng bikin quote pakai Canva terus dipuji temen karena estetik? Itu bisa jadi pintu masukmu ke dunia desain grafis. Banyak bisnis butuh desain buat poster, feed Instagram, sampai kemasan produk. Nggak harus jago Photoshop kok—mulai aja dari tool gratis kayak Canva atau Figma, lalu terus eksplor. Rutinitas sehari-hari: Menerima brief dari klien/tim marketingMembuat sketsa konsep visualMendesain konten visual (poster, feed IG, banner, dll)Melakukan revisi sesuai masukanMenyimpan file desain dalam format siap pakai Social Media Manager Image by Freepik Social Media Manager Bayangin kamu pegang akun Instagram sebuah brand makanan, terus tiap hari bikin konten, upload story, dan ngobrol sama followers. Seru, kan? Nah, kerjaan ini cocok buat kamu yang aktif di medsos dan ngerti tren. Kamu bisa bantu UMKM atau brand bikin strategi konten biar makin dikenal. Rutinitas sehari-hari: Menyusun kalender konten mingguan/bulananMenulis caption dan menjadwalkan postingMembalas komentar dan DM dari audiensAnalisis performa konten (engagement, reach)Kolaborasi dengan desainer atau tim kreatif Video Editor Image by Freepik Video Editor (Dasar) Kamu sering bikin video lucu buat status WA atau TikTok keluarga? Kamu udah punya modal jadi video editor! Banyak kreator butuh bantuan edit video ringan: potong klip, tambah musik, kasih teks. Pakai aplikasi kayak CapCut atau VN aja dulu, lalu pelan-pelan belajar software yang lebih kompleks. Rutinitas sehari-hari: Menerima footage mentah dari klien atau timMenyusun timeline dan mengedit video (potong, transisi, efek)Menambahkan backsound, subtitle, dan elemen grafisMengekspor video sesuai spesifikasi platformMenyimpan backup file proyek Illustrator/Digital Artist Image by Freepik Illustrator / Digital Artist Suka gambar digital? Kamu bisa jual jasa ilustrasi buat buku anak, komik, bahkan stiker WhatsApp. Nggak harus gambar realis kok—gaya kawaii, doodle, atau minimalis juga banyak peminatnya. Banyak platform seperti Fiverr atau Instagram yang bisa jadi etalase karyamu. Rutinitas sehari-hari: Membaca brief atau skrip dari klien/editorMembuat sketsa kasar untuk ilustrasiMelakukan revisi berdasarkan feedbackMenyelesaikan ilustrasi dengan detail warna dan shadingMengirimkan hasil dalam format digital UI/UX Designer Image by Freepik UI/UX Designer UI/UX Designer fokus bantu bikin tampilan dan pengalaman aplikasi atau website jadi mudah dan menarik. Meskipun ini bagian dari dunia IT, banyak orang belajar dari nol lewat kursus online. Kalau kamu suka ngulik aplikasi dan punya rasa ingin tahu tinggi, ini bidang yang menjanjikan dan bisa dipelajari step-by-step. Kalo kamu mau belajar UI/UX berikut beberapa rekomendasi kelas yang bisa kamu ikuti dari BuildWithAngga: Kelas Online Gratis UI UX Figma to No-Code Lovable AI: Bikin Landing PageUltimate UX Guide: Focus on User-Centered DesignMastering Mobile UI Design for Beginners with FigmaMastering Figma: Modern UI Dashboard Design Rutinitas sehari-hari: Menganalisis kebutuhan pengguna atau client briefMembuat wireframe dan prototipe (Figma/Adobe XD)Kolaborasi dengan developer dan stakeholderMelakukan usability testingMerevisi desain berdasarkan hasil testing Pekerjaan yang Butuh Skill Riset & Organisasi Data Entry Image by Freepik Data Entry Bayangin kamu bantuin satu usaha kecil buat masukin data penjualan mereka ke Excel. Kerjaan ini nggak ribet, asal kamu teliti dan rapi. Cocok banget buat kamu yang suka kerja sistematis dan nggak keberatan ngulang hal yang sama. Rutinitas sehari-hari: Menerima data mentah dari klienMemasukkan data ke sistem/spreadsheet dengan akuratMengecek ulang data untuk menghindari kesalahanMengelompokkan atau mengkategorikan dataBackup data secara rutin Virtual Asisstant Image by Freepik Virtual Assistant (VA) Kamu pernah bantuin temen ngatur jadwal arisan, bikin daftar belanja, atau cek email masuk? Kalau iya, kamu udah punya modal jadi VA. Tugas VA itu macam-macam: mulai dari ngatur kalender, balas email, sampai nyusun laporan ringan. Bisa bantuin pebisnis, freelancer, atau konten kreator. Rutinitas sehari-hari: Mengecek dan membalas email klienMenjadwalkan meeting dan pengingat tugasMengatur file dan dokumen digitalMembuat laporan sederhana (Excel, Google Docs)Koordinasi dengan tim atas nama klien Research Asisstant Image by Freepik Rersearch Assistant Suka penasaran sama sesuatu dan doyan cari info sampai ke akar? Jadi research assistant mungkin cocok buatmu. Misalnya, kamu bantuin influencer cari referensi buat konten edukasi, atau bantu startup riset tren pasar. Kerjaan ini fleksibel dan cocok buat kamu yang suka ngulik. Rutinitas sehari-hari: Mencari informasi dari sumber akademik atau webMerangkum dan menyusun hasil risetMenyusun daftar pustaka atau referensiMengisi spreadsheet riset dan insightPresentasi hasil riset ke tim atau atasan Project Coordinator Freelance Image by Freepik Project Coordinator Freelance Kalau kamu suka ngatur-ngatur, jadi project coordinator bisa cocok. Tugasnya bantu tim freelance agar kerjaan berjalan sesuai timeline. Meski nggak coding, kamu tetap berperan penting buat koordinasi antar anggota tim. Rutinitas sehari-hari: Membuat jadwal dan timeline kerja timMengecek progres tugas dari freelancer lainKomunikasi rutin dengan klien dan timMenyusun laporan proyekMengatur revisi atau penyesuaian kerja Moderator Komunitas Online Image by Freepik Moderator Komunnitas Online Bayangin kamu jadi penjaga ketertiban di grup parenting Facebook atau komunitas belajar online. Tugasnya ngejaga suasana tetap nyaman, bantu jawab pertanyaan anggota, dan lapor kalau ada postingan yang nggak sesuai aturan. Cocok buat kamu yang sabar dan suka berinteraksi di forum. Rutinitas sehari-hari: Memantau komentar dan postingan anggotaMenghapus konten yang melanggar aturanMenjawab pertanyaan umum anggota komunitasMenyusun peraturan komunitas atau FAQMelaporkan aktivitas harian ke tim admin Pekerjaan Remote di Dunia Edukasi & Kursus Online Tutor Online (Non-Akademik) Image by Freepik Tutor Online (Non-Akademik) Kamu jago main gitar, masak, atau bikin kerajinan tangan? Coba deh buka kelas online kecil-kecilan. Banyak orang nyari tutor buat skill non-akademik. Bisa mulai dari WhatsApp group, Zoom, atau platform kursus. Cocok buat kamu yang sabar dan seneng ngajarin. Rutinitas sehari-hari: Menyiapkan materi pembelajaran untuk sesi onlineMengajar lewat Zoom atau platform lainMenjawab pertanyaan murid di luar sesiMemberi tugas dan nilaiMenyimpan catatan perkembangan siswa Bantu Bikin Modul/Konten Belajar Image by Freepik Bantu Bikin Modul/Konten Belajar Kalau kamu suka bikin rangkuman atau presentasi, kerjaan ini cocok banget. Banyak guru, pelatih, atau institusi yang butuh bantuan bikin materi belajar. Misalnya, bikin slide Canva buat pelajaran matematika anak SD. Asal kamu rapi dan bisa riset, bisa banget dicoba. Rutinitas sehari-hari: Menentukan topik berdasarkan silabusMenulis materi pembelajaran dengan struktur jelasMenambahkan ilustrasi, gambar, atau video pendukungMembuat soal latihan atau kuisMenyesuaikan modul sesuai jenjang/tingkatan Proofreader Materi Belajar Image by Freepik Proofreader Materi Belajar Kamu suka baca dan jeli banget kalau ada typo? Jadi proofreader bisa jadi opsi menarik. Tugasnya ngecek tulisan—misalnya soal latihan, e-book, atau artikel—biar bebas dari salah ketik dan jelas dibaca. Cocok buat kamu yang perfeksionis dan detail. Rutinitas sehari-hari: Membaca ulang materi dari penulis/modulMemperbaiki typo, ejaan, dan tanda bacaMemastikan kalimat mudah dipahamiKonsistenkan gaya penulisanTandai bagian ambigu atau perlu direvisi Pengisi Kuis dan Latihan Soal Image by Freepik Pengisi Kuis dan Latihan Soal Pernah bikin kuis seru buat grup keluarga atau komunitas? Kamu bisa ubah itu jadi kerjaan, lho! Banyak platform belajar atau guru privat yang butuh bantuan bikin soal latihan, lengkap sama jawaban. Bisa untuk pelajaran SD sampai SMA. Rutinitas sehari-hari: Menyusun soal pilihan ganda, isian, atau uraianMenulis kunci jawaban dan pembahasanMemastikan soal sesuai standar/topikMengecek duplikasi atau kemiripan soalMengelompokkan soal berdasarkan level kesulitan Narator Konten Edukassi Image by Freepik Narator Konten Edukasi Bayangin kamu jadi suara di balik video pembelajaran anak-anak, atau jadi narator di podcast edukasi. Modalnya mirip kayak voice over—cukup suara jelas, artikulasi bagus, dan semangat ngajarin yang tinggi. Cocok buat kamu yang pengen tetap berkontribusi tanpa harus tampil langsung. Rutinitas sehari-hari: Membaca naskah konten dengan intonasi jelasMerekam suara dengan alat yang layakMengedit hasil rekaman untuk kejernihan audioMenyesuaikan durasi sesuai naskahMengirim hasil akhir dalam format audio Pekerjaan Remote Tambahan yang Fleksibel & Santai Microtask Worker (Pekerjaan Mikro) Image by Freepik Microtask Worker (Pekerjaan Mikro) Pernah denger soal kerjaan kecil seperti ngetik captcha, ngisi survei, atau nge-tag gambar? Ini disebut microtask. Cocok buat kamu yang pengen kerja santai, tanpa tekanan. Lumayan buat nambah penghasilan tanpa skill khusus. Rutinitas sehari-hari: Mengerjakan tugas-tugas kecil (labeling, tagging, dsb)Memastikan akurasi data sesuai petunjukSubmit pekerjaan dalam waktu singkat Tester Produk (Product Reviewer) Image by Freepik Tester Produk (Product Reviewer) Kamu bisa dibayar buat nyobain produk dan kasih review. Misalnya, coba skincare, alat rumah tangga, atau aplikasi baru. Bisa dalam bentuk tulisan atau video. Selain dapat produk gratis, kamu juga bisa dapet fee! Rutinitas sehari-hari: Mencoba produk digital atau fisikMencatat pengalaman penggunaan (user experience)Melaporkan bug atau errorMengisi form evaluasi produkMemberi saran perbaikan jika diminta Penjual Online (Reseller/Dropshipper) Image by Freepik Penjual Online (Reseller/Dropshipper) Kalau kamu suka jualan tapi nggak punya modal buat stok barang, jadi dropshipper bisa jadi solusi. Kamu tinggal pasarkan produk dari supplier dan mereka yang kirim ke pembeli. Bisa dikerjakan dari HP aja, cocok buat ibu rumah tangga. Rutinitas sehari-hari: Upload produk ke marketplace atau toko onlineBalas pertanyaan dan chat calon pembeliMengemas dan mengirim barang (jika bukan dropship)Cek stok dan update hargaBuat promo atau konten jualan Pengisi Kuesioner / Survey Online Image by Freepik Pengisi Kuesioner / Survey Online Cuma jawab pertanyaan dari laptop atau HP, kamu bisa dapat uang atau voucher. Memang bayarannya kecil, tapi kalau rutin bisa lumayan. Cocok buat pengisi waktu luang di sela aktivitas harian. Rutinitas sehari-hari: Mendaftar di platform surveiMengisi survei sesuai profil atau minatMenjawab jujur sesuai panduanMelengkapi survei untuk mendapatkan poin/imbalanMenyimpan riwayat survei selesai Penulis Ulasan (Review Writer) Image by Freepik Penulis Ulasan (Review Writer) Kamu suka nulis ulasan makanan, film, atau produk? Banyak platform yang nyediain tempat buat kamu berbagi review dan dapat imbalan. Cocok buat kamu yang suka nulis santai dan jujur dari pengalaman pribadi. Rutinitas sehari-hari: Mencoba produk, aplikasi, atau layananMenulis review jujur berdasarkan pengalamanMenyertakan kelebihan dan kekuranganUpload ulasan di blog, marketplace, atau platform reviewTambahkan foto atau tangkapan layar bila perlu Tips Memulai Kerja Remote Bayangin kamu lagi duduk di depan laptop butut yang udah menemani bertahun-tahun. Kopi hitam buatan sendiri masih mengepul, dan kamu lagi scroll lowongan kerja remote di HP. Rasanya campur aduk—penasaran, tapi juga ragu. “Bisa nggak ya aku mulai dari nol?” Jangan khawatir. Semua yang udah sukses kerja remote juga mulai dari titik itu. Mulailah dengan kenali apa yang kamu suka. Misalnya kamu ibu rumah tangga yang suka ngeblog resep masakan, berarti kamu udah punya modal untuk jadi content writer. Atau kamu fresh graduate yang jago desain feed Instagram? Itu bisa jadi tiket ke dunia desain grafis. Bikin portofolio sederhana. Nggak perlu ribet—cukup pakai Canva atau Notion. Upload hasil desainmu, tulisanmu, atau test project yang kamu bikin sendiri. Ini semacam “kartu nama digital” biar calon klien percaya. Coba bantu UMKM sekitar rumah. Bantuin mereka buat caption, desain, atau ngurus katalog. Ini bisa kamu masukin ke portofolio juga. Sambil bantu orang, kamu juga latihan. Terakhir, gabung komunitas. Di grup Facebook, Telegram, Discord—di sana kamu bisa nemu mentor, job listing, dan semangat baru dari teman seperjuangan. Tools yang Sering Dipakai Dulu kamu mungkin cuma tahu Microsoft Word dan WhatsApp. Tapi begitu masuk dunia kerja remote, kamu akan kenal sahabat baru. 📞 Kalau mau meeting, kamu akan sering buka Zoom atau Google Meet. Tapi jangan khawatir, nggak harus jago ngomong di awal—yang penting sopan dan jelas. 📝 Kalau mau nulis atau edit dokumen bareng tim? Google Docs bisa jadi penyelamat. Lengkap dengan fitur komen dan revisi. 📋 Butuh ngatur to-do list biar kerjaan nggak berantakan? Coba Trello atau Notion—kayak papan tempel digital buat otakmu. 🎨 Kamu orang desain? Canva bisa jadi sahabat terbaik untuk pemula. Tapi kalau mau naik level, coba Figma buat kolaborasi desain yang lebih rapi. 🤖 Suka ngulik dan riset? ChatGPT bisa bantu kamu nulis, ngide, atau cari jawaban cepat. Tinggal tanya, dia jawab. Cara Terhindar dari Penipuan Kerja Remote Bayangin kamu dapet pesan di WhatsApp, “Kamu terpilih jadi admin marketplace, gajinya 7 juta per bulan! Tapi transfer dulu Rp200.000 buat aktivasi akun.” Waspadalah! Ini modus yang sering kejadian. Kerjaan remote yang asli nggak akan minta kamu bayar di awal. Kalau mereka bilang “deposit dulu”, langsung tinggalkan. Sebelum daftar kerja, coba cari nama perusahaannya di Google. Kalau nggak ada jejak, atau banyak review negatif, mending cari yang lain. Jangan asal kasih KTP, nomor rekening, atau data pribadi lengkap sebelum ada perjanjian kerja resmi. Lebih aman kalau kamu pakai platform resmi seperti Upwork atau Fiverr yang punya sistem escrow—uang klien ditahan dulu, baru dibayar kalau kerjaan selesai. Dan ingat: kalau tawarannya terdengar terlalu indah, mungkin memang bohong. Kalau kamu ibu rumah tangga yang lagi nyuapin anak sambil riset lowongan kerja, atau fresh graduate yang bingung arah hidup, percayalah—selama ada niat dan koneksi internet, kamu bisa punya karier hebat dari rumah. Dunia kerja remote itu luas, dan kamu punya tempat di dalamnya. 💻🌏✨ Rekomendasi Kelas Buat Belajar Kerja Remote Kalau kamu masih bingung harus mulai dari mana, ini beberapa kelas online yang relevan, praktis, dan cocok buat pemula yang pengen kerja remote tanpa harus jago coding: Belajar Kerja Remote UI/UX Design & No-Code dengan Contra Cocok buat kamu yang pengen masuk ke dunia desain tanpa harus ngerti coding. Belajar tools no-code, cara bangun portofolio, sampai tips dapetin client luar negeri via Contra.Belajar Upwork 2024: Jadi Freelancer Profesional, Hasilkan Ribuan Dollar Buat kamu yang pengen serius mulai di platform Upwork, kelas ini ngajarin strategi dapetin proyek, bikin proposal yang dilirik, dan cara bangun reputasi.Ebook: Petunjuk Pro Freelance Web Developer & Kerja Remote Kalau kamu sedikit banyak udah ngerti web development (HTML, CSS, atau Next.js), ebook ini bantu kamu loncat ke tahap jadi freelancer pro dengan strategi yang terbukti.Upwork Freelancer Mastery: Strategi Terbukti Raih 100 Juta Pertama Buat kamu yang serius dan pengen fokus cari penghasilan besar lewat Upwork. Belajar dari yang udah terbukti berhasil—dari mindset, positioning, sampai closing. Semua kelas di atas pakai bahasa Indonesia, cocok banget buat pemula, dan bisa langsung dipraktikkan! Penutup: Mulai dari Sekarang, Bukan Nanti Kerja remote bukan cuma tren, tapi peluang nyata—terutama buat kamu yang mungkin belum punya pengalaman kerja formal, lagi di rumah, atau sedang cari cara baru untuk mandiri secara finansial. Kamu nggak harus langsung jago. Yang penting, mulai dulu. Bisa dari ikut webinar, gabung komunitas, atau bantuin teman/UMKM sekitar. Setiap langkah kecilmu hari ini bisa jadi batu loncatan buat karier remote yang stabil dan bikin bangga. Ingat: 📌 Nggak semua orang harus bisa ngoding buat kerja online. 📌 Setiap orang punya kelebihan—temukan dan asah itu. 📌 Kerja remote = kerja beneran. Bukan cuma main HP atau kerja iseng. Kamu bisa kerja dari rumah, tetap dekat keluarga, dan tetap produktif. Apapun latar belakangmu, peluang kerja remote itu bisa banget jadi jalan buat masa depan yang lebih fleksibel dan membanggakan.

Daftar Isi Artikel PendahuluanBenefit Setelah Membaca Artikel IniPengertian ContraFitur Utama ContraPortofolio InteraktifServices (Jasa Freelance)Tanpa KomisiSistem Pembayaran & Kontrak OtomatisTestimoni & EndorsementMengapa Contra Relevan untuk Frontend DeveloperShow Your Work, Bukan Cuma Ngaku BisaCocok Buat Proyek Kecil Maupun BesarBuat yang Mau Bangun Brand PersonalLebih Enak KomunikasiKelebihan & Kekurangan Menggunakan ContraKelebihanBebas KomisiProfil Keren & Portofolio InteraktifBisa Buat Layanan SendiriWorkflow Lebih RapiKekuranganBelum Seramai Platform LainFokus ke Kualitas, Bukan KuantitasBelum Terlalu Familiar di IndonesiaTips Maksimalin Contra untuk Frontend DeveloperAnggap Profil Kamu Kayak CV + Landing PageBikin Service yang Jelas dan MenjualUpload Portofolio yang Real & TerbaikMinta Testimoni dari Klien LamaRutin Update dan AktifPromosiin Profil Contra KamuStudi Banding Singkat: Contra vs Platform Freelance LainnyaContra vs FiverrContra vs UpworkContra vs Freelancer.comKesimpulan SingkatRekomendasi Kelas Contra Gratis & PremiumFREEPremiumPenutup Pendahuluan Kalau kamu seorang frntend developer dan pernah nyemplung ke dunia freelance, kemungkinan besar kamu pernah ngerasain fase absurd ini: buka tab banyak-banyak, apply ke Upwork, Fiverr, LinkedIn, tapi yang ngehubungin malah scammer yang minta kamu ngerjain "tes kecil" gratis. Sakitnya tuh bukan cuma di wakktu yang kebuang, tapi juga di rasa percaya diri yang ikut luntur. Dunia freelance tuh emang luas, tapi kayak hutan belantara. Banyak peluang, tapi juga banyak jebakan. Dan masalah klasiknya: plattform besar sering banget ambil potongan fee yang rasanya kayak pacar posesif, kamu yang kerja keras, mereka yang motong hasilnya. Belum lagi tampilannya kadang ribet, dan kalau belum punya rating atau review, kamu cuma jadi semut kecil di tengah lautan freelancer lain. Nah, di sinilah kita mulai kenalan sama satu nama: Contra. Contra ini bisa dibilang plattform freelance rasa portfolio site, tapi dengan sistem backend yang udah ngurusin hal-hal teknis kayak kontrak, invoice, dan pembayaran. Bedanya? Contra nggak ambil komisi sepeser pun dari bayaran kamu. Jadi, kamu dapet klien → dapet duit → duitnya utuh. Simple, jujur, dan lumayan melegakan buat dompet yang sering kehausan. Artikel ini bakal ngebedah Contra dari sisi teknis, fitur, sampai strategi maksimalkan peluang di dalamnya, khususnya buat kamu yang main di jalur frntend, dari project Figma to HTML, bikin UI React, sampe ngerjain landing page yang kece. Karena di dunia yang makin visual ini, kamu butuh tempat buat nunjukin kemampuan kamu, bukan cuma sekadar CV dalam format PDF. Siapin kopi atau air putih, karena kita bakal bahas tuntas: apa itu Contra, kenapa dia relevan buat kamu, dan gimana caranya bisa bantu kamu dapet project tanpa drama fee yang nyakitin. Benefit Setelah Membaca Artikel Ini Riset - Benefits ✅ Paham apa itu Contra dan kenapa plaatform ini beda dari yang lain (nggak ada potongan fee sama sekali). ✅ Tahu fitur-fitur penting di Contra yang berguna banget buat kamu sebagai frntend developer, mulai dari portofolio digital sampai sistem kontrak dan invoice otomatis. ✅ Ngerti kenapa Contra cocok banget buat kamu yang pengin bangun personal branding sebagai spesialis di bidang frontend. ✅ Dapat insight tentang kelebihan dan kekurangan Contra dibandingkan platform lain, biar kamu bisa ambil keputusan lebih bijak. ✅ Dapat tips konkret buat mulai di Contra, termasuk cara bikin profil menarik, strategi dapat klien pertama, dan cara mainin keyword biar lebih mudah ditemukan. ✅ Tahu kapan wakktu yang tepat buat pakai Contra, dan kapan mungkin kamu butuh backup di plaatform lain kayak Fiverr atau Upwork. ✅ Punya sudut pandang baru soal dunia freelance, bukan cuma soal cari duit, tapi juga soal bangun reputasi dan karier jangka panjang. Pengertian Contra Riset - Contra.com Bayangin kamu lagi cari kerja, tapi bukannya masukin lamaran ke kantor HRD yang mukanya kayak lagi abis marah sama printer, kamu malah bikin mini-website kece yang isinya semua proyek keren yang pernah kamu kerjain. Nah, Contra itu platform yang ngebantu kamu bikin “etalase digital” kayak gitu, tempat kamu bisa pajang skill, portofolio, sampai nulis layanan yang bisa kamu tawarin ke calon klien. Serius, ini kayak LinkedIn ketemu Behance tapi ditambah fitur invoice. Biar nggak cuma denger dari omongan doang, nih link-nya kalau kamu mau kepoin langsung: https://contra.com/ . Yang paling bikin adem hati: beda sama platfform freelance lain yang sering potong fee kayak tukang parkir yang muncul entah dari mana, Contra tuh nggak ambil komisi sama sekali. Jadi 100% uang dari klien ya masuk ke kamu. Ibaratnya kamu kerja freelance langsung sama klien, ngopi bareng, ngobrol, deal, tapi semua urusan ribet kayak kontrak, invoice, sampe pembayaran udah disediain sistemnya. Udah kayak punya manajer pribadi tapi nggak minta persen. Contra ini juga bukan cuma tempat kamu ngelamar kerja, tapi lebih ke tempat kamu dipromosikan sebagai profesional. Serius, profil kamu bisa dibikin sekeren halaman "About Me" di website pribadi, lengkap sama bagian "Services", kayak daftar menu warung makan tapi isinya skill kamu. Bisa nambah testimoni klien juga, biar makin credible kayak warung yang udah viral di TikTok. Jadi kalau kamu udah capek ngelamar satu-satu tapi nggak dilirik-lirik, mungkin saatnya kamu ganti strategi. Bangun personal brand, tampil kece, dan biarin klien yang datengin kamu. Contra bisa jadi tempat mulai yang solid buat itu. Fitur Utama Contra Riset - Fitur Utama Contra tuh kayak toolkit lengkap buat kamu yang pengin kerja freelance tanpa ribet. Bayangin kamu punya satu tempat yang bisa ngatur semuanya, dari nunjukin portofolio sampai kirim invoice ke klien. Nah, fitur-fitur di Contra ini beneran didesain buat ngebantu kamu fokus ke kerjaan, bukan ke urusan administratif yang makan waktu. Jadi ini dia fitur utamanya Contra: 1. Portofolio Interaktif Kamu bisa bikin halaman portofolio yang keren dan gampang dibaca. Bisa masukin hasil kerja kamu kayak project frntend (misalnya desain UI, landing page, atau app React), dan bisa dikasih link langsung ke live project atau repo GitHub. Jadi klien bisa langsung lihat hasil nyatanya, bukan cuma janji-janji manis doang. 2. Services (Jasa Freelance) Di Contra, kamu bisa nulis jasa kayak kamu bikin menu jualan. Misalnya: “Convert Figma to Responsive Website” atau “Build Landing Page dengan Tailwind dan React”. Kamu juga bisa tentuin harga, durasi pengerjaan, dan deskripsi jelas. Klien tinggal klik dan hire kamu, kayak belanja di e-commerce. 3. Tanpa Komisi Ini yang paling bikin senyum: Contra nggak motong penghasilan kamu. Berapa pun yang dibayar klien, semuanya langsung masuk ke dompet kamu. Jadi kamu bisa lebih tenang pas pasang harga, nggak perlu markup cuma buat nutupin potongan platfform. 4. Sistem Pembayaran & Kontrak Otomatis Begitu ada klien yang mau hire kamu, sistemnya udah nyiapin kontrak otomatis dan metode pembayaran yang aman. Jadi kamu nggak perlu ribet bikin dokumen legal sendiri. Setelah kerjaan selesai, tinggal klik “Complete” dan dana langsung ditransfer. Praktis banget. 5. Testimoni & Endorsement Kalau klien puas, mereka bisa kasih testimonial di profil kamu. Ini bisa bantu banget ningkatin kredibilitas kamu, ibaratnya kayak dapet referensi kerja dari mantan bos, tapi versi online. Kalau kamu frntend developer yang pengin tampil profesional dan tetap simpel, fitur-fitur ini bisa bantu kamu kelihatan lebih meyakinkan di mata klien, walaupun baru mulai di dunia freelance. Mengapa Contra Relevan untuk Frontend Developer Riset - Mengapa Relevan Kalau kamu kerja di bidang frontend, kamu pasti ngerti pentingnya tampilan dan pengalaman pengguna, nggak cuma di website yang kamu bikin, tapi juga di cara kamu nunjukin skill kamu ke orang lain. Nah, Contra tuh cocok banget buat kamu yang mikir kayak gitu, karena platform ini ngasih ruang buat tampil sebagai profesional yang rapi dan berkelas, bukan sekadar “freelancer cari kerja”. Jadi ini dia mengapa relevan buat kamu: Show Your Work, Bukan Cuma Ngaku Bisa Di Contra, kamu bisa langsung pajang hasil kerja kamu, entah itu desain UI yang kamu ubah jadi halaman HTML/CSS yang smooth, atau landing page yang kamu bangun dari nol. Ini tuh lebih powerful dibanding cuma bilang “saya bisa bikin website”, karena klien bisa langsung lihat bukti nyata. Cocok Buat Proyek Kecil Maupun Besar Banyak klien di Contra nyari jasa yang pas banget sama skill frontend: Convert desain ke kodeBikin landing page interaktifBangun komponen dengan ReactOptimasi performa dan UI Dan kamu bisa bikin layanan yang spesifik sesuai keahlian kamu. Jadi nggak perlu nunggu lowongan muncul, kamu yang bikin tawarannya duluan. Buat yang Mau Bangun Brand Personal Kalau kamu pengin dikenal bukan cuma sebagai "orang yang bisa ngoding", tapi sebagai “frntend specialist yang ahli bikin UI clean dan mobile-friendly”, Contra bisa bantu kamu branding. Profil kamu itu kayak CV interaktif, semakin rapi, semakin dipercaya. Lebih Enak Komunikasi Karena Contra lebih berasa kayak platfform kolaborasi daripada marketplace ramai, komunikasi dengan klien terasa lebih personal. Kamu nggak harus bersaing sama ratusan orang lain cuma buat dapet satu project. Kalau kamu punya profil yang jelas dan service yang spesifik, klien bakal datang sendiri. Singkatnya, Contra itu tempat yang tepat buat kamu nunjuin kualitas kerjaan, bukan cuma ngejar rating dan bidding murahan. Cocok banget buat kamu yang pengin dikenal karena skill, bukan karena ngasih harga paling murah. Kelebihan & Kekurangan Menggunakan Contra Riset - Kelebihan & Kekurangan Nggak ada platform yang sempurna, dan Contra juga begitu. Tapi biar kamu bisa ambil keputusan dengan lebih yakin, yuk kita bahas sisi plus-minusnya, kayak lagi review tempat kerja baru sebelum masukin lamaran. Jadi kita mulai dari kelebihan dulu: Kelebihan 1. Bebas Komisi Ini yang paling kerasa: semua penghasilan kamu 100% masuk ke kamu, nggak dipotong fee platform. Ibaratnya kayak kamu digaji penuh tanpa potongan pajak kantor, nikmat banget buat freelancer. 2. Profil Keren & Portofolio Interaktif Contra bantu kamu tampil profesional. Profil kamu tuh kayak CV + website pribadi versi instan. Buat kamu yang nggak sempet bikin website portofolio sendiri, ini sangat membantu. 3. Bisa Buat Layanan Sendiri Kamu nggak perlu nunggu job ditawarkan. Kamu bisa pasang jasa kamu sendiri, lengkap dengan harga dan deskripsi. Klien tinggal pilih kayak beli jasa di e-commerce. 4. Workflow Lebih Rapi Kontrak otomatis, pembayaran aman, dan update project diatur semua dalam satu tempat. Nggak perlu bolak-balik ke Google Docs + email + invoice manual. Semua udah diringkas di satu dashboard. Kekurangan 1. Belum Seramai Platform Lain Karena masih tergolong baru, jumlah klien di Contra belum sebanyak di platfform besar kayak Upwork atau Fiverr. Tapi ini juga bisa jadi kelebihan: kompetisinya nggak segila di sana. 2. Fokus ke Kualitas, Bukan Kuantitas Contra lebih cocok buat kamu yang pengin dapet klien serius dan proyek proper. Kalau kamu nyari kerjaan harian/cepetan tiap hari kayak "kerjain logo 1 jam selesai", mungkin platform ini terasa lebih slow. 3. Belum Terlalu Familiar di Indonesia Mayoritas pengguna dan klien masih dari luar negeri. Jadi, komunikasi biasanya pakai bahasa Inggris. Tapi buat kamu yang pengin pasar global, ini justru jadi peluang. Contra itu bukan tempat buat "siapa cepat dia dapat", tapi lebih ke tempat buat “siapa yang niat dan punya kualitas, dia yang dilihat”. Jadi kalau kamu niat bangun karier freelance jangka panjang, platform ini worth banget buat dicoba. Tips Maksimalin Contra untuk Frontend Developer Riset - Tips Maksimalin Jadi kamu udah daftar di Contra, udah punya profil, tapi gimana caranya biar makin stand out dan dapet klien? Nah, berikut beberapa tips biar kamu gak cuma numpang lewat di Contra, tapi bisa benar-benar dimanfaatin buat bangun karier freelance kamu: 1. Anggap Profil Kamu Kayak CV + Landing Page Jangan asal isi profil. Bayangin klien itu HRD yang lagi buka portofolio kamu, cuma dalam bentuk digital. Gunakan foto profesional, bio yang singkat tapi ngejelasin kamu ahli di mana, dan highlight skill yang paling kamu kuasai (misalnya: “Frntend Developer fokus di React & Tailwind, pengalaman 3 tahun handle landing page dan dashboard UI”). 2. Bikin Service yang Jelas dan Menjual Daripada nulis “Frntend Developer untuk berbagai kebutuhan”, lebih baik spesifikin servicenya. Contoh: “Buat landing page responsif dengan Tailwind”“Convert Figma ke HTML/CSS + animasi GSAP”“Bangun UI React dari 0 (Next.js, Tailwind, HeadlessUI)” Gunakan bahasa yang dimengerti klien non-teknis juga, supaya mereka ngerti value-nya. 3. Upload Portofolio yang Real & Terbaik Masukin proyek-proyek yang beneran pernah kamu kerjain, walaupun itu side project atau latihan. Jelaskan context-nya: Tantangannya apa?Stack yang kamu pakai?Apa hasil akhirnya? Kalau kamu pernah ngebuat landing page untuk brand fiktif waktu latihan, itu pun tetap bisa ditulis, asal dijelasin sebagai “personal project”. Klien lebih suka lihat sesuatu daripada nol sama sekali. 4. Minta Testimoni dari Klien Lama Pernah kerja freelance di luar Contra? Hubungi klien lamamu dan minta testimoni. Kamu bisa masukin testimoni itu ke profil kamu di Contra. Trust factor naik banget kalau ada feedback real dari orang lain. 5. Rutin Update dan Aktif Contra punya algoritma juga, profil yang aktif, sering update, dan cepat respon ke calon klien itu punya peluang lebih besar buat muncul. Jadi jangan cuma daftar, terus ditinggal. Luangin wakktu seminggu sekali buat cek profil, bales pesan, atau update service. 6. Promosiin Profil Contra Kamu Contra kasih kamu URL profil khusus, kayak semacam portfolio link. Share itu di media sosial, di bio LinkedIn, atau kalau kamu join komunitas developer, bisa sekalian promosiin jasa kamu. Anggap aja kamu punya “mini website” sendiri, dan kamu lagi bangun traffic ke sana. Dengan strategi yang tepat, Contra bisa jadi alat bantu kamu bukan cuma buat dapet duit tambahan, tapi juga buat bangun reputasi profesional sebagai frontend developer yang terpercaya. Studi Banding Singkat: Contra vs Platform Freelance Lainnya Riset - Study Banding Biar kamu bisa lihat lebih jelas posisi Contra di antara platfform freelance lain, kita coba bandingin sama beberapa nama yang mungkin udah familiar kayak Fiverr, Upwork, dan Freelancer.com. Anggap aja ini kayak kamu lagi milih tools buat coding, semua bisa dipakai, tapi ada yang lebih cocok tergantung kebutuhan. Jadi yuk kita bandingin: 1. Contra vs Fiverr Fiverr itu lebih cocok buat job cepat dan sekali pakai. Klien datang cari jasa yang udah template-an.Contra kasih kamu ruang buat branding. Kamu bisa nyusun service-mu sendiri dan tampil sebagai independen professional, bukan cuma "penjual jasa". Analogi: Fiverr itu kayak kamu ngoding pakai plugin siap pakai, Contra itu kayak kamu bikin komponen custom sendiri biar scalable. 2. Contra vs Upwork Upwork banyak proyek, tapi persaingannya brutal. Kadang kamu harus ngebidding dengan harga rendah dulu biar dapet klien.Contra justru kasih kamu kendali penuh atas harga. Gak ada sistem bidding. Kamu pasang harga yang kamu rasa layak, dan klien bakal datang kalau mereka butuh kualitas. Analogi: Upwork itu kayak nyari kerjaan via job board, Contra lebih kayak kamu buka studio sendiri dan orang datang nyari kamu. 3. Contra vs Freelancer.com Freelancer.com seringkali terlalu umum dan rame. Banyak proyek murahan yang kurang cocok buat kamu yang punya spesialisasi frontend.Contra lebih curated, fokus ke kreator dan digital professionals. Lingkungannya lebih “adem” dan lebih profesional. Analogi: Freelancer.com itu kayak pasar loak, banyak pilihan tapi mesti pintar milih. Contra lebih kayak toko design premium, lebih spesifik dan tertarget. Kesimpulan Singkat Kalau ngomongin soal perbandingan, masing-masing platform punya karakteristik dan kelebihannya sendiri. Contra, misalnya, punya keunggulan utama karena nggak ngambil fee sama sekali. Kamu bisa pasang service sendiri dan fokus bangun personal brand. Ini cocok banget buat frontend developer yang serius pengin dikenal sebagai spesialis, bukan sekadar tukang ngoding. Sementara itu, Fiverr ngambil sekitar 20% fee, tapi cocok buat kamu yang pengin dapet job cepat dan praktis, karena sistemnya memang jual jasa sekali jadi. Upwork dan Freelancer.com biasanya ambil fee antara 10 sampai 20%, dan pakai sistem bidding, jadi kamu harus rebutan proyek sama freelancer lain. Dua platfform ini lebih pas buat kamu yang udah full-time freelance dan siap bersaing. Jadi, kalau kamu pengin jadi frntend developer yang bukan cuma "bisa ngoding", tapi juga pengin dikenal sebagai spesialis yang punya personal brand, Contra bisa banget jadi pilihan jangka panjang buat kamu. Rekomendasi Kelas Contra Gratis & Premium Buat kamu yang udah penasaran sama Contra dan pengin langsung ngulik lebih dalam, tenang... ada kelasnya! Bukan cuma asal tahu platform-nya, tapi kamu juga bakal diajarin cara ngatur profil, bikin layanan, sampe strategi dapetin klien. Jadi nggak cuma modal nekat, tapi ada ilmunya juga. FREE Riset - BuildWithAngga Free Online Course “Yang penting mulai dulu, walau gratisan. Ilmu tetep masuk!”. Kelas ini cocok banget buat kamu yang baru mau nyemplung ke dunia freelance dan pengin tau gimana cara kerja remote, bikin portofolio kece, dan dapetin klien via Contra, tanpa harus jago ngoding. Ini entry point yang pas buat pemanasan. Contra FREE Premium Riset - BuildWithAngga Premium Online Course “Kalau gratisan itu gerbangnya, premium ini jurus dewa-nya.”. Di kelas ini kamu bakal diajak mikir dan ngatur strategi kayak freelancer pro. Gimana caranya bangun branding pribadi, jual jasa yang laku keras, dan nyusun strategi pricing biar cuan maksimal. Cocok buat kamu yang udah punya sedikit pengalaman, dan sekarang pengin naik level. Contra Premium Penutup Riset - Penutup Masuk ke dunia freelance itu ibaratnya kayak pindah dari kantor tetap ke remote office milik sendiri. Kamu yang atur wakktu, kamu yang tentuin harga, dan kamu juga yang harus jaga reputasi. Nah, Contra hadir buat bantu kamu jadi frntend developer freelance yang gak cuma dapet klien, tapi juga bisa bangun personal brand tanpa harus ribet mikirin fee potongan. Platfform ini emang belum seramai nama-nama besar lain, tapi justru itu yang bikin peluangmu lebih kelihatan. Kalau kamu niat bangun portofolio, pasang layanan yang jelas, dan aktif promosiin diri kamu, Contra bisa jadi tempat kamu tumbuh secara profesional. Semangat!

Buat kamu yang ingin membangun website sewa rumah dari nol, memilih vanilla Node.js sebagai fondasi backend adalah keputusan yang tepat. Tanpa bantuan framework seperti Express, kamu jadi benar-benar paham cara kerja HTTP server, gimana request dan response diproses, dan bagaimana data bisa ditransfer lewat API. Ini penting banget terutama kalau kamu ingin bikin backend yang ringan, cepat, dan bisa disesuaikan penuh sesuai kebutuhan bisnis kamu. Selain itu, vanilla Node.js juga cocok banget dipakai untuk proyek yang skalanya masih kecil sampai menengah. Kamu punya kontrol penuh terhadap routing, middlewaare, hingga pengolahan file. Jadi kalau nanti butuh scaling atau ingin migrasi ke arsitektur yang lebih besar, kamu sudah punya fondasi yang kuat. Manfaat Utama Vanilla Node.js: Maintainable dan Scalable Salah satu keuntungan paling jelas ketika membangun backend dengan vanilla Node.js adalah kemudahan untuk membuat struktur yang maintainable. Kamu bebas bikin arsitektur yang modular, misalnya pisahin logic per folder seperti controller, service, middleware, hingga utilitas umum. Karena enggak bergantung pada library pihak ketiga, kamu juga enggak perlu terlalu khawatir dengan masalah compatibility antar versi atau update mendadak. Dari sisi scalability, Node.js dikenal sangat efisien dalam menangani banyak koneksi secara bersamaan karena sifatnya non-blocking dan event-driven. Bahkan tanpa Express, kamu tetap bisa membuat server yang siap menangani beban trafik tinggi, selama struktur kodenya dirancang dengan baik. Artinya, aplikasi kamu tetap jalan mulus walau pengguna bertambah banyak, apalagi kalau nanti didukung dengan deployment modern seperti Docker atau load balancer. Fokus Artikel Ini: Upload Foto Menggunakan Busboy + Postman Nah, di artikel ini kita bakal bahas salah satu fitur penting dalam proyek website sewa rumah: upload foto properti ke backend. Dalam dunia nyata, pemilik rumah pasti ingin tampilkan gambar rumah mereka supaya calon penyewa bisa lebih yakin sebelum booking. Karena itu, fitur upload foto bukan lagi tambahan, tapi sudah jadi fitur utama. Kita akan menggunakan Busboy, yaitu library kecil di Node.js yang sangat efektif buat parsing form-data, terutama saat user mengirimkan file lewat HTTP POST. File foto yang dikirim akan kita simpan langsung ke file system dalam folder khusus, tanpa perlu database. Dan sebagai pengujian, kita akan pakai Postman untuk mencoba kirim file dan lihat apakah file-nya berhasil disimpan. Dari proses ini, kamu bisa belajar bagaimana backend menerima file, menyimpannya, dan memberikan respons yang sesuai. Cara Install Node.js di Windows dan Membuat Proyek Pertama Backend API Sewa Rumah Langkah pertama yang perlu kamu lakukan adalah menginstall Node.js di Windows. Silakan buka situs resmi https://nodejs.org, lalu pilih versi LTS (Long Term Support) dan klik download. Setelah file selesai diunduh, jalankan installer dan ikuti langkah-langkah instalasinya seperti biasa hingga selesai. Setelah instalasi selesai, buka Command Prompt lalu ketik perintah berikut untuk memastikan bahwa Node.js dan npm sudah terpasang dengan benar: node -v npm -v Jika muncul versi dari Node.js dan npm, artinya kamu sudah siap membuat project backend pertamamu. Sekarang kita buat folder baru untuk proyek sewa rumah: mkdir sewa-rumah-api cd sewa-rumah-api Inisialisasi project Node.js dengan perintah: npm init -y Setelah itu, buat file utama server dengan nama index.js: // index.js const http = require('http'); const server = http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'application/json' }); res.end(JSON.stringify({ message: 'API Sewa Rumaah berjalan lancar' })); }); server.listen(3000, () => { console.log('Server berjalan di <http://localhost:3000>'); }); Lalu jalankan server dengan perintah berikut di terminal: node index.js Jika tidak ada error, maka akan muncul tulisan Server berjalan di http://localhost:3000. Itu artinya kamu sudah berhasil menjalankan server backend pertama kamu menggunakan vanilla Node.js, dan backend API sewa rumah siap kamu lanjutkan pengembangannya. Struktur Folder Proyek Backend Sewa Rumah (Vanilla Node.js) Untuk menjaga proyek tetap rapi, scalable, dan mudah dikembangkan, sangat disarankan membuat struktur folder yang jelas sejak awal. Walaupun kita tidak menggunakan framework seperti Express, bukan berarti kita menulis semua logic di satu file. Kita tetap bisa menyusun kode secara modular menggunakan pendekatan berikut. Contoh Struktur Folder sewa-rumah-api/ ├── controllers/ │ └── house.controller.js ├── data/ │ └── houses.json ├── middlewares/ │ └── upload.middleware.js ├── models/ │ └── house.model.js ├── routes/ │ └── house.routes.js ├── schemas/ │ └── house.schema.js ├── services/ │ └── house.service.js ├── uploads/ │ └── (folder kosong untuk menyimpan file foto) ├── utils/ │ └── generate-id.js ├── index.js ├── package.json Penjelasan Masing-Masing Folder controllers/ Berisi file yang menangani request dari user dan mengatur response-nya. Contohnya house.controller.js untuk handle upload foto, mengambil daftar rumah, atau menambahkan rumah baru. data/ Digunakan untuk menyimpan data sementara dalam format JSON sebelum kamu pakai database. Misalnya houses.json menyimpan daftar rumah yang bisa disewa. middlewares/ Berisi fungsi middleware yang dijalankan sebelum request masuk ke controller. Misalnya upload.middleware.js untuk menangani proses upload file dengan Busboy. models/ Digunakan untuk mendefinisikan struktur data seperti house.model.js. File ini bisa berisi constructor class atau struktur awal jika kamu pakai database nanti. routes/ Berisi logic pemetaan path URL ke fungsi controller secara manual. Contohnya house.routes.js mengatur endpoint /api/houses dan arahkan ke controller yang sesuai. schemas/ Berisi validasi data menggunakan library seperti Zod. Misalnya house.schema.js untuk validasi saat user menambahkan rumah baru agar inputnya sesuai aturan. services/ Berisi logic utama aplikasi seperti membaca file JSON, menyimpan data, atau filtering. house.service.js contohnya untuk mengambil semua rumah dari file JSON atau menambah data baru. uploads/ Folder kosong yang digunakan untuk menyimpan file hasil upload dari user. Misalnya foto rumah, yang diunggah melalui Postman akan masuk ke sini. utils/ Berisi fungsi bantu umum, misalnya generate-id.js untuk membuat ID unik setiap kali data baru ditambahkan. index.js File utama yang menjalankan HTTP server dan mengatur permintaan masuk, seperti menentukan rute dan memanggil middleware. Struktur seperti ini akan sangat membantu kamu saat proyek mulai bertambah kompleks. Setiap folder punya tanggung jawabnya sendiri, sehingga tim kamu pun bisa bekerja secara paralel tanpa mengganggu bagian lain. Cocok banget buat kamu yang mau bikin backend sederhana tapi profesional tanpa framework. Penjelasan File-Based Database Menggunakan .json untuk Backend API Sewa Rumah Dalam pengembangan backend API, terutagma saat proyek masih di tahap awal atau skala kecil, kita belum tentu langsung membutuhkan database besar seperti MySQL, MongoDB, atau PostgreSQL. Sebagai gantinya, kita bisa menggunakan pendekatan file-based database. Artinya, data akan disimpan dalam bentuk file .json di dalam folder proyek. File .json ini berfungsi mirip seperti tabel dalam database, isinya berupa array of objects yang merepresentasikan data — misalnya daftar rumah yang tersedia untuk disewa. Kelebihannya: setup sangat sederhana, tidak perlu install database server, dan bisa langsung digunakan dengan fs module dari Node.js. Metode ini cocok banget untuk belajar, prototyping, atau membangun MVP (Minimum Viable Product). Tapi perlu diingat, untuk kebutuhan produksi dengan banyak user dan skala besar, sebaiknya tetap gunakan database yang sesungguhnya. Cara Menggunakan File-Based Database di Proyek Sewa Rumah Langkah pertama, kamu buat file JSON di dalam folder data. Misalnya nama filenya houses.json dengan isi awal seperti ini: [] Isi array kosong karena nanti kita akan menambahkan rumah lewat endpoint POST. Lalu buat file service house.service.js di dalam folder services/ untuk mengelola proses baca dan tulis ke file tersebut. // services/house.service.js const fs = require('fs'); const path = require('path'); const { v4: uuidv4 } = require('uuid'); // opsional, bisa buat id unik kalau pakai library ini const filePath = path.join(__dirname, '../data/houses.json'); function readHouses() { const fileContent = fs.readFileSync(filePath, 'utf-8'); return JSON.parse(fileContent); } function saveHouses(houses) { fs.writeFileSync(filePath, JSON.stringify(houses, null, 2)); } function getAllHouses() { return readHouses(); } function addHouse(newHouse) { const houses = readHouses(); const houseWithId = { id: uuidv4(), // buat ID unik ...newHouse }; houses.push(houseWithId); saveHouses(houses); return houseWithId; } module.exports = { getAllHouses, addHouse }; Selanjutnya, buat controller untuk handle request dari user. Misalnya kita buat house.controller.js di folder controllers/. // controllers/house.controller.js const { getAllHouses, addHouse } = require('../services/house.service'); function handleGetHouses(req, res) { const houses = getAllHouses(); res.writeHead(200, { 'Content-Type': 'application/json' }); res.end(JSON.stringify(houses)); } function handleCreateHouse(req, res) { let body = ''; req.on('data', chunk => { body += chunk; }); req.on('end', () => { const data = JSON.parse(body); const newHouse = addHouse(data); res.writeHead(201, { 'Content-Type': 'application/json' }); res.end(JSON.stringify(newHouse)); }); } module.exports = { handleGetHouses, handleCreateHouse }; Terakhir, sambungkan semuanya lewat index.js: // index.js const http = require('http'); const url = require('url'); const { handleGetHouses, handleCreateHouse } = require('./controllers/house.controller'); const server = http.createServer((req, res) => { const parsedUrl = url.parse(req.url, true); const method = req.method; const pathname = parsedUrl.pathname; if (method === 'GET' && pathname === '/api/houses') { return handleGetHouses(req, res); } if (method === 'POST' && pathname === '/api/houses') { return handleCreateHouse(req, res); } res.writeHead(404, { 'Content-Type': 'application/json' }); res.end(JSON.stringify({ message: 'Route not found' })); }); server.listen(3000, () => { console.log('Server berjalan di <http://localhost:3000>'); }); Kalau semuanya sudah kamu buat, kamu bisa uji coba endpoint ini di Postman. Lakukan GET untuk ambil semua rumah dan POST untuk menambah rumah baru. Data akan tersimpan otomatis di file houses.json. Dengan pendekatan ini, kamu bisa belajar alur lengkap backend API tanpa perlu mengatur database yang kompleks. Sederhaana tapi powerful buat latihan dan membangun proyek real yang kecil. Install dan Gunakan Busboy untuk Upload Foto Rumah di Backend API Sewa Rumah Setelah API backend kamu berhasil membaca dan menulis data ke file .json, sekarang kita akan menambahkan fitur baru: upload foto rumah. Dalam fitur ini, foto akan diunggah oleh user melalui Postman (atau frontend nantinya), lalu disimpan di folder uploads/, sedangkan file name dan path-nya akan disimpan di file .json sebagai referensi. Kita akan menggunakan Busboy, yaitu library ringan dan efisien untuk menangani multipart/form-data (khususnya saat user mengunggah file). Langkah 1: Install Busboy Buka terminal di folder proyek keamu, lalu jalankan perintah: npm install busboy Langkah 2: Buat Middleware Upload File Buat folder middlewares/ kalau belum ada. Di dalamnya, buat file baru bernama upload.middleware.js. // middlewares/upload.middleware.js const Busboy = require('busboy'); const fs = require('fs'); const path = require('path'); function handlePhotoUpload(req, res, callback) { const busboy = new Busboy({ headers: req.headers }); let fileName = ''; let uploaded = false; busboy.on('file', (fieldname, file, filename) => { const uploadPath = path.join(__dirname, '../uploads', filename); fileName = filename; uploaded = true; file.pipe(fs.createWriteStream(uploadPath)); file.on('end', () => { callback(null, fileName); }); }); busboy.on('finish', () => { if (!uploaded) { callback(new Error('No file uploaded')); } }); req.pipe(busboy); } module.exports = { handlePhotoUpload }; Langkah 3: Perbarui Service dan Controller Buka atau buat file house.service.js di dalam folder services/. Tambahkan logic untuk menyimpan nama file ke file JSON. // services/house.service.js const fs = require('fs'); const path = require('path'); const { v4: uuidv4 } = require('uuid'); const filePath = path.join(__dirname, '../data/houses.json'); function readHouses() { const data = fs.readFileSync(filePath, 'utf-8'); return JSON.parse(data); } function saveHouses(houses) { fs.writeFileSync(filePath, JSON.stringify(houses, null, 2)); } function addHouseWithPhoto(photoFileName) { const houses = readHouses(); const newHouse = { id: uuidv4(), title: 'Rumah Baru', photo: `/uploads/${photoFileName}` }; houses.push(newHouse); saveHouses(houses); return newHouse; } module.exports = { addHouseWithPhoto, readHouses }; Selanjutnya buka house.controller.js di folder controllers/ dan tambahkan logic untuk menangani upload foto. // controllers/house.controller.js const { addHouseWithPhoto, readHouses } = require('../services/house.service'); const { handlePhotoUpload } = require('../middlewares/upload.middleware'); function handleGetHouses(req, res) { const houses = readHouses(); res.writeHead(200, { 'Content-Type': 'application/json' }); res.end(JSON.stringify(houses)); } function handleUploadHousePhoto(req, res) { handlePhotoUpload(req, res, (err, filename) => { if (err) { res.writeHead(400, { 'Content-Type': 'application/json' }); return res.end(JSON.stringify({ message: err.message })); } const newHouse = addHouseWithPhoto(filename); res.writeHead(201, { 'Content-Type': 'application/json' }); res.end(JSON.stringify({ message: 'Rumah berhasil ditambahkan dengan foto', data: newHouse })); }); } module.exports = { handleGetHouses, handleUploadHousePhoto }; Langkah 4: Update index.js Buka file index.js di root proyek, lalu arahkan endpoint POST ke handler upload foto: // index.js const http = require('http'); const url = require('url'); const { handleGetHouses, handleUploadHousePhoto } = require('./controllers/house.controller'); const server = http.createServer((req, res) => { const parsedUrl = url.parse(req.url, true); const method = req.method; const pathname = parsedUrl.pathname; if (method === 'GET' && pathnamee === '/api/houses') { return handleGetHouses(req, res); } if (method === 'POST' && pathname === '/api/houses/upload-photo') { return handleUploadHousePhoto(req, res); } res.writeHead(404, { 'Content-Type': 'application/json' }); res.end(JSON.stringify({ message: 'Route not found' })); }); server.listen(3000, () => { console.log('Server berjalan di <http://localhost:3000>'); }); Cara Uji Coba API Upload Foto Rumah dengan Postman (Multipart Form Data) Setelah backend kamu selesai dibuat menggunakan Node.js dan Busboy, sekarang saatnya kita menguji apakah fitur upload foto rumah berjalan dengan benar. Untuk itu, kita akan menggunakan Postman, sebuah tool populer untuk testing API. Tujuan dari uji coba ini adalah mengirim file gambar (misalnya foto rumah) ke endpoint /api/houses/upload-photo, dan memastikan backend menyimpannya ke folder uploads/, serta mencatat informasi file tersebut di file houses.json. Persiapan Sebelum Testing Pastikan kamu sudah melakukan hal berikut: Jalankan server dengan perintah node index.jsFolder uploads/ sudah ada di root proyekFile houses.json sudah tersedia di dalam folder data/ dan berisi array kosong [] Langkah Uji Coba Upload Foto Rumah di Postman Buka aplikasi Postman dan ikuti langkah berikut: Pilih metode POST Masukkan URL endpoint kamu, contoh: <http://localhost:3000/api/houses/upload-photo> Klik tab Body → pilih opsi form-data Tambahkan form field dengan key: Key: photo Type: File Value: [pilih gambar dari komputermu] Pastikan field type kamu adalah File, bukan Text Klik tombol Send Hasil yang Diharapkan Jika semuanya berjalan dengan benar, kamu akan menerima response JSON seperti ini: { "message": "Rumah berhasil ditambahkan dengan foto", "data": { "id": "3e2237b0-2b2e-4d5f-9a8b-d6bd3e8e456c", "title": "Rumah Baru", "photo": "/uploads/foto-rumah.jpg" } } Cek folder uploads/ — harusnya ada file foto-rumah.jpg atau sesuai dengan file yang kamu upload. Buka file data/houses.json — datanya akan bertambah seperti ini: [ { "id": "3e2237b0-2b2e-4d5f-9a8wwwb-d6bd3e8e456c", "title": "Rumah aaBaru", "photo": "/uploads/foto-rumaaah.jpg" } ] Penutup dan Saran untuk Backend Developer Pemula Belajar membangun backend dari nol dengan vanilla Node.js adalah langkah awal yang luar biasa. Kamu jadi paham cara kerja HTTP server, bagaimana cara upload file tanpa bantuan framework, serta bagaimana menyimpan data di file .json secara manual. Ini adalah pondasi penting sebelum kamu melangkah ke tahap yang lebih kompleks seperti menggunakan Express, database relasional, autentikasi JWT, hingga deployment ke cloud. Tapi kadang, belajar sendiri bisa terasa lambat dan membingungkan. Karena itu, belajar langsung bersama mentor expert di BuildWithAngga bisa jadi jalan pintas terbaik buat kamu yang ingin mempercepat karier sebagai backend developer—khususnya yang ingin bekerja remote. Di BuildWithAngga, kamu bisa belajar hal teknis langsung dari para engineer berpengalaman, tidak hanya teori tapi juga praktik proyek nyata seperti: API backend untuk aplikasi sewa rumah, POS system, dan marketplaceValidasi data profesional dengan ZodUpload file dengan keamananeeeStruktur folder yang scalable untuk kerja timSimulasi kerja remote seperti di startup beneran Dan yang paling penting, kamu akan dibimbing untuk menyiapkan portofolio dan kemampuan teknis yang dibutuhkan perusahaan luar negeri. Jadi bukan sekadar belajar ngoding, tapi benar-benar diarahkan supaya siap kerja remote dan punya penghasilan yang lebih besar dari rumah. Kalau kamu serius ingin jadi backend developer yang siap kerja remote, jangan hanya belajar sendirian. Yuk, gabung belajar bareng mentor expert di BuildWithAngga. Siapkan masa depanmu mulai hari ini. 🚀

Di era digital seperti sekarang, hampir semua jenis bisnis dituntut untuk hadir secara online. Mulai dari toko kecil sampai perusahaan besar, semua berlomba-lomba membangun sistem digital untuk menjangkau pelanggan lebih luas, meningkatkan efisiensi operasional, dan tentu saja menaikkan pendapatan. Misalnya gini, bayangin kamu punya bisnis penyewaan mobil. Kalau kamu hanya mengandalkan pelanggan yang datang langsung ke kantor atau tahu dari spanduk di pinggir jalan, jangkauannya terbatas banget. Tapi kalau kamu punya sistem online yang memungkinkan orang booking mobil lewat website dari rumah, potensi pasarnya langsung meluas ke mana-mana. Bahkan orang luar kota yang mau liburan pun bisa pesan lebih awal. Ini otomatis bikin potensi revenue perusahaan naik. Nah, untuk bikin sistem seperti itu, kita butuh teknologi backend yang kuat, stabil, dan bisa berkembang seiring pertumbuhan bisnis. Di sinilah Node.js masuk sebagai pilihan yang tepat. Node.js adalah lingkungan runtime JavaScript yang cepat, ringan, dan punya ekosistem library yang luas banget. Karena sifatnya non-blocking dan event-driven, Node.js cocok digunakan untuk aplikasi yang butuh performa tinggi dan skalabilitas, seperti sistem booking online atau dashboard manajemen armada mobil. Selain itu, Node.js juga gampang dipelajari, terutama buat kamu yang sudah familiar dengan JavaScript di frontend. Jadi proses belajarnya lebih cepat dan konsisten dari sisi bahasa pemrograman. Belajar Menerapkan File Based Database untuk Backend Sewa Mobil Pada artikel kali ini, kita akan bahas gimana cara bikin backend sederhana untuk katalog sewa mobil menggunakan pendekatan file based database. Konsep ini cocok banget buat pemula yang baru belajar backend dan belum siap menggunakan sistem database yang kompleks seperti MySQL atau MongoDB. File based database artinya data akan disimpan di dalam file—biasanya dalam format JSON—dan kita akan membaca, menulis, serta mengubah file tersebut menggunakan kode program. Meskipun tidak sekuat database sunguhan dalam hal kecepatan dan fleksibilitas, metode ini sangat pas digunakan untuk kebutuhan skala kecil atau saat kita sedang membangun prototype. Misalnya kita ingin bikin website sewa mobil yang menampilkan daftar mobil yang tersedia, lengkap dengan nama, merek, tahun produksi, dan harga sewa per hari. Semua informasi ini bisa disimpan dalam satu file .json dan dibaca oleh sistem Node.js saat dibutuhkan. Keuntungan pendekatan ini adalah sederhana, tidak perlu setup database server, dan kita bisa langsung fokus memahami alur backend, seperti membaca data, memfilter berdasarkan query, dan mengembalikan respons ke client dalam format JSON. Tapi tentu ada juga keterbatasannya, misalnya performa yang menurun kalau datanya makin besar, atau data tidak bisa diakses secara paralel secara efisien. Intinya, file based database adalah titik awal yang bagus buat belajar struktur backend sederhana dan memahami dasar-daesar bagaimana data bekerja di dalam aplikasi web. Dari sini, kamu bisa lanjut ke tahapan yang lebih kompleks, seperti menggunakan database relasional atau NoSQL di proyek-proyek selanjutnya. Di bagian berikutnya nanti, kita akan coba bangun struktur backendnya secara bertahap. Tapi yang pasti, kamu bakal dapet pengalaman langsung gimana cara kerja sistem backend dari nol. Cara Install Node.js Framework Terbaru di Windows Sebelum kita mulai bikin proyek backend, hal paling pertama yang perlu dilakukan tentu aja install Node.js dulu di komputermu. Kalau kamu pengguna Windows, tenang aja—caranya cukup gampang dan bisa kamu selesaikan dalam beberapa menit. Langkah pertama, buka browser dan pergi ke website resmi Node.js di alamat https://nodejs.org/. Di halaman utama kamu akan lihat dua tombol besar—satu untuk versi LTS (Long-Term Support) dan satu lagi versi Current. Disarankan kamu pilih versi LTS karena lebih stabil untuk proyek jangka panjang. Setelah file installer (.msi) selesai diunduh, jalankan file tersebut. Proses instalasi akan memandu kamu lewat beberapa langkah. Tinggal klik "Next" saja sampai selesai. Pastikan kamu mencentang opsi yang menambahkan Node.js ke dalam PATH, agar bisa digunakan langsung dari Command Prompt atau terminal. Setelah instalasi selesai, buka Command Prompt dan ketik perintah berikut untuk memastikan bahwa Node.js dan npm (Node Package Manager) sudah berhasil diinstall: node -v Perintah ini akan menampilkan versi Node.js yang terpasang, misalnya v22.0.0. npm -v Ini akan menampilkan versi npm, seperti 10.2.0. Kalau dua perintah ini menampilkan versi dengan benar, artinya kamu sudah siap memulai proyek Node.js-mu. Cara Membuat Proyek Backend Node.js untuk Katalog Sewa Mobil Setelah Node.js berhasil kamu install, sekarang kita mulai bikin proyek backend sederhana. Proyek ini akan menjadi dasar dari sistem katalog sewa mobil, di mana nanti kita bisa menampilkan daftar mobil, membaca data dari file, dan memberikan respons berupa JSON. Tapi di tahap ini, kita fokus dulu bikin struktur awal proyeknya. Pertama, buat dulu folder kosong untuk menyimpan semua file proyek kamu. Misalnya kamu bisa kasih nama katalog-sewa-mobil. Kamu bisa buat lewat File Explorer, atau langsung dari terminal: mkdir katalog-sewa-mobil cd katalog-sewa-mobil Setelah masuk ke folder proyek, jalankan perintah berikut untuk membuat file package.json. File ini akan menyimpan informasi dasar proyek seperti nama, versi, dan dependensi yang dibutuhkan. npm init -y Tanda -y artinya semua pertanyaan default akan dijawab otomatis, jadi prosesnya cepat. Selanjutnya, kita butauh satu file utama untuk menjalankan server. Biasanya kita kasih nama server.js, karena fungsinya untuk menjalankan HTTP server: echo. > server.js Kalau kamu pakai text editor seperti VS Code, kamu juga bisa langsung klik kanan dan pilih "New File", lalu tulis server.js. Setelah itu, kita akan buat juga satu folder bernama data. Di dalam folder ini nanti kita simpan file .json yang berfungsi sebagai database sederhana—alias file based database: mkdir data Sampai tahap ini, struktur folder kamu seharusnya terlihat seperti ini: katalog-sewa-mobil/ ├── data/ ├── package.json └── server.js Struktur ini adalah pondasi awal dari proyek backend kamu. Di artikel selanjutnya, kita akan mulai menulis logika untuk membaca file JSON dan menampilkan data mobil melalui endpoint yang bisa diakses lewat browser atau API client seperti Postman. Tapi sejauh ini, kamu udah siap banget buat lanjut ke tahap coding. Struktur Folder dan File yang Best Practice dalam Proyek Node.js Dalam membangun aplikasi backend Node.js yang rapi, scalable, dan mudah dipelihara, penting banget buat kita menggunakan struktur folder yang tertata dengan baik. Meskipun pada awalnya proyek kamu sederhana, membiasakan diri menggunakan struktur yang clean sejak awal akan memudahkan kamu atau tim kamu saat proyek berkembang lebih besar nanti. Berikut ini adalah struktur folder yang umum digunakan dalam proyek Node.js, khususnya kalau kamu tidak menggunakan framework seperti Express Generator, tapi ingin tetap rapi dan terorganisir: katalog-sewa-mobil/ ├── controllers/ ├── routes/ ├── services/ ├── models/ ├── data/ ├── utils/ ├── server.js ├── package.json Penjelasan tiap folder dan file: controllers/: berisi logika untuk menangani permintaan (request) dan mengirim respons (response). Di sinilah tempat kamu menulis logika endpoint API seperti /cars.routes/: berisi definisi endpoint dan rutenya, biasanya dipisahkan per fitur agar modular.services/: tempat logika bisnis utama, seperti filtering data, menyimpan data baru, validasi sederhana, dan lain-lain. Biasanya digunakan oleh controller.models/: menyimpan struktur data atau skema sederhana jika tidak menggunakan database seperti MongoDB atau Sequelize. Bisa juga sebagai lapisan abstraksi file JSON.data/: menyimpan file-file .json yang berperan sebagai file-based database.utils/: berisi helper function, seperti format tanggal, generate ID, logging, dll.server.js: titik masuk aplikasi, tempat menjalankan server dan menghubungkan semua bagian.package.json: konfigurasi dan dependensi proyek. Contoh Koding Folder Dasar server.js const http = require('http'); const { handleCarRoutes } = require('./routes/car.routes'); const PORT = 3000; const server = http.createServer((req, res) => { // Routing dasar if (req.url.startsWith('/cars')) { return handleCarRoutes(req, res); } res.writeHead(404, { 'Content-Type': 'application/json' }); res.end(JSON.stringify({ message: 'Route tidak ditemukan' })); }); server.listen(PORT, () => { console.log(`Server berjalan di <http://localhost>:${PORT}`); }); routes/car.routes.js const { getAllCars } = require('../controllers/car.controller'); function handleCarRoutes(req, res) { if (req.method === 'GET' && req.url === '/cars') { return getAllCars(req, res); } res.writeHead(404, { 'Content-Type': 'application/json' }); res.end(JSON.stringify({ message: 'Endpoint cars tidak ditemukan' })); } module.exports = { handleCarRoutes }; controllers/car.controller.js const { readCarData } = require('../services/car.service'); function getAllCars(req, res) { const cars = readCarData(); res.writeHead(200, { 'Content-Type': 'application/json' }); res.end(JSON.stringify(cars)); } module.exports = { getAllCars }; services/car.service.js const fs = require('fs'); const path = require('path'); function readCarData() { const filePath = path.join(__dirname, '../data/cars.json'); const fileContent = fs.readFileSync(filePath, 'utf8'); return JSON.parse(fileContent); } module.exports = { readCarData }; data/cars.json [ { "id": 1, "name": "Toyota Innova", "year": 2021, "price_per_day": 450000 }, { "id": 2, "name": "Suzuki Ertiga", "year": 2020, "price_per_day": 380000 } ] Dengan struktur ini, kamu bisa lebih mudah memisahkan tanggung jawab antar bagian. Misalnya, controller hanya fokus pada req dan res, sedangkan service bertanggung jawab untuk baca data atau menjalankan logika tertentu. Kalau nanti mau tambah fitur seperti tambah mobil baru, tinggal tambahkan method baru di car.service.js dan car.controller.js tanpa merusak struktur yang ada. Struktur ini juga memudahkan untuk testing, debug, dan scale up—baik ketika kamu mau ganti dari file based ke database sesungguhnya, atau saat mau deploy ke production. Cara Menyiapkan 100.000 Data JSON secara Otomatis Menyiapkan 100.000 data secara manual jelas bukan pilihan yang masuk akal. Untungnya, kita bisa menggunakan script Node.js sederhana untuk membuat data dummy dalam jumlah besar dan menyimpannya langsung ke file cars.json. Kita akan menggunakan module fs bawaan Node.js untuk menulis file, dan membuat array berisi objek-objek mobil dengan data yang dibangkitkan secara otomatis. Langkah pertama, buat file baru misalnya generate.js di dalam folder proyek kamu. Isi dengan kode berikut: const fs = require('fs'); const path = require('path'); // Fungsi bantu untuk menghasilkan nama mobil acak function generateCarName(index) { const brands = ['Toyota', 'Honda', 'Daihatsu', 'Suzuki', 'Nissan', 'Mitsubishi']; const models = ['Avanza', 'Brio', 'Xenia', 'Ertiga', 'Livina', 'Xpander']; const brand = brands[index % brands.length]; const model = models[index % models.length]; return `${brand} ${model}`; } const cars = []; for (let i = 1; i <= 100000; i++) { const car = { id: i, name: generateCarName(i), year: 2015 + (i % 10), // tahun antara 2015-2024 price_per_day: 250000 + (i % 10) * 10000 // variasi harga dari 250rb sampai 350rb }; cars.push(car); } const filePath = path.join(__dirname, 'data', 'cars.json'); fs.writeFile(filePath, JSON.stringify(cars, null, 2), (err) => { if (err) { console.error('Gagal menyimpan file:', err); } else { console.log('Berhasil membuat 100.000 data mobil ke dalam cars.json'); } }); Penjelasan singkat: Fungsi generateCarName() membuat nama mobil berdasarkan array merek dan model, lalu digabungkan.Loop for membuat 100.000 objek mobeil dengan id, name, year, dan price_per_day yang variatif.Semua data disimpan ke dalam array cars lalu ditulis ke file cars.json menggunakan fs.writeFile(). Untuk menjalankan scrippt ini, buka terminal di folder proyek lalu jalankan: node generate.js Dalam beberapa detik (tergantung spek komputermu), file cars.json di folder data/ akan terisi dengan 100.000 data mobil siap pakai. Kamu bisa pakai file ini untuk testing, simulasi API, atau keperluan performance benchmarking. Cara Menambahkan Route CRUD Data Mobil ke File JSON Setelah kita berhasil menyiapkan file cars.json, sekarang waktunya menambahkan fitur CRUD (Create, Read, Update, Delete) untuk memanipulasi data mobil yang tersimpan di file tersebut. Kita akan melanjutkan dari struktur yang sudah kita buat sebelumnya. Langkah 1: Update routes/car.routes.js untuk mendukung semua method HTTP const { getAllCars, getCarById, createCar, updateCarById, deleteCarById } = require('../controllers/car.controller'); function handleCarRoutes(req, res) { if (req.method === 'GET' && req.url === '/cars') { return getAllCars(req, res); } if (req.method === 'GET' && req.url.startsWith('/cars/')) { return getCarById(req, res); } if (req.method === 'POST' && req.url === '/cars') { return createCar(req, res); } if (req.method === 'PUT' && req.url.startsWith('/cars/')) { return updateCarById(req, res); } if (req.method === 'DELETE' && req.url.startsWith('/cars/')) { return deleteCarById(req, res); } res.writeHead(404, { 'Content-Type': 'application/json' }); res.end(JSON.stringify({ message: 'Endpoint cars tidak ditemukan' })); } module.exports = { handleCarRoutes }; Langkah 2: Update controllers/car.controller.js dengan semua operasi CRUD const { readCarData, writeCarData } = require('../services/car.service'); function getAllCars(req, res) { const cars = readCarData(); res.writeHead(200, { 'Content-Type': 'application/json' }); res.end(JSON.stringify(cars)); } function getCarById(req, res) { const id = parseInt(req.url.split('/')[2]); const cars = readCarData(); const car = cars.find(c => c.id === id); if (!car) { res.writeHead(404, { 'Content-Type': 'application/json' }); return res.end(JSON.stringify({ message: 'Mobil tidak ditemukan' })); } res.writeHead(200, { 'Content-Type': 'application/json' }); res.end(JSON.stringify(car)); } function createCar(req, res) { let body = ''; req.on('data', chunk => { body += chunk; }); req.on('end', () => { const newCar = JSON.parse(body); const cars = readCarData(); newCar.id = cars.length > 0 ? cars[cars.length - 1].id + 1 : 1; cars.push(newCar); writeCarData(cars); res.writeHead(201, { 'Content-Type': 'application/json' }); res.end(JSON.stringify(newCar)); }); } function updateCarById(req, res) { const id = parseInt(req.url.split('/')[2]); let body = ''; req.on('data', chunk => { body += chunk; }); req.on('end', () => { const updatedData = JSON.parse(body); const cars = readCarData(); const index = cars.findIndex(c => c.id === id); if (index === -1) { res.writeHead(404, { 'Content-Type': 'application/json' }); return res.end(JSON.stringify({ message: 'Mobil tidak ditemukan' })); } cars[index] = { ...cars[index], ...updatedData }; writeCarData(cars); res.writeHead(200, { 'Content-Type': 'application/json' }); res.end(JSON.stringify(cars[index])); }); } function deleteCarById(req, res) { const id = parseInt(req.url.split('/')[2]); let cars = readCarData(); const index = cars.findIndex(c => c.id === id); if (index === -1) { res.writeHead(404, { 'Content-Type': 'application/json' }); return res.end(JSON.stringify({ message: 'Mobil tidak ditemukan' })); } const deleted = cars.splice(index, 1)[0]; writeCarData(cars); res.writeHead(200, { 'Content-Type': 'application/json' }); res.end(JSON.stringify(deleted)); } module.exports = { getAllCars, getCarById, createCar, updateCarById, deleteCarById }; Langkah 3: Tambahkan helper writeCarData di services/car.service.js const fs = require('fs'); const path = require('path'); function readCarData() { const filePath = path.join(__dirname, '../data/cars.json'); const fileContent = fs.readFileSync(filePath, 'utf8'); return JSON.parse(fileContent); } function writeCarData(data) { const filePath = path.join(__dirname, '../data/cars.json'); fs.writeFileSync(filePath, JSON.stringify(data, null, 2), 'utf8'); } module.exports = { readCarData, writeCarData }; Sampai tahap ini, kamu sudah memiliki CRUD lengkap: GET /cars untuk mendapatkan semua mobilGET /cars/:id untuk mendapatkan mobil berdasarkan IDPOST /cars untuk menambahkan mobil baruPUT /cars/:id untuk mengedit data mobilDELETE /cars/:id untuk menghapus mobil Kamu bisa menguji semua endpoint ini lewat Postman atau Insomnia. Pastikan kamu menyetel header Content-Type: application/json untuk request POST dan PUT. Cara Melakukan Uji Coba API Backend Node.js Menggunakan Postman Setelah kamu menyelesaikan pembuatan backend katalog sewa mobil berbasis file JSON, langkah selanjutnya adalah mengujinya menggunakan Postman. Postman adalah aplikasi yang sangat membantu untuk mencoba dan mengevaluasi API secara manual. Kamu bisa kirim request, lihat respons, dan memastikan setiap endpoint bekerja seperti yang diharapkan. Sebelum membuka Postman, pastikan server kamu sedang berjalan dengan menjalankan: node server.js Setelah itu, buka aplikasi Postman dan ikuti cara berikut untuk mencoba tiap endpoint: Menguji GET semua mobil Pilih metode GETMasukkan URL http://localhost:3000/carsKlik toambol SendRespons yang keluar harus berupa array mobil seperti: [ { "id": 1, "name": "Toyota Avanza", "year": 2020, "price_per_day": 350000 }, { "id": 2, "name": "Honda Brio", "year": 2021, "price_per_day": 300000 } ] Menguji GET mobil berdasarkan ID Pilih metode GETMasukkan URL http://localhost:3000/cars/1Klik SendRespons yang keluar: { "id": 1, "name": "Toyota Avanza", "year": 2020, "price_per_day": 350000 } Menguji POST untuk menambahkan mobil baru Pilih metode POSTMasukkan URL http://localhost:3000/carsKlik tab Body → pilih raw → pilih JSONIsi konten seperti ini: { "name": "Nissan Serena", "year": 2022, "price_per_day": 400000 } Klik SendRespons akan menampilkan data mobil baru yang sudah diberi ID: { "name": "Nissan Serena", "year": 2022, "price_per_day": 400000, "id": 100001 } Menguji PUT untuk mengupdate mobil Pilih metode PUTMasukkan URL http://localhost:3000/cars/1Klik tab Body → pilih raw → pilih JSONIsi konten: { "price_per_day": 375000 } Klik SendRespons: { "id": 1, "name": "Toyota Avanza", "year": 2020, "price_per_day": 375000 } Menguji DELETE untuk menghapus mobil Pilih metode DELETEMasukkan URL http://localhost:3000/cars/1Klik SendRespons: { "id": 1, "name": "Toyota Avanza", "year": 2020, "price_per_day": 375000 } Setelah kamu coba semua endpoint di atas dan hasilnya sesuai harapan, artinya sistem backend kamu sudah bekerja dengan baik. Pastikan untuk melakukan testing secara berkala saat menambahkan fitur baru agar tidak ada yang rusak. Postman juga memungkinkan kamu menyimpan request untuk digunakan ulang, jadi sangat berguna saat pengembangan jangka panjang. Penutup dan Saran untuk Backend Developer Pemula yang Ingin Kerja Remote Belajar membuat backend dari nol memang nggak instan. Tapi dengan konsistensi dan struktur belajar yang benar, kamu bisa banget jadi backend developer yang siap kerja secara remote, bahkan dari rumah sendiri. Project sederhana seperti sistem katalog sewa mobil berbasis file JSON ini adalah titik awal yang bagus banget. Kamu bisa belajar banyak hal mulai dari routing, struktur folder, cara kerja server, sampai CRUD API—semuanya real dan langsung dipraktikkan. Kalau kamu merasa belajar sendiri bikin bingung dan butuh arahan yang jelas, jangan khawatir. Di BuildWithAngga, kamu bisa belajar langsung bareng mentor expert yang sudah berpengalaman bertahun-tahun di dunia backend dan kerja remote. Kursus yang kami siapkan nggak cuma teori doang, tapi berbasis proyek nyata, dengan penjelasan yang mudah dipahami dan step-by-step. Benefit belajar bareng mentor di BuildWithAngga antara lain: Belajar dari mentor yang pernah kerja di startup besar dan luar negeriMateri project-based, bukan teori kosongSertifikat resmi yang bisa kamu pakai untuk melamar kerja remoteAkses ke komunitas belajar, tanya jawab, dan sharing job opportunityUpdate materi sesuai tren industri backend terbaruaaaAda latihan interview & review portofolio biar kamu lebih siap ke dunia kerja Dunia kerja remote itu real, dan terbuka lebar buat siapa aja yang siap. Jadi daripada cuma jadi penonton, mending kamu ikut mulai dari sekarang. Bangun skill-mu, buat portofolio backend-mu, dan persiapkan diri untuk masuk ke dunia kerja global bareng BuildWithAngga. 🚀

Daftar Isi PendahuluanDownload Node JSDownload LaragonViteInstall React & TypescriptMasuk dan InstallTailwind CSSCara Memasukkan Tailwind ke ReactInstall Tailwind CSSKonfigurasiCSSHapusUbahTambahHasil Struktur Folder Setelah di TambahPastikan Sudah Download Dependency IniDownload Template HTML ShaynakitMasukin Template ke ReactCopy Gambar & IconConvert ke JSXAkses BrowserPenutup Pendahuluan Kalau kamu baru ingin mulai belajar membangun web modern, kombinasi React, Tailwind CSS, dan TypeScript adalah paket lengkap yang layak dicoba. Di artikel ini, kita akan bahas langkah-langkah praktis dari awal hingga kamu berhasil membuat satu halaman web yang rapi, responsif, dan mudah dikembangkan. Tenang, semuanya akan dijelaskan dengan sederhana dan jelas. Dimuali dari mendownload Node JS dulu. Download Node JS Browser - Node JS Node.js itu ibarat dapur tempat JavaScript bisa masak. Kalau biasanya JavaScript hanya bisa dipakai untuk mengatur tampilan di halaman web, dengan Node.js kamu bisa pakai JavaScript untuk bikin hal-hal di belakang layar, seperti menyajikan data dari database, membuat server sendiri, menjalankan React JS atau menjalankan alat bantu seperti Tailwind CSS. Dibangun di atas mesin cepat milik Google (V8), Node.js memungkinkan developer membangun aplikasi yang ringan dan responsif hanya dengan satu bahasa untuk frontend dan backend. Pastiin kamu sudah menginstall dan kalau mau cek hasilnnya ketik perintah ini di terminal kamu: node -v npm -v Kalau memang sudah terinstall bakal muncul kayak gini yang artinya udah siap di pake nanti : Download Laragon Browser - Laragon Laragon itu ibarat kotak perkakas praktis untuk ngoding PHP dan web development di Windows. Daripada repot install Apache, MySQL, PHP, dan lain-lain satu per satu, Laragon menyatukannya dalam satu aplikasi ringan yang siap pakai. Dengan antarmuka yang simpel, kamu bisa langsung buat proyek Laravel, WordPress, atau lainnya hanya dengan beberapa klik. Selain itu, Laragon juga cepat, portabel, dan nggak bikin sistem berat. Cocok banget buat kamu yang ingin mulai belajar backend tanpa ribet konfigurasi sana-sini. Pastiin kamu juga udah install Laragon ini, santai boleh pakai XAMPP karena sama aja, yang kita butuhin itu MySQL nya agar bisa nyambung React kita ke Database kita. Kalau udah berhasil install Laragon dan udah siap ciri-cirinya kayak gini: Result & Play Laragon Biar makin yakin udah bener, ketik http://localhost di browser kamu dan hasilnya harus gini: Second Test Laragon Vite Browser - Vite Vite adalah build tool modern yang bikin proses ngoding frontend jadi lebih cepat dan menyenangkan, terutama buat proyek React, Vue, atau lainnya. Saat kamu mulai ngoding, Vite langsung nyala dan tampilkan hasilnya tanpa loading lama, karena dia cuma memproses file yang benar-benar dibutuhkan. Pas udah siap dibuild untuk production, dia juga ngerapihin semuanya jadi ringan dan siap online. Selain itu, Vite didesain dengan arsitektur yang memanfaatkan kemampuan browser modern, jadi proses pengembangan terasa lebih responsif dan minim hambatan. Dengan fitur hot module replacement (HMR) yang super cepat, perubahan kode langsung terlihat tanpa perlu reload halaman penuh, membuat workflow kamu jadi jauh lebih efisien dan menyenangkan. Bisa dibilang, Vite itu seperti mesin kopi instan, sekali tekan, langsung jadi, beda dengan alat lama yang harus dipanaskan dulu dan bikin kamu nunggu lama sebelum bisa mulai ngoding. Vite ini bakal kita pake buat install React nya biar nanti jalannya lebih powerful. Install React & Typescript Nah, sekarang setelah kita udah ngerti apa yang dibutuhin dan alat-alatnya juga udah siap, tinggal gas bikin proyeknya! Buat dulu folder terserah kamu mau kasih nama apa, terus buka folder itu di VSCode atau text editor favorit kamu sampai tampilannya kayak gambar ini: VSCode - First Folder Untuk langkah selanjutnya, buka terminal di dalam VSCode dengan cara tekan tombol CTRL + ` (tombol backtick, biasanya di bawah Esc). Setelah terminal muncul, kamu bisa langsung jalankan perintah di bawah ini untuk mulai setup proyek kamu: npm create vite@latest Pilih aja kayak yang di gambar di bawah ini, pilih React, TypeScript + SWC, dan beri nama proyek terserah kalian: VSCode - Create Project Masuk dan Install Nah setelah itu tinggal masuk ke folder proyeknya lalu jalanin kayak gini: cd belajar npm install npm run dev Jadi, cd itu singkatan dari “change directory” alias masuk ke dalam folder. Nah, kalau kamu ketik cd belajar, artinya kamu lagi pindah masuk ke folder yang namanya “belajar”. Terus, npm install itu perintah buat ngunduh dan memasang semua paket atau library yang dibutuhin proyek kamu supaya bisa jalan dengan lancar. Kalau npm run dev, itu perintah buat ngejalanin proyek kamu dalam mode development, jadi kamu bisa lihat hasilnya langsung dan kalo ada perubahan, tampilannya bakal otomatis update tanpa perlu di-refresh manual. Lalu akses link dibawah ini, nanti proyeknya bakal tampil: VSCode - Ready to Appear Kalau sudah kamu akses link itu tampilannya bakal gini: Browser - Result Project Tailwind CSS Browser - Tailwind CSS Jadi, Tailwind CSS itu kayak kotak peralatan serbaguna buat desain website. Bayangin kamu lagi ngegambar dan biasanya harus bikin kuas dan cat sendiri dulu, nah Tailwind ini sudah sediain ratusan kuas kecil yang tinggal kamu pakai langsung buat bikin gambar sesuai keinginan. Nggak perlu ribet nulis kode CSS panjang-panjang, kamu cuma pakai kelas-kelas kecil kayak bg-blue-500 buat warna biru, p-4 buat padding, atau flex buat atur layout, langsung tempel di HTML kamu. Selain cepat dan praktis, Tailwind juga bikin tampilan website kamu gampang diatur dan konsisten karena semuanya seragam dari alat yang sama. Nah, kalau mau warna atau ukuran yang beda, tinggal atur di file konfigurasi, kayak nge-mix cat supaya warna yang kamu pakai pas banget. Intinya, pakai Tailwind itu kayak punya toolkit yang siap pakai buat bikin tampilan keren tanpa harus repot bikin semuanya dari nol. Cara Memasukkan Tailwind ke React Install Tailwind CSS Sekarang, tinggal jalanin perintah ini di terminal yang ada di dalam folder proyek React kamu. Cukup ketik aja perintahnya, terus pencet Enter, nanti prosesnya bakal jalan otomatis: npm install tailwindcss @tailwindcss/vite Perintah npm install tailwindcss @tailwindcss/vite ini fungsinya buat ngunduh dan pasang paket Tailwind CSS beserta plugin khusus yang bikin Tailwind bisa jalan lancar bareng Vite sebagai build tool-nya. Jadi, dengan perintah ini, kamu nggak cuma dapetin core Tailwind CSS buat styling, tapi juga integrasi yang mulus supaya Vite bisa proses Tailwind dengan cepat dan efisien saat kamu lagi develop proyek frontend-mu. Singkatnya, ini langkah penting supaya styling pakai Tailwind bisa berjalan sempurna di proyek React yang kamu bikin pakai Vite. Hasilnya VSCode Terminal - Install Tailwind CSS Konfigurasi Di dalam file vite.config.ts kamu beri kode ini import tailwindcss from '@tailwindcss/vite' Kalimat import tailwindcss from '@tailwindcss/vite' itu artinya kita lagi ngambil (import) plugin Tailwind CSS khusus yang dibuat untuk Vite ke dalam file konfigurasi atau skrip kita. Dengan nge-import ini, kita kasih tahu Vite supaya bisa pakai Tailwind CSS secara optimal dan nyatu banget sama proses build dan development yang lagi jalan. Jadi, plugin ini semacam jembatan yang bikin Tailwind dan Vite kerja barengan dengan mulus tanpa ribet. tailwindcss() tailwindcss() itu kayak kamu lagi memanggil atau ngejalanin fungsi Tailwind CSS di dalam konfigurasi Vite. Jadi, pas kamu tulis tailwindcss(), artinya kamu ngasih perintah supaya Vite aktifkan plugin Tailwind CSS yang tadi sudah di-import, supaya bisa langsung digunakan buat proses styling proyek kamu. Bisa dibilang, ini kayak tombol “ON” buat Tailwind di proyek kamu. Sampai hasilnya gini import { defineConfig } from "vite"; import react from "@vitejs/plugin-react-swc"; import tailwindcss from "@tailwindcss/vite"; // <https://vite.dev/config/> export default defineConfig({ plugins: [react(), tailwindcss()], }); CSS Di file src/index.css, hapus semua kode yang ada supaya kosong, lalu tinggal isi cuma dengan satu baris ini saja: @import "tailwindcss"; Sekarang Tailwind sudah nyantol ke proyek React kita, jadi tinggal ambil css nya terus pake. Hapus VSCode - Structure Project Hapus file App.css karena file tersebut enggak akan kita pake. Ubah Lalu hapus isi file ini : VSCode - App.tsx Isi dengan: VSCode - New Code Kode <BrowserRouter>, <Routes>, dan <Route> yang kamu taruh di file App.tsx di React itu fungsinya buat ngatur routing atau navigasi antar halaman di aplikasi kamu. BrowserRouter itu kayak pembungkus utama yang ngatur semua rute berdasarkan URL di browser, jadi React tahu harus nampilin halaman apa pas user akses URL tertentu.Routes adalah tempat di mana kamu naro semua daftar rute (alias halaman) yang mau kamu buat.Nah, Route itu satuan rute-nya. Di contoh kamu, pas user buka / (halaman utama), maka React bakal nampilin komponen <HomePage />. Jadi, kode itu intinya nge-set: "Kalau URL-nya adalah /, tampilkan halaman HomePage." Simple dan terstruktur banget buat aplikasi yang butuh lebih dari satu halaman. Itu error karna kita belum buat filenya dan belum download depedencynya, tapi santai aja nanti bakal kita lakuin. Tambah Buat sekarang tambahin dulu file dan folder-folder keperluannya kayak: .env File .env di React itu fungsinya buat nyimpen data rahasia atau pengaturan penting yang nggak mau kamu tulis langsung di dalam kode. Misalnya kayak API key, URL backend, token, atau config lain yang bisa beda-beda antara development dan production. Dengan begitu, kamu bisa akses data itu lewat process.env.NAMA_VARIABEL di dalam kode kamu, dan nilai aslinya diambil dari file .env. Nah, di React (pakai Vite atau CRA), nama variabelnya harus diawali dengan VITE_ (kalau pakai Vite) atau REACT_APP_ (kalau pakai CRA), misalnya VITE_API_URL=https://api.example.com. Jadi, pakai .env itu bikin proyek kamu lebih aman, rapi, dan gampang diatur. Buat file ini di path terluar terus isi gini: VSCode - env VITE_REACT_API_URL = <http://127.0.0.1:8000/api> VITE_REACT_API_STORAGE_URL = <http://127.0.0.1:8000/storage> Nah, keduanya itu berfungsi buat nyimpen alamat URL yang bakal dipakai di dalam aplikasi React kita. VITE_REACT_API_URL biasanya dipakai buat ngarahin semua request API ke backend, misalnya ke Laravel atau server lokal kita yang lagi jalan di http://127.0.0.1:8000/api, sedangkan VITE_REACT_API_STORAGE_URL dipakai buat akses file atau gambar yang disimpan di direktori storage backend. Dengan naruh ini di .env, kita bisa panggil variabelnya lewat import.meta.env.VITE_REACT_API_URL atau import.meta.env.VITE_REACT_API_STORAGE_URL di file React, jadi nanti kalau mau ganti alamat server tinggal ubah di .env aja tanpa perlu utak-atik banyak file. api Folder api yang kita taruh di dalam folder src di proyek React (yang pakai Vite) biasanya dipakai buat nyimpen semua fungsi atau file yang berhubungan sama komunikasi ke backend atau API. Misalnya, di folder api ini kita bisa bikin file kayak auth.ts, user.ts, atau produk.ts yang isinya fungsi-fungsi buat ngirim request ke server, misalnya login, ambil data user, atau ambil daftar produk. Tujuannya biar kode kita lebih rapi dan terorganisir, jadi logika komunikasi ke server nggak nyampur sama komponen tampilan (UI). Jadi, tiap komponen cukup "minta data" dari folder api, dan nggak perlu tahu detail cara ambil datanya gimana. Kayak punya bagian khusus buat ngobrol sama server, biar semua rapi dan enak dikelola. components Folder components di dalam folder src di proyek React yang pakai Vite fungsinya buat nyimpen semua komponen UI yang kita bangun dan bisa dipakai ulang di berbagai bagian aplikasi. Komponen ini bisa berupa tombol, header, card, form, atau elemen-elemen kecil lainnya yang tampil di layar. Dengan memisahkannya ke dalam folder components, struktur proyek jadi lebih rapi dan modular, jadi kalau kita mau ubah tampilan tombol misalnya, tinggal edit satu file tanpa harus cari-cari di banyak tempat. Intinya, folder ini jadi tempat ngatur bagian-bagian kecil dari tampilan yang bisa disusun bareng untuk membentuk halaman yang utuh. context Folder context di dalam folder src di proyek React (yang pakai Vite) fungsinya buat nyimpen file-file yang berkaitan dengan manajemen state global pakai React Context API. Jadi kalau kita punya data atau state yang perlu diakses dari banyak komponen, misalnya data user yang sudah login, tema aplikasi (dark/light), atau status autentikasi, kita bisa simpan dan kelola datanya lewat Context. Dengan adanya folder context, kita bisa bikin file seperti AuthContext.tsx atau ThemeContext.tsx yang masing-masing isinya menyediakan Provider dan useContext supaya komponen lain bisa ikut "nebeng" data dari satu sumber. Jadi, folder ini membantu kita bikin manajemen state lebih terstruktur, konsisten, dan gampang di-maintain. hooks Folder hooks di dalam folder src di proyek React yang pakai Vite gunanya buat nyimpen custom hooks, yaitu fungsi-fungsi buatan sendiri yang memanfaatkan fitur React Hooks (kayak useState, useEffect, dll) untuk menangani logika tertentu yang bisa dipakai ulang di berbagai komponen. Misalnya, kita bisa bikin useAuth.ts buat ngecek status login, useFetch.ts buat ambil data dari API, atau useWindowSize.ts buat deteksi ukuran layar. Dengan naruh semua custom hooks di folder hooks, struktur proyek jadi lebih rapi, dan logika yang sering dipakai bisa ditulis sekali lalu dipanggil di mana pun dibutuhkan. Intinya, folder ini bantu kita pisahin logika dari tampilan supaya lebih modular dan mudah dirawat. pages Folder pages di dalam folder src di proyek React yang pakai Vite fungsinya buat nyimpen file-file komponen yang mewakili halaman utama dalam aplikasi, seperti halaman beranda (HomePage.tsx), login (LoginPage.tsx), atau profil (ProfilePage.tsx). Berbeda dari folder components yang isinya bagian-bagian kecil UI, folder pages biasanya berisi komponen tingkat tinggi yang menyusun berbagai komponen jadi satu tampilan halaman utuh. Folder ini juga sering dikaitkan langsung dengan routing (pakai React Router), jadi setiap file di pages biasanya cocok dengan satu URL di aplikasi. Dengan begitu, struktur aplikasi jadi lebih teratur dan gampang diatur kalau proyek makin besar. providers Folder providers di dalam folder src di proyek React yang pakai Vite biasanya dipakai buat nyimpen komponen-komponen provider yang membungkus aplikasi atau bagian tertentu dengan konteks khusus. Provider ini biasanya berisi komponen yang menggunakan React Context API, Redux Provider, Theme Provider, atau library lain yang butuh “membungkus” komponen supaya data atau fungsi tertentu bisa diakses turun-temurun oleh komponen-komponen di bawahnya. Misalnya, AuthProvider buat ngatur status login, atau ThemeProvider buat ngatur tema warna aplikasi. Dengan punya folder providers, kita bisa kelola dan pisahkan logika penyedia data global secara rapi dan terstruktur, jadi saat mau pakai atau update provider, gampang ditemukan dan di-maintain. routes Folder routes di dalam folder src di proyek React yang pakai Vite fungsinya buat ngatur semua konfigurasi routing atau jalur navigasi aplikasi. Di sini kita biasanya bikin file yang mendefinisikan bagaimana URL di aplikasi kita dipetakan ke komponen halaman tertentu, misalnya menentukan kalau path / tampil HomePage, /login tampil LoginPage, dan seterusnya. Dengan naruh semua aturan routing di folder routes, kode jadi lebih terorganisir dan terpisah dari logika UI. Jadi kalau mau nambah, ubah, atau cek navigasi aplikasi, kita tinggal buka folder ini tanpa harus nyari di berbagai file. Ini penting banget supaya aplikasi React kita gampang dikelola, apalagi kalau sudah besar dan punya banyak halaman. schemas Folder schemas di dalam folder src di proyek React yang pakai Vite biasanya dipakai buat nyimpen definisi struktur data atau aturan validasi yang digunakan di aplikasi. Misalnya, kita bisa bikin schema untuk validasi form dengan library seperti Yup atau Zod, di mana schema ini menjelaskan aturan seperti “email harus valid”, “password minimal 8 karakter”, atau “nama tidak boleh kosong”. Selain itu, folder schemas juga bisa berisi tipe data atau interface TypeScript yang mendeskripsikan bentuk data yang kita pakai, supaya kode lebih terstruktur dan aman dari kesalahan tipe data. Dengan punya folder schemas, kita bisa mengatur aturan dan tipe data di satu tempat khusus, bikin aplikasi lebih rapi dan gampang dipelihara. services Folder services di dalam folder src di proyek React yang pakai Vite fungsinya buat menyimpan logika bisnis dan fungsi-fungsi yang berhubungan dengan interaksi ke luar aplikasi, seperti komunikasi dengan API, pengolahan data, atau fitur khusus yang butuh dipisah dari komponen UI. Misalnya, di sini kita bisa bikin file untuk fungsi-fungsi yang handle request ke backend, seperti userService.ts yang isinya fungsi untuk login, register, atau ambil data user, atau paymentService.ts yang urus proses pembayaran atau piService.ts untuk mengakses axios. Dengan menaruh semua logika ini di folder services, kode jadi lebih terorganisir dan komponen UI bisa fokus hanya pada tampilan dan interaksi pengguna tanpa kebingungan dengan logika bisnis. Jadi, folder services bantu kita pisahkan tanggung jawab kode supaya aplikasi lebih modular dan gampang di-maintain. Beri file ini dan isi ini: VSCode - Axios types Folder types di dalam folder src di proyek React yang pakai Vite itu tempat kita nyimpen semua definisi tipe data atau interface TypeScript yang dipakai di seluruh aplikasi. Jadi kalau kita mau jelasin bentuk data, properti apa saja yang ada, atau tipe dari variabel tertentu, kita taruh di sini supaya kode lebih terstruktur dan gampang dipakai ulang. Dengan begitu, kita bisa lebih aman dan terhindar dari error tipe data karena semua tipe sudah didefinisikan dengan jelas dan bisa dipanggil di mana saja dalam proyek. Intinya, folder types bikin pengelolaan tipe data jadi rapi dan efisien. Contohnya seperti ini: VSCode - TypeScript utils Folder utils di dalam folder src di proyek React yang pakai Vite itu tempat kita nyimpen berbagai fungsi kecil atau helper yang bisa dipakai ulang di banyak bagian aplikasi. Misalnya, fungsi buat format tanggal, hitung sesuatu, atau ngecek validasi sederhana yang nggak spesifik ke satu fitur tertentu. Dengan naruh fungsi-fungsi ini di folder utils, kita jadi nggak perlu nulis ulang kode yang sama berkali-kali, dan struktur proyek jadi lebih bersih karena fungsi-fungsi bantuan ini terpisah dari logika utama aplikasi. Jadi, utils itu kayak kotak alat kecil yang selalu siap dipakai kapan pun dibutuhkan. Hasil Struktur Folder Setelah di Tambah VSCode - Complete Structure Pastikan Sudah Download Depedency Ini Setelah memasukkan kode ini ke package.json langsung saja jalankan perintah npm install "dependencies": { "@hookform/resolvers": "^5.0.1", "@tailwindcss/vite": "^4.1.4", "@tanstack/react-query": "^5.74.4", "axios": "^1.9.0", "date-fns": "^4.1.0", "react": "^19.1.0", "react-dom": "^19.1.0", "react-router-dom": "^7.5.2", "tailwindcss": "^4.1.4", "zod": "^3.24.3" }, @hookform/resolvers: Plugin yang menghubungkan library validasi eksternal (seperti Zod atau Yup) ke React Hook Form, supaya kita bisa validasi form dengan aturan yang lebih kompleks.@tailwindcss/vite: Plugin resmi Tailwind CSS buat integrasi dengan Vite. Ini bikin proses build dan hot reload Tailwind jadi lebih cepat dan lancar.@tanstack/react-query: Library buat manajemen data fetching dan caching di React. Ngebantu kita ambil data dari API tanpa ribet urus loading, error, atau re-fetch otomatis.axios: Library populer buat melakukan request HTTP (GET, POST, dll). Dipakai buat komunikasi antara frontend dan backend secara lebih simpel dibanding fetch.date-fns: Kumpulan fungsi JavaScript buat memanipulasi tanggal. Mirip kayak Moment.js, tapi lebih ringan dan modular.react: Library utama untuk bikin UI berbasis komponen. Semua proyek React pasti butuh ini.react-dom: Library yang ngurusin gimana komponen React dirender ke dalam DOM browser. Jadi pasangan utamanya react.react-router-dom: Library untuk navigasi dan routing di aplikasi React berbasis web. Ngebantu kita bikin banyak halaman dalam satu aplikasi SPA (Single Page Application).tailwindcss: Framework CSS utility-first yang bikin styling jadi cepat dan konsisten langsung dari HTML atau JSX tanpa harus nulis CSS panjang-panjang.zod: Library validasi dan parsing data yang mirip Yup, tapi lebih ketat dan cocok banget dipakai bareng TypeScript karena integrasi tipenya yang solid. Download Template HTML Shaynakit Shaynakit - Ngekos Template HTML Di tutorial kali ini, kita bakal pakai proyek dari Shaynakit buat ngubahnya ke React. Kabar baiknya, proyek ini gratis dan kodenya juga udah disediain. Jadi kamu bisa langsung pakai, atau modif-modif dikit biar sesuai sama kebutuhan. Nggak perlu mulai dari nol proses ngodingnya jadi jauh lebih gampang dan cepet. Shaynakit sendiri tuh semacam website yang nyediain kumpulan desain bareng sama kodenya. Ada yang gratis, ada juga yang premium. Tapi tenang aja, yang gratis juga nggak pelit-pelit banget kok biasanya cuma dibatesin di jumlah halamannya aja. Nah, kalau yang premium, tentu lebih lengkap dan komplit, semua bagian udah siap pakai. Cara donwloadnya kayak gini: Buka situs utama ShaynaKit di https://shaynakit.com/landing.Klik menu atau tombol Register atau langsung buka https://shaynakit.com/register untuk membuat akun terlebih dahulu.Setelah berhasil mendaftar dan login, buka halaman template kode yang akan digunakan di https://shaynakit.com/details/ngekos-find-house-details-bokking-success-html-tailwind-css-template.Klik tombol Download, lalu pada opsi yang tersedia, pilih Free Trial.Klik tombol Start Today untuk memulai akses gratis.Setelah itu, kembali ke halaman yang sama: https://shaynakit.com/details/ngekos-find-house-details-bokking-success-html-tailwind-css-template, dan klik tombol Download sekali lagi.File template code akan terunduh dalam format .zip.Simpan file .zip tersebut ke dalam folder lokal proyek Anda, misalnya ./source-code/ngekos.zip. Masukin Template ke React Kalau udah download selanjutnya kita masukin 1 file ke proyek React. Copy Gambar & Icon buat pakai gambar dan icon dari template HTML yang udah kamu download tadi, kamu cukup cari folder yang namanya assets , biasanya isinya gambar, icon, dan file pendukung lainnya. Nah, tinggal klik folder assets itu, tekan Ctrl + C buat copy, lalu buka proyek React kamu, masuk ke folder public, dan paste di situ (Ctrl + V). Hasil akhirnya nanti folder assets itu bakal nongkrong di dalam public, jadi kamu bisa akses gambarnya langsung dari path kayak /assets/nama-file.png . Letaknya kayak gini: VSCode - Moving the assets Folder Convert ke JSX Setelah kamu download file .zip-nya, jangan lupa klik kanan → Extract All, biar semua isi file-nya bisa kita akses. Nah, abis itu buka folder hasil ekstrak-nya pakai VSCode. Begitu masuk, cari file yang namanya index.html, buka, dan salin dari tag <main> yang pembuka sampai tag </main> yang penutup, pokoknya seluruh isi <main> itu. Setelah itu, tinggal paste ke website yang ada di bawah ini: Convert HTML To JSX Lalu tombol “Copy” berwarna biru di pojok atas kanan itu klik untuk mengcopy tag jsxnya, lalu kembali ke VSCode, paste ke dalam HomePage.tsx kayak gini: Result Paste Akses Browser Lalu jalankan perintah npm run dev Hasil Browser - Result Nah, kalau tampilannya sekarang kelihatan berantakan, tenang dulu, itu bukan berarti ada yang salah. Sebenarnya tampilannya cuma belum sempurna karena belum ada Swiper JS-nya yang dipakai buat fitur scroll-slide di template aslinya. Jadi wajar aja kalau elemen yang seharusnya bisa digeser (kayak carousel atau slider) sekarang malah numpuk ke bawah atau nggak bisa digeser sama sekali. Solusinya simpel: tinggal install Swiper JS untuk React dan terapin di komponen yang butuh scroll. Begitu Swiper-nya udah kepasang dan disetting, tampilannya bakal mirip persis sama template HTML awalnya. Jadi tenang, tinggal satu langkah lagi nih buat bikin semuanya kelihatan rapi dan interaktif. Dan agar kamu mahir pake Tailwind sekaranglah waktunya challenge coba install dan terapi Swiper JS nya biar React kamu makin gacor. Penutup Setelah kamu ikutin semua langkahnya, harapannya kamu nggak cuma berhasil bikin satu halaman web yang keren, tapi juga makin paham cara kerja proyek modern berbasis React, Tailwind CSS, dan TypeScript. Jangan takut buat eksplor lebih jauh, karena dari sini kamu udah punya pondasi kuat buat bangun proyek yang lebih besar dan kompleks ke depannya. Semangat ngoding, dan selamat mencoba! 🚀

Kalau kamu baru terjun ke dunia React atau lagi transisi dari class component ke function component, pasti sering banget ketemu sama dua hook populer ini: useState dan useEffect. Hooks adalah fitur di React yang memungkinkan kamu “menyisipkan” fitur-fitur React seperti state dan lifecycle ke dalam functional component. Sebelum ada hooks, fitur-fitur ini cuma bisa dipakai di class component. Kenapa penting? Functional component lebih simpel, ringan, dan mudah ditulis.Dengan hooks, kamu bisa mengatur state dan efek samping tanpa harus repot-repot bikin class. Artikel ini cocok banget buat kamu yang masih bingung: "Ini kapan sih pakai useState, dan kapan pakai useEffect?" Persiapan Proyek Sebelum kita mulai ngulik komponen di React, tentu kita perlu siapkan dulu proyek React nya, biar bisa langsung praktek dan nggak cuma teori doang. Syarat Awal Pastikan kamu udah install Node.js di komputer kamu, minimal versi 14 ya. Buat ngecek, buka terminal atau command prompt terus ketik: node -v npm -v Ini versi yg saya gunakan: Terminal Windows Kalau keluar versinya berarti udah oke, kalo belum, kamu bisa download Node.js dari situs resmi nodejs.org. Instalasi React dengan Next.js Nah, buat mulai proyek React, kita bakal pake Next.js. Next.js ini keren banget karena selain React biasa, dia juga punya fitur kayak routing otomatis dan server-side rendering yang bikin performa aplikasi makin ngebut. Buka terminal terus ketik perintah ini buat bikin proyek baru: npx create-next-app@latest bwa-react Jika ada konfirmasi seperti ini tekan Enter di keyboard Terminal: Install Next.js √ Would you like to use TypeScript? ... Pilih Yes√ Would you like to use ESLint? ... Pilih Yes√ Would you like to use Tailwind CSS? ... Pilh Yes√ Would you like your code inside a src/ directory? ... Pilih Yes√ Would you like to use App Router? (recommended) ... Pilih Yes√ Would you like to use Turbopack for next dev? ... Pilih Yes√ Would you like to customize the import alias (@/* by default)? ... Pilih No Terminal: Install Next.js Jika proses intallasi sudah selesai, masuk ke folder proyeknya: cd bwa-react Terus jalankan development server dengan perintah: npm run dev Terminal: Menjalankan Next.js Biasanya bakal keluar alamat http://localhost:3000 di terminal. Kamu buka alamat itu di browser, dan… voila! Kamu udah punya proyek React dengan Next.js siap pakai. Tampilan awal Next.js Kalau kamu pake bun, tinggal ganti aja npm jadi bun di perintah-perintah tadi. Apa Itu useState? useState adalah hook buat nyimpen dan mengatur data (state) di dalam komponen. Ibaratnya kayak laci pribadi komponen buat nyimpan data yang bisa berubah. Bentuk Umum: const [count, setCount] = useState<number>(0); count: nilai sekarang.setCount: fungsi buat update nilai count. Contoh Penggunaan: Counter Sederhana: 'use client'; import { useState } from 'react'; export default function Counter() { const [count, setCount] = useState<number>(0); return ( <div> <p>Jumlah: {count}</p> <button onClick={() => setCount(count + 1)}>Tambah</button> </div> ); } Form Input 'use client'; import { useState } from 'react'; export default function InputForm() { const [name, setName] = useState<string>(''); return ( <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Nama kamu" /> ); } Kapan pakai useState? Kalau kamu pengen nyimpan data yang: Bisa berubah (dinamis)Dibutuhkan saat render ulang Apa Itu useEffect? useEffect adalah hook buat ngejalanin efek samping (side effects). Maksudnya, hal-hal yang nggak langsung berhubungan sama proses render React, kayak: Ambil data dari APIManipulasi document.titleSimpan data ke localStorageTimer/intervalEvent listener Bentuk Umum: useEffect(() => { // efek samping di sini }, [dependency]); Jenis-jenis Dependensi: DependensiKapan JalanKosong []Cuma sekali, setelah komponen pertama kali muncul (mount)Tidak adaTiap kali renderAda nilai [x]Jalan kalau x berubah Contoh: Ubah Title Tab 'use client'; import { useEffect, useState } from 'react'; export default function TitleChanger() { const [count, setCount] = useState<number>(0); useEffect(() => { document.title = `Klik: ${count}`; }, [count]); return <button onClick={() => setCount(count + 1)}>Klik aku!</button>; } Kapan Pakai useState vs useEffect? SituasiPakai Hook Apa?PenjelasanNyimpen nilai input formuseStateKarena kita butuh update data saat user ketikFetch data dari APIuseEffectIni termasuk efek sampingHitung jumlah klik tomboluseStateKarena data klik disimpan di stateUpdate judul tab browseruseEffectKarena manipulasi DOM dilakukan di luar ReactSimpan data ke localStorage saat state berubahuseState + useEffectGunakan state buat nyimpen, efek untuk nyimpan ke localStorage Contoh Praktis: Simpan Nama ke localStorage Studi Kasus Kita mau: Ambil nama dari localStorage pas komponen pertama kali muncul.Update localStorage setiap kali nama berubah. Kode Lengkap: Buat file pada direktori src/components/InputName.tsx // src/components/InputName.tsx "use client"; import { useState, useEffect } from "react"; export default function UserForm() { const [name, setName] = useState<string>(""); // Ambil nama dari localStorage saat pertama render useEffect(() => { const savedName = localStorage.getItem("username"); if (savedName) { setName(savedName); } }, []); // Simpan ke localStorage setiap kali 'name' berubah useEffect(() => { localStorage.setItem("username", name); }, [name]); // Fungsi untuk menghapus nama dari localStorage dan state const handleDelete = () => { localStorage.removeItem("username"); setName(""); }; return ( <div className="flex flex-col w-3xs space-y-4"> <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Masukkan nama kamu" className="border px-4 py-2 rounded w-full" /> <button onClick={handleDelete} disabled={!name} className="ml-auto bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 transition-all duration-300 disabled:opacity-50" > Hapus Nama </button> </div> ); } 📌 Penjelasan: Saat pertama kali render, kita cek localStorage.Setelah user ngetik dan name berubah, kita simpan ulang ke localStorage.handleDelete() akan:Menghapus data dari localStorage dengan removeItem('username').Reset state name ke string kosong.Efek: input akan langsung kosong, dan tidak disimpan lagi ke localStorage sampai pengguna mengetik ulang. Buka page.tsx lalu ubah kode jadi seperti berikut: // scr/app/page.tsx import InputName from "@/components/InputName"; export default function Home() { return ( <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"> <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start"> <InputName /> </main> </div> ); } Hasilnya: Contoh kombinasi useEffect dan useState Kesalahan Umum yang Sering Dilakukan Belajar React Hooks itu seru, tapi banyak juga jebakan Batman-nya. Nah, biar kamu nggak jatuh ke lubang yang sama, ini dia beberapa kesalahan umum yang sering banget terjadi pas pakai useState dan useEffect: Lupa Menambahkan Dependency di useEffect Contoh salah: useEffect(() => { console.log(name); }, []); // name seharusnya masuk ke dependency Penjelasan: Kalau name nggak dimasukin ke dependency array, useEffect nggak bakal ngejalanin ulang efeknya meskipun name berubah. Ini bisa bikin bug yang susah dilacak. Solusi: useEffect(() => { console.log(name); }, [name]); Bikin Infinite Loop Tanpa Sadar Contoh salah: const [count, setCount] = useState(0); useEffect(() => { setCount(count + 1); // ini bakal terus-menerus nge-trigger re-render }, [count]); Penjelasan: Karena setCount di-trigger tiap kali count berubah, efek ini akan terus jalan, bikin infinite loop dan nge-crash aplikasi. Solusi: Hindari update state di dalam useEffect yang bergantung pada state itu sendiri, kecuali kamu tahu persis apa yang kamu lakukan (misalnya pakai kondisi). Naruh Logika Berat di useState const [result, setResult] = useState(() => { // ini dieksekusi setiap render return hitungLamaBanget(); }); Solusi: Kalau hitungannya berat, kamu bisa manfaatkan fungsi inisialisasi useState: const [result, setResult] = useState(() => hitungLamaBanget()); // cuma dieksekusi sekali Efek Samping Tanpa Cleanup Misalnya pakai timer atau event listener tapi nggak dibersihin. Contoh salah: useEffect(() => { window.addEventListener('resize', handleResize); }, []); Solusi: useEffect(() => { window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); }; }, []); Terlalu Banyak useEffect yang Redundant Kadang kita bisa gabungkan beberapa useEffect jadi satu daripada bikin 3 efek berbeda yang sebenarnya bisa dikelola bareng. Tips: Kelola efek yang berkaitan di satu useEffect, supaya lebih rapi dan terkontrol. Tips dan Best Practice ❌ Jangan pakai useEffect buat logika render biasa (misal if, map, dll).🔄 Hindari infinite loop: pastikan dependensinya benar.🧹 Pakai cleanup kalau ada efek yang harus dibersihkan (interval, event listener). Contoh Cleanup: useEffect(() => { const interval = setInterval(() => { console.log('Running...'); }, 1000); return () => { clearInterval(interval); }; }, []); Kesimpulan 🧠 useState: Buat nyimpen dan update data lokal di komponen.⚡ useEffect: Buat efek samping di luar React seperti API, localStorage, DOM.Kombinasikan keduanya buat bikin komponen interaktif dan dinamis. Kalau komponenmu butuh “ingat sesuatu” dan “ngelakuin sesuatu di luar React”, maka useState dan useEffect adalah senjata wajib kamu. 📚 Artikel Terkait Biar makin mantap belajar React, kamu bisa lanjut baca artikel-artikel berikut: Mengenal Komponen di React JS: Functional vs Class Pelajari perbedaan antara komponen class dan functional, serta kenapa sekarang banyak developer lebih memilih functional component + hooks!Cara Deploy Website Statis ke Vercel Lewat GitHub (Lengkap + Contoh) Setelah paham useState dan useEffect, saatnya publish proyek kamu ke internet. Artikel ini panduannya step-by-step! 🎓 Rekomendasi Kelas Gratis Mau langsung praktik dan bikin project beneran? Coba kelas gratis dari BuildWithAngga berikut: 🔗 Membuat Website Voucher Game dengan Terintegrasi API VocaGame Di kelas ini kamu bakal belajar cara ambil data dari API, pakai React Hooks (yes, termasuk useState dan useEffect!), dan bikin tampilan interaktif. Cocok banget buat pemula!

Kalau kamu sedang ingin membangun website modern untuk keperluan bisnis online, Next JS 15 adalah salah satu pilihan paling make sense di zaman sekarang. Kenapa? Karena framework ini dirancang bukan cuma untuk kemudahan pengembangan, tapi juga untuk performa dan visibilitas website kamu di mesin pencari seperti Google. Di era digital seperti sekarang, punya website aja gak cukup. Website kamu harus bisa ditemukan dengan mudah oleh calon pelanggan, apalagi kalau kamu jualan lewat landing page atau punya katalog produk online. Nah, di sinilah peran SEO (Search Engine Optimization) jadi sangat penting. Banyak bisnis gagal bersaing karena mereka fokus ke tampilan, tapi lupa optimasi struktur dan performa teknis yang disukai mesin pencari. Untungnya, Next JS datang membawa solusi lengkap: selain powerful buat developer, dia juga paunya fitur bawaan yang siap bantu kamu bersaing secara organik di Google. Tanpa perlu terlalu banyak konfigurasi ribet seperti zaman pakai framework lama, di Next JS semuanya sudah disiapkan: mulai dari struktur folder yang SEO-friendly, rendering strategi yang bisa disesuaikan, sampai dukungan built-in untuk metadata dan optimalisasi gambar. Semua ini bikin website kamu bisa lebih cepat di-load dan lebih mudah dipahami oleh crawler-nya Google. Next JS Punya Fitur-Fitur yang Memperkuat SEO Website Bisnis Salah satu hal keren dari Next JS adalah dia ngerti banget kebutuhan pebisnis online. Framework ini bukan cuma mikirin gimana developer bisa kerja cepat, tapi juga mikirin hasil akhirnya: website yang cepat, stabil, dan SEO-friendly. Misalnya, Next JS bisa membantu kita menerapkan teknik rendering yang sesuai dengan halaman yang kita buat. Untuk halaman produk atau landing page, kita bisa pakai static rendering supaya kecepatan maksimal dan bisa di-crawl dengan baik. Untuk halaman yang sering berubah datanya, kita bisa pakai server rendering atau ISR (Incremental Static Regeneration) supaya tetap optimal di mata mesin pencari. Selain itu, Next JS juga punya sistem penulisan metadata yang rapi. Kamu bisa atur title, description, dan tag lain secara fleksibel di setiap halaman. Ini penting banget buat SEO, karena search engine butuh informasi ini buat menampilkan konten kamu dengan baik di hasil pencarian. Dan masih banyak lagi fitur menarik lainnya yang akan kita pelajari bersama di artikel ini: mulai dari penggunaan image yang otomatis teroptimasi, struktur URL yang bersih, sampai integrasi dengan berbagai alat analitik. Kalau kamu serius ingin websitemu tampil di halaman pertama Google dan membantu bisnis makin dikenal orang, maka pelajari SEO lewat Next JS ini bisa jadi keputusan penting yang membuka banyak peluang baru. Yuk kita lanjut kae bagian berikutnya dan bahas satu per satu fitur yang bisa kamu manfaatkan. Tata Cara Menggunakan generateMetadata() untuk SEO pada Proyek Next JS Di Next JS 15 dengan App Router, pengaturan SEO seperti title dan description halaman sekarang jadi lebih rapi dan terstruktur. Semua itu bisa dilakukan dengan menggunakan fungsi generateMetadata() yang disediakan khusus untuk digunakan di setiap file page. Fungsi ini memungkinkan kita untuk mengatur metadata secara dinamis atau statis, tergantung dari jenis halaman dan kebutuhannya. Hal ini sangat berguna saat kita ingin mengoptimalkan SEO berdasarkan konten yang muncul di halaman tersebut, seperti judul artikel, nama produk, atau informasi kota tertentu. Berikut adalah contoh penggunaan generateMetadata() secara lengkap di halaman detail kota: // app/city/[slug]/page.tsx import { Metadata } from 'next' import { cities } from '@/data/cities.mock' type Props = { params: { slug: string } } export async function generateMetadata({ params }: Props): Promise<Metadata> { const city = cities.find((item) => item.slug === params.slug) if (!city) { return { title: 'City Not Found – Angga Office', description: 'Sorry, the city you are looking for does not exist.', } } return { title: `${city.name} Office Spaces – Angga Office`, description: `Explore premium office space and coworking in ${city.name}. Book your space today and grow your business with Angga Office.`, openGraph: { title: `${city.name} Office Spaces – Angga Office`, description: `Explore premium office space and coworking in ${city.name}.`, images: [ { url: city.thumbnail, width: 1200, height: 630, alt: `${city.name} Office`, }, ], }, } } export default function CityDetailPage({ params }: Props) { const city = cities.find((item) => item.slug === params.slug) if (!city) { return <div className="text-center py-20">City not found</div> } return ( <div className="max-w-4xl mx-auto py-10"> <h1 className="text-3xl font-bold mb-4">{city.name}</h1> <img src={city.thumbnail} alt={city.name} className="rounded-xl" /> <p className="mt-4 text-gray-600"> Discover the best office spaces available in {city.name}. Choose your ideal location and get started today. </p> </div> ) } Penjelasan singkatnya begini: kita memanfaatkan generateMetadata() untuk mengambil data berdasarkan params.slug, lalu mengembalikan objek metadata seperti title, description, dan openGraph. Dengan begini, setiap halaman kota punya metadata yang unik dan sesuai isi kontennya, yang tentunya sangat bagus untuk SEO. Oh ya, kalau kamu pakai Next Image dan punya thumbnail yang tajam dan cepat dimuat, itu juga bantu banget memperkuat nilai SEO dan user expeerience. Fitur ini bisa kamu terapkan di berbagai jenis halaman dinamis lain, seperti halaman produk, artikel blog, atau detail kursus. Jadi metadata kamu selalu relevan dan mendukung ranking pencarian organik. Tata Cara Menggunakan Open Graph (OG) untuk SEO pada Proyek Next JS Open Graph (OG) adalah standar metadata yang digunakan oleh media sosial seperti Facebook dan LinkedIn untuk menampilkan preview yang menarik saat halaman website kamu dibagikan. Nah, di Next JS 15 dengan App Router, kita bisa menyisipkan data OG ini langsung dari fungsi generateMetadata(). Cara penggunaannya hampir sama seperti metadata biasa, kita cukup tambahkan properti openGraph dalam return dari generateMetadata(). Biasanya OG berisi informasi seperti title, description, url, dan images. Berikut adalah contoh implementasi openGraph untuk halaman detail sebuah produk atau kota: // app/city/[slug]/page.tsx import { Metadata } from 'next' import { cities } from '@/data/cities.mock' type Props = { params: { slug: string } } export async function generateMetadata({ params }: Props): Promise<Metadata> { const city = cities.find((item) => item.slug === params.slug) if (!city) { return { title: 'City Not Found – Angga Office', description: 'The city you are looking for does not exist.', } } return { title: `${city.name} Office Spaces – Angga Office`, description: `Explore premium office spaces in ${city.name}. Boost your team's productivity today.`, openGraph: { title: `${city.name} Office Spaces – Angga Office`, description: `Explore premium office spaces in ${city.name}. Book your location today.`, url: `https://yourdomain.com/city/${city.slug}`, siteName: 'Angga Office', images: [ { url: city.thumbnail, width: 1200, height: 630, alt: `${city.name} Office Thumbnail`, }, ], locale: 'en_US', type: 'website', }, } } Dengan cara ini, saat pengguna share halaman tersebut di media sosial, akan muncul preview lengkap dengan gambar, judul, dan deskripsi yang sesuai — tidak cuma tampil teks acak dari halaman kamu. Ini sangat membantu meningkatkan engagemeent dari media sosial ke website kamu. Tata Cara Menambahkan Twitter Card Support untuk SEO pada Proyek Next JS Selain Open Graph, Twitter punya format sendiri untuk menampilkan preview saat link dibagikan, yaitu Twitter Card. Untungnya, Next JS juga mendukkung hal ini lewat properti twitter dalam fungsi generateMetadata(). Kamu bisa mengatur jenis kartu, gambar, dan keterangan yang akan muncul saat link halaman dibagikan di Twitter. Berikut contoh implementasinya: // app/city/[slug]/page.tsx import { Metadata } from 'next' import { cities } from '@/data/cities.mock' type Props = { params: { slug: string } } export async function generateMetadata({ params }: Props): Promise<Metadata> { const city = cities.find((item) => item.slug === params.slug) if (!city) { return { title: 'City Not Found – Angga Office', description: 'Sorry, city data is not available.', } } return { title: `${city.name} Office Spaces – Angga Office`, description: `Get access to professional office spaces in ${city.name} with top-class facilities.`, twitter: { card: 'summary_large_image', title: `${city.name} Office Spaces – Angga Office`, description: `Get access to premium coworking and office rentals in ${city.name}.`, site: '@AnggaOffice', creator: '@AnggaOfficial', images: [city.thumbnail], }, } } Dengan menambahkan dukungan Twitter Card, kamu memberikan kesan profesional dan siap bersaing di dunia digital. Ketika pengguna membagikan halaman kamu di Twitter, akan muncul gambar besar, judul, dan deskripsi yang kamu atur — bukan sekadar link polos. Dua kombinasi antara Open Graph dan Twitter Card ini merupakan strategi yang sangat kuat untuk meningkatkan klik dan daya tarik website kamu dari social media, yang tentunya sangat berpengaruh terhadap SEO dan traffic jangka panjang. Tata Cara Mengatur Sitemap dan robots.txt untuk SEO pada Proyek Next JS Supaya website kamu lebih cepat dikenali dan diindeks oleh Google maupun mesin pencari lainnya, kamu perlu menyiapkan dua hal penating: sitemap.xml dan robots.txt. Keduanya bekerja sama membantu crawler mesin pencari menavigasi struktur website kamu dengan benar dan efisien. Di Next JS, khususnya versi terbaru dengan App Router, kamu bisa menggunakan fitur bawaan untuk membuat file-file ini secara dinamis lewat app/ directory. Untuk membuat sitemap, kamu bisa membuat file sitemap.xml/route.ts di dalam folder app/. Ini akan menghasilkan endpoint /sitemap.xml secara otomatis. Kamu bisa buat list URL dari data statis atau dinamis, lalu tampilkan sebagai XML. Berikut contoh pengaturannya: // app/sitemap.xml/route.ts import { cities } from '@/data/cities.mock' export async function GET() { const baseUrl = '<https://buildwithangga.com>' const staticPages = ['', '/about', '/contact'].map((path) => { return `<url><loc>${baseUrl}${path}</loc></url>` }) const dynamicCityPages = cities.map((city) => { return `<url><loc>${baseUrl}/city/${city.slug}</loc></url>` }) const xml = ` <?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="<http://www.sitemaps.org/schemas/sitemap/0.9>"> ${staticPages.join('')} ${dynamicCityPages.join('')} </urlset> `.trim() return new Response(xml, { headers: { 'Content-Type': 'application/xml', }, }) } Dengan file ini, saat kamu buka https://yourdomain.com/sitemap.xml, akan muncul semua URL penting dalam format yang bisa dipahami Googlebot. Selanjutnya untuk robots.txt, kamu bisa buat file robots.txt/route.ts agar otomatis tersedia di URL /robots.txt. File ini memberi tahu crawler halaman mana yang boleh atau tidak boleh diakses. Berikut contohnya: // app/robots.txt/route.ts export async function GET() { const content = ` User-agent: * Allow: / Sitemap: <https://yourdomain.com/sitemap.xml> `.trim() return new Response(content, { headers: { 'Content-Type': 'text/plain', }, }) } Di sini, User-agent: * artinya aturaen ini berlaku untuk semua bot. Allow: / berarti semua halaman diizinkan untuk di-crawl. Baris terakhir menunjukkan lokasi sitemap agar bot bisa mengaksesnya dengan mudah. Kombinasi sitemap.xml dan robots.txt ini sangat penting untuk SEO teknikal. Google akan lebih cepat memahami halaman apa saja yang penting di website kamu, dan menghindari halaman yang tidak perlu, sehingga meningkatkan performa indexing dan ranking halamanmu di hasil pencarian. 10 Kesalahan yang Dapat Merusak SEO pada Proyek Next JS Meskipun Next JS punya fitur-fitur bawaan yang sangat mendukung SEO, tetap ada banyak kesalahan umum yang bisa bikin ranking website kamu jeblok di hasil pencarian. Di bawah ini adalah daftar kesalahan penting yang perlu kamu hindari, lengkap dengan contoh kasus nyata dalam proyek Next JS. Tidak Mengatur Metadata Secara Dinamis di Halaman Dinamis Banyak developer hanya fokus mengatur metadata di homepage atau halaman statis saja. Padahal, halaman dinamis seperti detail produk atau artikel juga butuh metadata yang unik agar bisa tampil optimal di hasil pencarian. // SALAH: Metadata tidak disesuaikan dengan data konten export const metadata = { title: 'Produk - My Store Angga', description: 'Detail produk di toko kami.', } // BENAR: Gunakan generateMetadata untuk metadata yang dinamis export async function generateMetadata({ params }) { const product = await getProduct(params.slug) return { title: `${product.name} - My Store`, description: product.description, } } Tidak Menggunakan Semantic HTML seperti , , , dan Penggunaan tag HTML biasa seperti <div> tanpa struktur yang jelas bisa menyulitkan mesin pencari memahami hierarki konten halaman kamu. // SALAH return ( <div> <div>Ini judul</div> <div>Konten utama</div> </div> ) // BENAR return ( <main> <header> <h1>Ini judul</h1> </header> <article> <p>Konten utama</p> </article> </main> ) Mengabaikan Alt Text pada Gambar Gambar tanpa alt membuat aksesibilitas berkurang dan SEO jadi turun karena mesin pencari tidak bisa memahami isi gambar. // SALAH <Image src="/product.jpg" width={500} height={300} /> // BENAR <Image src="/product.jpg" alt="Gambar produk A" width={500} height={300} /> Tidak Mengatur Robots.txt dan Sitemap.xml Tanpa dua file ini, crawler Google bisa kesulitan menjelajahi halaman penting, atau malah mengindeks halaman yang tidak perlu seperti /admin atau /checkout. // Sitemap dan robots telah dijelaskan di jawaban sebelumnya Menggunakan Client Component untuk Halaman Informasi Statis Client Component butuh JavaScrript untuk render halaman, yang bisa menunda proses indexing oleh mesin pencari. // SALAH 'use client' export default function AboutPage() { return <div>Tentang Kami</div> } // BENAR export default function AboutPage() { return <div>Tentang Kami</div> } Konten Halaman Muncul Terlambat karena Fetching di Client Kalau data penting seperti deskripsi produk diambil di client, mesin pencari bisa gagal membaca kontennya sebelum rendering selesai. // SALAH 'use client' useEffect(() => { fetch('/api/product').then(setData) }, []) // BENAR export async function generateMetadata() { const product = await getProduct() return { title: product.name } } Tidak Mengatur Canonical URL Tanpa canonical tag, halaman dengaan konten yang sama bisa dianggap sebagai duplicate content dan bikin ranking turun. // Contoh metadata dengan canonical export async function generateMetadata({ params }) { return { title: 'Detail Produk', alternates: { canonical: `https://yourdomain.com/product/${params.slug}`, }, } } Menggunakan Gambar dari Sumber Eksternal Tanpa Konfigurasi Kalau kamu pakai <Image> dari Next untuk gambar eksternal tanpa izin domain di next.config.js, gambar tidak akan muncul dan SEO jadi buruk. // next.config.js images: { domains: ['external-image.com'], } Struktur URL Tidak Konsisten dan Tidak Ramah Mesin Pencari Gunakan URL yang bersih dan deskriptif. Hindari penggunaan query string acak atau angka ID saja. // SALAH: /product?id=12345 // BENAR: /product/tas-kulit-original Tidak Menambahkan Social Sharing Metadata (OG & Twitter Card) Kalau metadata OG dan Twitter Card tidak tersedia, halaman kamu terlihat membosankan saat dibagikan di media sosial, dan itu bisa menurunkan CTR (click-through rate). export async function generateMetadata() { return { title: 'Kelas BWA Terbaik', openGraph: { title: 'Produk Terbaik', description: 'Dapatkan produk terbaik di toko kami.', images: ['/product.jpg'], }, twitter: { card: 'summary_large_image', title: 'Produk Terbaik', images: ['/product.jpg'], }, } } Dengan menghindari 10 kesalahan ini, kamu bisa memaksimalkan potensi SEO dari website Next JS kamu. Mesin pencari akan lebih mudah memahami, merayapi, dan menampilkan konten kamu di hasil pencarian yang tepat. Penutup dan Saran untuk Web Developer Pemula Hingga Expert Belajar Next JS untuk SEO memang bukan hal yang instan, tapi percayalah — ini investasi jangka panjang yang akan sangat menguntungkan. Dengan menguasai praktik-praktik SEO seperti metadata, Open Graph, Twitter Card, sitemap, robots.txt, hingga struktur konten yang ramah crawler, kamu tidak hanya menjadi developer yang bisa bikin website, tapi developer yang ngerti strategi bisnis digital. Untuk kamu yang masih pemula atau sudah menengah tapi ingin naik level jadi web developer expert, saran terbaiknya: belajarlah langsung dari mentor yang sudah berpengalaman dan pernah menjalankan proyek nyata. Di BuildWithAngga, kamu bisa belajar bareng mentor expert yang akan bimbing kamu step-by-step, bukan cuma teori tapi langsung praktik di proyek profesional. Beberapa benefit unggulan yang kamu bisa dapatkan: Belajar dari studi kasus nyata, bukan hanya dari dokumentasiKelas berkualitas tinggi dengan sistem pembelajaran fleksibelAkses seumur hidup ke materi dan update terbaruKomunitas aktif untuk diskusi dan portfolio reviewSertifikat yang bisa menunjang karir profesional dan freelance Dan yang paling penting: semua ini didesain untuk mempersiapkan kamu bekerja secara remote. Artinya kamu bisa kerja dari mana aja, gabung di perusahaan internasional, atau jadi freelancer yang dibayar mahal — asalkan kamu punya skill dan mindset yang benar. Yuk mulai upgrade dirimu hari ini. Jangan cuma jadi web developer biasa. Jadi developer yang dicari karena bisa bangun website yang cepat, scalable, dan siap masuk halaman satu Google. Belajar bareng mentor expert di BuildWithAngga sekarang dan siapkan diri kamu buat karir digital yang sukses. 🚀

Daftar Isi PendahuluanDownload Desain di ShaynakitDownload Source Code di Shaynakit (Disarankan Download Ketika Sudah Membaca/Praktek Semua Isi Artikelnya)Baca Desain DuluWarnaGambarIconPolaLogika AksiPindah HalamanJudulBagian-BagianPemanasanInstall Tailwind CSSImport Tailwind in your CSSStart using Tailwind in your HTMLStart the Tailwind CLI build processMenerapkanSet Up Desain MobileTopicsMost PopularPage SelanjutnyaPenutup Pendahuluan Kadang kamu suka mikir “Sudah/Mau praktek Tailwind CSS ah, sudah bisa sih gitu-gitu aja, tapi apa emang bener? masak sih enggak ada aturan yang bikin Tailwind CSS ini Sesuai di Kerjaan? ”Di latihan ini, kita gak mulai dari nol, desainnya udah ada, tinggal gimana caranya kamu “tantang” desain itu jadi halaman web beneran pakai Tailwind CSS. Anggap aja kayak lagi dapet puzzle yang gambarnya udah kelihatan di kotaknya. Tantangannya tinggal tantang dirimu nyusun potongan-potongan kecilnya (HTML + Tailwind class) biar pas dan hasil akhirnya mirip sama gambar aslinya. Tenang hasil benernya tetep saya kasih tau. Tujuan dari latihan ini adalah biar menantang kamu makin terbiasa slicing dari desain ke kode, memahami struktur layout, warna, hingga spacing, dan nerapin semuanya dengan utilitas Tailwind yang cepat dan efisien. Gak cuma teori, tapi langsung praktik biar skill-nya nempel. Siap? Yuk kita mulai nyusun puzzlenya! 🧩💻✨ Download Desain di Shaynakit Untuk mulai melakukan challenge desain Bookies Read Digital Book App, Kamu perlu mengunduh file desain Figma-nya terlebih dahulu. Desain ini tersedia secara gratis dalam mode Free Trial melalui situs ShaynaKit. Berikut adalah langkah-langkah lengkapnya: Buka situs utama ShaynaKit di https://shaynakit.com/landing.Klik menu atau tombol Register atau langsung buka https://shaynakit.com/register untuk membuat akun terlebih dahulu.Setelah berhasil mendaftar dan login, buka halaman desain yang akan digunakan di https://shaynakit.com/details/bookies-read-digital-book-app.Klik tombol Download, lalu pada opsi yang tersedia, pilih Free Trial.Klik tombol Start Today untuk memulai akses gratis.Setelah itu, kembali ke halaman yang sama: https://shaynakit.com/details/bookies-read-digital-book-app, dan klik tombol Download sekali lagi.File desain akan terunduh dalam format .fig, yaitu format asli file Figma.Simpan file .fig tersebut ke dalam folder lokal proyek Anda, misalnya ./figma/BookiesReadDigitalBookApp.fig. Download Source Code di Shaynakit (Disarankan Download Ketika Sudah Membaca/Praktek Semua Isi Artikelnya) Jadi Shaynakit udah nyiapin source code desainnya buat kita. Isinya macem-macem, ada icon, gambar, pokoknya semua yang kita butuhin buat ngebangun halaman nanti. Tapi nih ya, saran aku: lewatkan dulu bagian ini. Santai dulu, baca aja dulu semua artikelnya sampai beres biar gak kehilangan rasa challenge nya. Ibaratnya kayak dapet bahan masakan lengkap dari chef, tapi sebelum mulai masak, mending kita baca dulu resepnya sampai akhir biar gak asal campur dan hasilnya tetep enak pas disajiin. 😄 Kalau udah paham alurnya, baru deh balik lagi ke sini buat download source-nya. Nah, sekarang kita liat dulu gimana caranya ngedownload file-nya, jadi kayak gini caranya cukup ikutin langkah-langkah ini: Buka situs utamanya di sini: https://shaynakit.com/landing.Klik menu Register atau langsung aja meluncur ke https://shaynakit.com/register buat daftar akun dulu.Setelah berhasil daftar dan login, buka halaman template yang mau dipakai di sini: https://shaynakit.com/details/bookies-read-digital-html-tailwind-css-template.Klik tombol Download, lalu pilih opsi Free Trial.Lanjut klik Start Today buat mulai akses gratisnya.Setelah itu, balik lagi ke halaman template tadi dan klik tombol Download sekali lagi.File-nya bakal langsung keunduh dalam format .zip.Simpan file .zip itu ke folder lokal kamu, misalnya ke: ./source-code/Bookies.zip. Baca Desain Dulu Nah, setelah mendownload desain yang ada di Shaynakit, selanjutnya kita bakal nyoba baca desainnya, yaitu dimulai dari hal-hal dasar yang sering disepelekan tapi penting banget, kayak: Warna Grey Light (#F6F8FA) Warna yang satu ini dipakai buat background card. Kelihatannya sepele, tapi sebenarnya penting banget karena sering muncul juga di bagian-bagian lain desainnya. Jadi pas baca desain, jangan skip bagian ini ya, perhatiin bener-bener. Yuk, langsung kita lihat gambar di bawah ini: Hover Grey Light (#eaeef2) Warna yang ini emang nggak ada di desain aslinya, karena aku tambahin sendiri biar ada interaksi yang lebih hidup pas card-nya di-hover. Coba bayangin deh, waktu kursor nge-hover ke card terus background-nya berubah, otomatis kita bakal ngerasa, “Eh, ini bisa diklik nih!” Nah, efek-efek kecil kayak gini tuh ngaruh banget ke pengalaman pengguna. Dan karena warna ini frekuensi penggunaannya mirip kayak warna utama di atas, kita juga harus anggap ini penting. Jadi nanti, pas hover, background-nya bakal kayak gini: Grey(#90909E) Nah, kalau yang ini juga sama, sering banget dipakai di berbagai elemen. Jadi, pas baca desain, kita harus anggap ini penting juga. Jangan sampai kelewat, karena warna ini bantu ngejaga konsistensi dan nuansa keseluruhan desain. Warna kayak warna teks ini: Black(#35325E) Warna yang ini juga sama, sering banget kepake. Contohnya, bisa kamu lihat di teks yang tulisannya “Topics”. Karena sering muncul di halaman halaman, kita perlu perhatiin juga pas baca desainnya, biar nanti pas ngoding lebih gampang. Button Purple(#57549E) Warna ungu yang satu ini dipakai buat tombol. Nah, biasanya nih, warna tombol itu bakal konsisten dipakai di semua halaman yang punya tombol juga. Jadi penting banget buat diinget! Hal-hal kayak gini jangan disepelein, karena warna tombol itu ngaruh ke identitas dan interaksi di seluruh halaman. Jadi pastiin kamu catat warna ini sebagai salah satu warna utama yang harus diingat pas baca desain kayak gini: Border Grey(#E9E8ED) Warna Grey ini dipakai buat bagian cincin di tombol love, yang bikin tombolnya kelihatan punya outline atau border gitu. Nah, warna ini sering banget dipake juga buat tombol-tombol yang isinya cuma icon, kayak gambar di bawah ini kalau pagenya membesar atau kamu tambahin biar menjadikan brand website kamu yang konsisten. Karena sering muncul di elemen kecil tapi penting, kita juga harus anggap warna ini penting pas baca desain. Jangan sampai kelewat ya! Gambar Nah, kalau urusan gambar sih simpel aja. Intinya, kalau dia bukan icon, ya berarti itu gambar. Sesimpel itu. 😄 Contohnya nih, yang kayak gini yang disebut gambar: Icon Sekarang lanjut ke icon. Kalau icon itu identik sama yang kecil-kecil, bentuknya unik-unik, dan biasanya dipakai buat bantuin komunikasi visual, kayak nunjukin aksi atau makna tertentu. Ya semacam logo love, panah, bintang, setting, dan teman-temannya gitu lah. 😄 Biasanya juga ukurannya kecil, tapi perannya gede banget buat ngarahin atau ngasih kesan interaktif ke user kayak ini: Pola Selanjutnya kita bahas pola nih, ini juga penting banget buat kamu perhatiin. Kalau aku sih, pola ini kayak trik rahasia supaya kode kamu nanti jadi gampang dibaca dan rapi dari awal. Misalnya nih, kamu punya banyak card yang jarak antar card-nya sama rata. Nah, kalau kamu perhatiin pola ini dari awal, pas nanti pakai Tailwind CSS, tinggal kasih utility kayak flex sama gap-[…], beres deh! Jarak antar card langsung rapi dan konsisten tanpa ribet. Ini gak cuma bikin hidup kamu lebih gampang, tapi juga bikin kolaborasi sama tim jadi mulus karena kode kamu jadi lebih terstruktur dan “advance”. Kalau kamu baca di desain, ini yang termasuk pola: Logika Aksi Nah, untuk bagian ini, kita juga harus jeli baca desain dan mulai mikir, “Ini kira-kira butuh JavaScript atau enggak ya buat interaksinya?” Biar dari awal kita jelas, mana yang harus pakai JS dan mana yang cukup pakai Tailwind CSS doang. Nah, di bawah ini contohnya: Gambar pertama itu JS-nya dipakai buat bikin scroll horizontal yang mulus banget, jadi pengguna bisa geser-geser dengan nyaman. Kalau gambar kedua, JS-nya dipakai supaya pas diklik, isi warnanya di icon love-nya berubah, jadi keliatan interaktif dan responsif. Jadi, bagian-bagian kayak gini wajib kita perhatiin biar kode kita nggak asal comot tapi memang pas dan tepat fungsi. Pindah Halaman Nah, untuk yang ini, kita juga harus peka pas baca desain “Mana sih elemen yang bisa bikin kita pindah halaman kalau diklik?” Ini penting banget, soalnya nanti tag HTML-nya beda, gak cuma section atau div biasa, tapi harus pakai tag <a>. Tag <a> ini fungsinya buat link, alias buat pindah halaman. Jadi, kalau ada elemen yang fungsinya bawa kita ke halaman lain, wajib pakai ini. Nah, contoh elemen yang biasanya dipakai buat pindah halaman bisa kamu lihat di gambar bawah ini: Judul Nah, yang ini juga penting kita perhatiin, yaitu mana yang judul, dan mana yang deskripsi. Intinya sih, selain judul, pasti deskripsi yang menjelasin lebih detail. Nanti pas ngoding, kita bakal pakai tag <h> buat judul, dan tag <p> buat paragraf atau deskripsi. Dengan baca desain dari awal kayak gini, kode kita jadi lebih semantic dan pastinya juga ramah buat SEO. Jadi, selain enak buat developer, juga bikin website kita lebih gampang ditemukan di mesin pencari. Contohnya judul kayak ini semua: Bagian-Bagian Nah, ini juga penting banget buat kita perhatiin di desain, karena ini nunjukin bagian-bagian apa aja yang ada di satu halaman. Setiap bagian nanti kita bungkus pakai tag <section>. Tujuannya simpel: biar kodenya lebih mudah dibaca, lebih semantic, dan pastinya lebih SEO-friendly juga. Jadi, selain rapi, struktur halaman kita juga jadi jelas dan gampang dipahami baik oleh developer maupun mesin pencari. Mantap kan. Topics Di halaman pertama, ternyata ini bisa dibilang sebagai satu bagian yang utuh, karena terdiri dari satu judul utama yang paling menonjol jadi bakal kita bungkus pake section, kayak gini nih: Most Popular Terus, lanjut ke bagian Most Popular juga, karena posisinya setara sama bagian Topics. Jadi dua-duanya kita anggap sebagai bagian penting yang terpisah dalam halaman ini. Pemanasan Sekarang kita mulai masuk ke tahap ngoding nih. Tapi sebelum langsung tancap gas, kita pemanasan dulu ya, kayak stretching sebelum lari. Di sini kita bakal download dulu kebutuhan dasar buat ngoding pake Tailwind CSS. Ibaratnya, ini tuh kayak nyiapin kompor dan alat masak sebelum mulai masak. Jadi, langkah-langkah awalnya kira-kira kayak gini nih: Install Tailwind CSS Jalankan kode ini npm install tailwindcss @tailwindcss/cli Perintah npm install tailwindcss @tailwindcss/cli ini buat install Tailwind CSS sama tool CLI-nya di proyek kamu. Jadi, Tailwind CSS itu framework yang bikin styling lebih gampang pakai kelas-kelas siap pakai, terus CLI-nya yang ngebantu nge-compile file CSS biar siap dipakai di web. Intinya, ini langkah pertama supaya kamu bisa mulai ngoding pake Tailwind dengan lancar dan simpel. Import Tailwind in your CSS Lanjutin ini src/input.css @import "tailwindcss"; Kalau @import "tailwindcss"; ini fungsinya buat masukin semua style bawaan Tailwind ke file CSS kamu. Jadi nanti kamu bisa langsung pakai semua utility class yang disediain Tailwind tanpa harus nulis CSS dari nol. Simple banget, tinggal panggil ini di file utama CSS kamu, terus tinggal mulai styling! Start using Tailwind in your HTML lanjutin ini src/index.html <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./output.css" rel="stylesheet"> </head> <body> <h1 class="text-2xl font-extrabold"> BuildWithAngga </h1> </body> </html> Disini Tailwind udah siap pakai. Start the Tailwind CLI build process Lanjutin ini npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch ini buat ngejalanin Tailwind CLI supaya dia ngubah file CSS kamu yang ada di input.css jadi file siap pakai di output.css. Kalau ada perubahan di input.css, karena ada --watch, proses kompilasi bakal jalan terus-menerus otomatis tanpa kamu harus jalanin perintah lagi. Jadi kamu bisa langsung lihat perubahan di browser waktu kamu ngoding. Menerapkan Kalau Tailwind CSS-nya udah beres kita setup, sekarang saatnya kita masuk ke bagian seru, nerapin desain ke dalam kode. Ibaratnya, alat tempur udah siap, sekarang kita mulai ngerakit satu per satu elemennya sesuai blueprint. Yuk, mari kita gas pelan-pelan tapi pasti! 💻🔥 Set Up Desain Mobile Kode Saya <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content="" /> <meta name="theme-color" content="#1B4DFF" /> <!-- Favicon --> <link rel="icon" href="./assets/images/logos/company.svg" /> <link rel="apple-touch-icon" href="./assets/images/logos/company.svg" /> <!-- Preload key resources --> <link rel="preconnect" href="<https://fonts.googleapis.com>" /> <link rel="preconnect" href="<https://fonts.gstatic.com>" crossorigin /> <link rel="preconnect" href="<https://cdn.jsdelivr.net>" crossorigin /> <!-- Stylesheets --> <link href="./output.css" rel="stylesheet" /> <link href="<https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap>" rel="stylesheet" /> <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css>" /> <title>Bookies | Home</title> </head> <body> <main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen pt-[40px] pb-[43px] flex flex-col gap-[30px] bg-white"> </main> <script src="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js>"></script> <script src="./js/swiper.js"></script> </body> </html> Alasannya yaitu : Bagian <link href="<https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap>" rel="stylesheet" /> berfungsi untuk memuat font Poppins dari Google Fonts dengan berbagai tingkat ketebalan, supaya tampilan teks di halaman lebih keren dan konsisten; link stylesheet Swiper di <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css>" /> buat styling slider agar tampilannya rapi dan fungsional; sedangkan <title>Bookies | Home</title> adalah judul halaman yang muncul di tab browser. Di bagian <main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen pt-[40px] pb-[43px] flex flex-col gap-[30px] bg-white"> ini adalah wadah utama halaman dengan styling layout responsif dan rapi untuk versi mobile, jadi versi mobile itu max 640px, lalu di bawah ada dua script yaitu Swiper JS dari CDN yaitu <script src="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js>"></script> dan file lokal swiper.js yang berisi konfigurasi slider agar interaktif. @import "tailwindcss"; body { font-family: "Poppins"; background-color: #DAE1E9; } @theme { --color-bookies-grey-light: #F6F8FA; --color-bookies-hover-grey-light: #eaeef2; --color-bookies-grey: #90909E; --color-bookies-black: #35325E; --color-bookies-button-purple: #57549E; --color-bookies-border-grey: #E9E8ED; } Alasannya yaitu : Di bagian ini saya bikin konfigurasi awal buat warna dan font biar bisa dipakai konsisten di seluruh halaman. Nah, untuk tema warna itu saya ambil dari yang kita perhatiin di desain, semua warna penting yang perlu diingat saya tulis lengkap di sini supaya gampang pas dipakai atau nanti kalau mau diubah-ubah juga nggak ribet. Jadi intinya, ini jadi semacam “bank warna dan font” yang bikin styling lebih teratur dan efisien. Coba Kamu Coba dulu jangan langsung lihat kode saya, coba bikin sendiri dulu buat latihan challenge-nya. Kalau kamu udah mentok atau merasa udah kelar, baru deh intip kode saya. Dengan cara ini, kamu bisa tahu seberapa jago skill slicing kamu, plus tekanan dari challenge-nya bakal bikin pemahaman Tailwind CSS kamu makin naik level. Topics Kode Saya <section id="Topics" class="relative flex flex-col gap-3"> <h2 class="text-xl leading-[30px] text-bookies-black font-medium px-6">Topics</h2> <div class="Swiper w-full overflow-x-hidden"> <div class="swiper-wrapper py-[3px] "> <div class="swiper-slide !w-fit"> <a href="details.html"> <div class="flex flex-col gap-[35px] w-[138px] p-[18px] rounded-[25px] bg-[#8EC9F5] hover:ring-2 hover:ring-offset-1 hover:ring-[#80b2d9] transition-all duration-300"> <div class="rounded-full p-[11px] shrink-0 bg-[#C5E5FF] w-fit"> <img src="assets/images/icons/award.svg" alt="icon" class="size-6 shrink-0"> </div> <div class="flex flex-col gap-[6px]"> <h3 class="line-clamp-2 hover:line-clamp-none font-medium text-sm leading-[21px] text-bookies-black">My Self Improvement</h3> <p class="text-[10px] leading-[15px] text-[#3C6A8C]">84 books</p> </div> </div> </a> </div> <div class="swiper-slide !w-fit"> <a href="details.html"> <div class="flex flex-col gap-[35px] w-[138px] p-[18px] rounded-[25px] bg-[#ADAEFF] hover:ring-2 hover:ring-offset-1 hover:ring-[#9b9de6] transition-all duration-300"> <div class="rounded-full p-[11px] shrink-0 bg-[#D8D8FF] w-fit"> <img src="assets/images/icons/trending-up.svg" alt="icon" class="size-6 shrink-0"> </div> <div class="flex flex-col gap-[6px]"> <h3 class="line-clamp-2 hover:line-clamp-none font-medium text-sm leading-[21px] text-bookies-black">Business Education</h3> <p class="text-[10px] leading-[15px] text-[#3C6A8C]">12 books</p> </div> </div> </a> </div> <div class="swiper-slide !w-fit"> <a href="details.html"> <div class="flex flex-col gap-[35px] w-[138px] p-[18px] rounded-[25px] bg-[#FDEBEA] hover:ring-2 hover:ring-offset-1 hover:ring-[#e3d4d2] transition-all duration-300"> <div class="rounded-full p-[11px] shrink-0 bg-[#FFF8F8] w-fit"> <img src="assets/images/icons/star.svg" alt="icon" class="size-6 shrink-0"> </div> <div class="flex flex-col gap-[6px]"> <h3 class="line-clamp-2 hover:line-clamp-none font-medium text-sm leading-[21px] text-bookies-black">Non-Fiction Stories</h3> <p class="text-[10px] leading-[15px] text-[#3C6A8C]">5 books</p> </div> </div> </a> </div> </div> </div> </section> Alasannya yaitu : Saya pakai <section> karena saya yakin ini adalah bagian yang bisa berdiri sendiri, dan supaya gampang dikenali, saya kasih ID yang konsisten dan jelas. Untuk kelas swiper, itu memang bawaan dari Swiper JS, jadi saya pilih cara simpel pakai class bawaan itu supaya lebih mudah. Kalau kamu punya cara lain, silakan aja, nggak masalah. Struktur tagnya juga saya jaga rapi dan konsisten, misalnya semua judul saya pakai <h3>, terus yang bisa klik dan pindah halaman saya kasih tag <a>, paragraf saya tempatkan di <p>, dan icon saya beri kelas shrink-0 supaya ukurannya tetap pas dan nggak berantakan saat layar hape diperkecil. js/swiper.js var categoriesSwiper = new Swiper(".Swiper", { slidesPerView: "auto", spaceBetween: 16, slidesOffsetAfter: 24, slidesOffsetBefore: 24, }); Alasannya yaitu : Kalau yang ini kode JS-nya, fungsinya buat ngejalanin swiper biar slider-nya bisa swipe dengan mulus. Kalau kamu perhatiin, di kodenya itu ada pengaturan buat kasih celah kosong kiri dan kanan sebesar 24px, dan jarak antar cardnya 16px. Semua setting ini diambil dari elemen HTML yang punya class swiper, jadi nanti spacing-nya pas dan rapi sesuai desain. Coba Kamu Coba dulu jangan langsung lihat kode saya, coba bikin sendiri dulu buat latihan challenge-nya. Kalau kamu udah mentok atau merasa udah kelar, baru deh intip kode saya. Dengan cara ini, kamu bisa tahu seberapa jago skill slicing kamu, plus tekanan dari challenge-nya bakal bikin pemahaman Tailwind CSS kamu makin naik level. Most Popular Kode Saya <section id="MostPopular" class="flex flex-col gap-3 px-4"> <h2 class="text-xl leading-[30px] text-bookies-black font-medium">Most Popular</h2> <div class="flex flex-col gap-4"> <a href="details.html"> <div class="card rounded-[25px] p-4 flex items-end justify-between bg-bookies-grey-light hover:bg-bookies-hover-grey-light transition-all duration-300"> <div class="flex items-center gap-4"> <div class="p-1 rounded-[13px] w-[100px] h-[130px] bg-white shrink-0"> <div class="flex items-center justify-center rounded-[13px] overflow-hidden"> <img src="assets/images/thumbnails/most-popular-1.png" alt="thumbnails" class="w-full h-full object-cover"> </div> </div> <div class="flex flex-col gap-2"> <h3 class="font-medium text-bookies-black">Lamp of Brightnes Real World</h3> <p class="text-sm leading-[21px] text-bookies-grey">Growth Business</p> </div> </div> <button type="button" class="cursor-pointer"> <div class="size-[35px] shrink-0 rounded-full bg-white flex justify-center items-center"> <img src="assets/images/icons/love.svg" alt="icon" class="size-4"> </div> </button> </div> </a> <a href="details.html"> <div class="card rounded-[25px] p-4 flex items-end justify-between bg-bookies-grey-light hover:bg-bookies-hover-grey-light transition-all duration-300"> <div class="flex items-center gap-4"> <div class="p-1 rounded-[13px] w-[100px] h-[130px] bg-white shrink-0"> <div class="flex items-center justify-center rounded-[13px] overflow-hidden"> <img src="assets/images/thumbnails/most-popular-2.png" alt="thumbnails" class="w-full h-full object-cover"> </div> </div> <div class="flex flex-col gap-2"> <h3 class="font-medium text-bookies-black">Art of Gathering Do Meeting</h3> <p class="text-sm leading-[21px] text-bookies-grey">Team Product</p> </div> </div> <button type="button" class="cursor-pointer"> <div class="size-[35px] shrink-0 rounded-full bg-white flex justify-center items-center"> <img src="assets/images/icons/love.svg" alt="icon" class="size-4"> </div> </button> </div> </a> <a href="details.html"> <div class="card rounded-[25px] p-4 flex items-end justify-between bg-bookies-grey-light hover:bg-bookies-hover-grey-light transition-all duration-300"> <div class="flex items-center gap-4"> <div class="p-1 rounded-[13px] w-[100px] h-[130px] bg-white shrink-0"> <div class="flex items-center justify-center rounded-[13px] overflow-hidden"> <img src="assets/images/thumbnails/most-popular-3.png" alt="thumbnails" class="w-full h-full object-cover"> </div> </div> <div class="flex flex-col gap-2"> <h3 class="font-medium text-bookies-black">Tiger In The Garden For Eating</h3> <p class="text-sm leading-[21px] text-bookies-grey">Children Story</p> </div> </div> <button type="button" class="cursor-pointer"> <div class="size-[35px] shrink-0 rounded-full bg-white flex justify-center items-center"> <img src="assets/images/icons/love.svg" alt="icon" class="size-4"> </div> </button> </div> </a> </div> </section> Alasannya yaitu : Yang ini juga sama, aku coba terapkan judulnya pakai tag yang tepat biar semantik dan gampang dipahami, terus tombol lovenya aku kasih tag button karena dia ada logika interaksi, jadi memang pas pakai button. Di situ juga aku pakai h2 buat judul utama dan h3 buat sub judulnya. Nah, karena card ini bisa diklik buat pindah ke halaman detail, aku bungkus semuanya pakai tag a supaya fungsinya sebagai link jelas dan sesuai standar. Coba Kamu Coba dulu jangan langsung lihat kode saya, coba bikin sendiri dulu buat latihan challenge-nya. Kalau kamu udah mentok atau merasa udah kelar, baru deh intip kode saya. Dengan cara ini, kamu bisa tahu seberapa jago skill slicing kamu, plus tekanan dari challenge-nya bakal bikin pemahaman Tailwind CSS kamu makin naik level. Page Selanjutnya Untuk halaman selanjutnya, giliran kamu yang ambil alih! Setelah bareng-bareng kita ngebedah desain dan ngoding bareng, sekarang aku kasih kamu challenge yang sedikit lebih naik level. Kali ini kamu bakal eksplorasi sendiri, tanpa panduan langsung dari aku. Tapi tenang, kamu gak bener-bener sendirian kok, source code-nya udah aku siapin dan bisa kamu temuin di bab “Download Source Code di Shaynakit (Disarankan Download Ketika Sudah Membaca/Praktek Semua Isi Artikelnya)” (ingat, disarankan download-nya setelah baca/praktek semua isi artikelnya ya). Anggap aja ini kayak lepas roda bantu, udah waktunya kamu ngebut sendiri! Selamat eksplorasi, dan jangan takut buat eksperimen. Penutup Nah, sampai sini dulu perjalanan kita dari liat-liat desain, siapin alat tempur (alias Tailwind CSS), sampai akhirnya nyusun kode kayak nyusun lego sesuai blueprint-nya. Anggap aja tadi kita lagi masak bareng, awalnya kita baca resep dulu (desainnya), terus belanja bahan-bahannya (install Tailwind), baru deh kita mulai masak step by step (ngoding). Dan sekarang, menunya udah jadi! 🍽️ Selanjutnya tinggal kamu eksplorasi sendiri: tambahin bumbu, kreasikan gaya, atau bahkan bikin resep (desain) versi kamu sendiri. Intinya, makin sering latihan, makin jago juga kamu nanti. Sampai jumpa di masakan alias project berikutnya. Selamat ngoding, chef frontend! 👨‍🍳👩‍🍳✨

Jika kamu baru mulai belajar React JS, kamu pasti akan sering mendengar istilah komponen. Komponen adalah bagian paling dasar dan penting dalam membangun antarmuka pengguna (UI) di React. Bisa dibilang, seluruh aplikasi React adalah kumpulan dari banyak komponen yang bekerja bersama-sama. Nah, di React sendiri ada dua cara utama untuk membuat komponen: Functional Component dan Class Component. Keduanya bisa digunakan untuk tujuan yang sama, tapi punya gaya penulisan, fitur, dan cara kerja yang sedikit berbeda. Pada awalnya, Class Component dianggap lebih powerful karena bisa mengelola state dan menggunakan lifecycle methods. Tapi sejak diperkenalkannya React Hooks pada versi 16.8, Functional Component pun jadi sangat fleksibel—bahkan kini lebih direkomendasikan dalam banyak kasus. Di artikel ini, kita akan: Mengenal kedua jenis komponen dengan penjelasan dan contoh kode.Membahas perbedaan utama antara Functional dan Class Component.Menjelaskan kesalahan umum yang sering terjadi saat menggunakannya.Memberikan beberapa best practice agar kamu bisa menulis komponen React dengan lebih baik. Jadi, kalau kamu masih bingung: “Harus pakai yang mana, Functional atau Class?”, tenang… kita bahas satu per satu dengan contoh nyata. Persiapan Proyek dan Cara Instalasi Sebelum kita mulai ngulik komponen di React, tentu kita perlu siapkan dulu proyek React nya, biar bisa langsung praktek dan nggak cuma teori doang. Syarat Awal Pastikan kamu udah install Node.js di komputer kamu, minimal versi 14 ya. Buat ngecek, buka terminal atau command prompt terus ketik: node -v npm -v Ini versi yg saya gunakan: Terminal Windows Kalau keluar versinya berarti udah oke, kalo belum, kamu bisa download Node.js dari situs resmi nodejs.org. Instalasi React dengan Next.js Nah, buat mulai proyek React, kita bakal pake Next.js. Next.js ini keren banget karena selain React biasa, dia juga punya fitur kayak routing otomatis dan server-side rendering yang bikin performa aplikasi makin ngebut. Buka terminal terus ketik perintah ini buat bikin proyek baru: npx create-next-app@latest bwa-react Jika ada konfirmasi seperti ini tekan Enter di keyboard Terminal: Install Next.js √ Would you like to use TypeScript? ... Pilih Yes√ Would you like to use ESLint? ... Pilih Yes√ Would you like to use Tailwind CSS? ... Pilh Yes√ Would you like your code inside a src/ directory? ... Pilih Yes√ Would you like to use App Router? (recommended) ... Pilih Yes√ Would you like to use Turbopack for next dev? ... Pilih Yes√ Would you like to customize the import alias (@/* by default)? ... Pilih No Terminal: Install Next.js Jika proses intallasi sudah selesai, masuk ke folder proyeknya: cd bwa-react Terus jalankan development server dengan perintah: npm run dev Terminal: Menjalankan Next.js Biasanya bakal keluar alamat http://localhost:3000 di terminal. Kamu buka alamat itu di browser, dan… voila! Kamu udah punya proyek React dengan Next.js siap pakai. Tampilan awal Next.js Kalau kamu pake bun, tinggal ganti aja npm jadi bun di perintah-perintah tadi. Mengenal Komponen di React Oke, sekarang saatnya masuk ke inti dari pembahasan kita: komponen. Jadi, di React, semua hal yang tampil di layar itu sebenernya dibangun dari komponen. Mulai dari tombol, teks, gambar, sampai halaman penuh semuanya komponen. Apa itu Komponen? Komponen itu bisa dibilang kayak "blok bangunan" dari UI aplikasi kita. Dia bisa dipake ulang, bisa dikasih data, dan bisa saling terhubung satu sama lain. Ibaratnya kayak LEGO, kamu gabungin banyak potongan kecil jadi satu bentuk utuh. Ada dua jenis utama komponen di React: Functional Component (alias komponen fungsi)Class Component (alias komponen kelas) Keduanya bisa dipake buat hal yang sama, tapi punya gaya nulis yang beda dan cara kerja yang sedikit… ya beda dikit lah. Functional Component Functional Component ditulis sebagai fungsi JavaScript biasa. Sejak adanya Hooks, Functional Component bisa ngelakuin hampir semua hal yang dulu cuma bisa di Class Component. Contoh sederhana: // components/HelloFunctional.tsx type HelloProps = { name: string; }; function HelloFunctional(props: HelloProps) { return <h1>Halo, {props.name}!</h1>; } export default HelloFunctional; Atau bisa juga pake arrow function (lebih modern): // components/HelloFunctionalArrow.tsx type HelloProps = { name: string; }; const HelloFunctional: React.FC<HelloProps> = ({ name }) => { return <h1>Halo, {name}!</h1>; }; export default HelloFunctional; Class Component Dulu, sebelum Hooks muncul, kalo kamu mau pake state atau lifecycle method, kamu harus pake Class Component. Contoh: // components/HelloClass.tsx import { Component } from 'react'; type HelloProps = { name: string; }; class HelloClass extends Component<HelloProps> { render() { return <h1>Halo, {this.props.name}!</h1>; } } export default HelloClass; Tapi sekarang, Class Component udah jarang dipake di proyek baru. Bukan berarti dilarang ya, cuma tren-nya udah beralih ke Functional Component. Perbandingan Singkat FiturFunctional ComponentClass ComponentPenulisanLebih ringkas & simpleLebih verboseState & lifecyclePakai HooksPakai this.state & this.setStateKode reuseLebih mudah dengan HooksLebih terbatasPopularitas sekarangSangat direkomendasikanMasih dipakai di proyek lamaTabel perbandingan functional component dan class component Masih bingung pilih yang mana? Tenang, kita bakal bahas lebih lanjut soal perbedaan dan kapan sebaiknya pake yang mana. Perbedaan Utama Functional vs Class Component Meski sama-sama bisa dipake buat bikin tampilan, ada beberapa perbedaan penting antara Functional Component dan Class Component. Biar nggak bingung, kita bahas satu-satu ya. Penulisan (Sintaks) Functional Component itu lebih ringkas. Cukup nulis fungsi, langsung return elemen JSX. // Functional const Hello = () => <h1>Hello, World!</h1>; Bandingin sama Class Component: // Class class Hello extends React.Component { render() { return <h1>Hello, World!</h1>; } } Liat kan? Class Component butuh lebih banyak baris buat hal yang sebenernya sama aja. Mengelola State Functional Component sekarang udah bisa pake Hooks buat ngatur state. import { useState } from 'react'; const Counter = () => { const [count, setCount] = useState(0); return ( <div> <p>Jumlah: {count}</p> <button onClick={() => setCount(count + 1)}>Tambah</button> </div> ); }; export default Counter; Dulu (dan masih bisa), kalo mau pake state harus pake Class Component: // components/CounterClass.tsx import { Component } from 'react'; type CounterState = { count: number; }; class CounterClass extends Component<{}, CounterState> { constructor(props: {}) { super(props); this.state = { count: 0 }; } handleTambah = () => { this.setState((prev) => ({ count: prev.count + 1 })); }; render() { return ( <div> <p>Jumlah: {this.state.count}</p> <button onClick={this.handleTambah}>Tambah</button> </div> ); } } export default CounterClass; Agak panjang ya 😅 Lifecycle Class Component punya lifecycle methods kayak componentDidMount, componentDidUpdate, dll. componentDidMount() { console.log('Component muncul ke layar!'); } Tapi di Functional Component, kamu bisa ngelakuin hal yang sama pake useEffect: import { useEffect } from 'react'; useEffect(() => { console.log('Komponen dimuat ke layar!'); }, []); Sama fungsinya, tapi jauh lebih simpel dan fleksibel. Konteks “this” Di Class Component, kamu sering harus berurusan sama this, dan itu bisa bikin pusing. this.setState(...); this.props.nama; Sementara di Functional Component, semuanya lebih clean—nggak perlu mikir soal this. Performance? Secara performa, dua-duanya hampir sama di kebanyakan kasus. Tapi karena Functional Component lebih ringan dan mudah dioptimasi (terutama dengan React 18 dan concurrent mode), biasanya jadi pilihan utama buat proyek baru. Singkatnya: Proyek baru? Functional Component + Hooks adalah best choice.Ngurusin proyek lama? Kadang masih ketemu Class Component, dan itu gapapa.Mau belajar dua-duanya? Bagus! Jadi kamu ngerti semua ekosistem React. Contoh Kode Lengkap Functional vs Class Component Studi Kasus: Kita mau bikin komponen UserProfile yang: Nampilin nama & email penggunaBisa toggle status login (on/off) Functional Component (dengan Hooks) // components/UserProfileFunctional.tsx import { Component } from "react"; type UserProfileProps = { name: string; email: string; }; type UserProfileState = { loggedIn: boolean; }; class UserProfileClass extends Component<UserProfileProps, UserProfileState> { constructor(props: UserProfileProps) { super(props); this.state = { loggedIn: false, }; } toggleLogin = () => { this.setState((prev) => ({ loggedIn: !prev.loggedIn, })); }; render() { const { name, email } = this.props; const { loggedIn } = this.state; const statusClass = `rounded-full h-10 w-10 ${ loggedIn ? "bg-green-500" : "bg-red-500" }`; const btnClass = `mt-4 px-4 py-1.5 cursor-pointer rounded-full text-white font-bold ${ loggedIn ? "bg-red-300" : "bg-blue-400" }`; return ( <div className="flex flex-col gap-2 border-2 p-4 rounded-2xl"> <div className="flex gap-2.5 items-center"> <div className={statusClass}></div> <div className="flex flex-col"> <h2 className="font-bold">{name}</h2> <p className="opacity-80 text-[14px]">{email}</p> </div> </div> <button onClick={this.toggleLogin} className={btnClass}> {loggedIn ? "Logout" : "Login"} </button> </div> ); } } export default UserProfileClass; 🟢 Kelebihan: Ringkas dan gampang dibacaGunain useState buat handle loginNggak repot sama this Class Component (dengan state & event) // components/UserProfileClass.tsx import { Component } from "react"; type UserProfileProps = { name: string; email: string; }; type UserProfileState = { loggedIn: boolean; }; class UserProfileClass extends Component<UserProfileProps, UserProfileState> { constructor(props: UserProfileProps) { super(props); this.state = { loggedIn: false, }; } toggleLogin = () => { this.setState((prev) => ({ loggedIn: !prev.loggedIn, })); }; render() { const { name, email } = this.props; const { loggedIn } = this.state; const statusClass = `rounded-full h-10 w-10 ${ loggedIn ? "bg-green-500" : "bg-red-500" }`; const btnClass = `mt-4 px-4 py-1.5 cursor-pointer rounded-full text-white font-bold ${ loggedIn ? "bg-red-300" : "bg-blue-400" }`; return ( <div className="flex flex-col gap-2 border-2 p-4 rounded-2xl"> <div className="flex gap-2.5 items-center"> <div className={statusClass}></div> <div className="flex flex-col"> <h2 className="font-bold">{name}</h2> <p className="opacity-80 text-[14px]">{email}</p> </div> </div> <button onClick={this.toggleLogin} className={btnClass}> {loggedIn ? "Logout" : "Login"} </button> </div> ); } } export default UserProfileClass; 🔴 Kekurangan: Lebih verbosePerlu constructor & this buat handle event & state Jika kalian mendapatkan error seperti berikut, itu karena defaultnya di Next.js semua komponen itu menggunakan server comonent, dan useState itu hanya bisa digunakan di client component. Kalian bisa belajar tentang server component dan client component pada postingan BuildWithAngga tentang Tutorial Next.js 15 Belajar Server dan Client Component Projek Web Booking Hotel. Next.js build error Untuk mengatasi ini, kita tinggal tambahkan "use client" pada baris pertama kode, jadinya seperti ini: "use client"; import { Component } from "react"; type UserProfileProps = { name: string; email: string; }; type UserProfileState = { loggedIn: boolean; }; class UserProfileClass extends Component<UserProfileProps, UserProfileState> { constructor(props: UserProfileProps) { super(props); this.state = { loggedIn: false, }; } toggleLogin = () => { this.setState((prev) => ({ loggedIn: !prev.loggedIn, })); }; render() { const { name, email } = this.props; const { loggedIn } = this.state; const statusClass = `rounded-full h-10 w-10 ${ loggedIn ? "bg-green-500" : "bg-red-500" }`; const btnClass = `mt-4 px-4 py-1.5 cursor-pointer rounded-full text-white font-bold ${ loggedIn ? "bg-red-300" : "bg-blue-400" }`; return ( <div className="flex flex-col gap-2 border-2 p-4 rounded-2xl"> <div className="flex gap-2.5 items-center"> <div className={statusClass}></div> <div className="flex flex-col"> <h2 className="font-bold">{name}</h2> <p className="opacity-80 text-[14px]">{email}</p> </div> </div> <button onClick={this.toggleLogin} className={btnClass}> {loggedIn ? "Logout" : "Login"} </button> </div> ); } } export default UserProfileClass; Tambahkan juga "use client" pada UserProfileClass.tsx. Buka page.tsx lalu ubah jadi seperti ini: import UserProfileClass from "@/components/UserProfileClass"; import UserProfileFunctional from "@/components/UserProfileFunctional"; export default function Home() { return ( <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"> <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start"> <h3 className="text-2xl font-bold">Functional Component:</h3> <UserProfileFunctional name="Taufan Fatahillah" email="[email protected]" /> <h3 className="text-2xl font-bold">Class Component:</h3> <UserProfileClass name="Jonh Doe" email="[email protected]" /> </main> </div> ); } Hasilnya akan seperti ini: Local Result Catatan Tambahan Untuk proyek baru, disarankan pake Functional Component + HooksTapi belajar Class Component tetep penting kalau kamu ketemu kode lama (legacy code) Kesalahan Umum yang Harus Dihindari Walaupun React keliatannya simpel, tapi banyak juga jebakan yang sering bikin frustrasi. Nih, beberapa kesalahan umum yang sering kejadian: Lupa Typing Props Ini klasik banget. Di TypeScript, semua props harus didefinisiin typenya. Kalau nggak, kamu bakal kehilangan auto-complete dan bisa bikin bug susah dilacak. // ❌ Salah (nggak ada type) function Greet(props) { return <p>Hi, {props.name}</p>; } // ✅ Benar type GreetProps = { name: string; }; function Greet({ name }: GreetProps) { return <p>Hi, {name}</p>; } Gunain any terus-terusan Pakai any itu kayak ngilangin fitur utama TypeScript. Kalau sering pakai any, sama aja kayak balik ke JavaScript biasa 😅 // ❌ Salah const handleClick = (e: any) => { console.log(e.target.value); }; // ✅ Benar const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => { console.log(e.currentTarget.value); }; State di Functional Component Tanpa Tipe React bisa nebak tipenya sih, tapi kalau datanya kompleks, sebaiknya tetap definisiin tipe-nya. // ❌ Salah const [user, setUser] = useState(null); // ✅ Benar type User = { name: string; age: number; }; const [user, setUser] = useState<User | null>(null); Mengakses this di Functional Component Kadang yang baru pindah dari Class suka iseng nulis this.props di Functional 🤦 // ❌ Salah const MyComponent = () => { console.log(this.props); // ini pasti error }; Import React tapi nggak dipakai Sejak React 17, kamu nggak wajib import React di file yang pakai JSX. Tapi kadang orang masih nulis ini padahal gak perlu. // ❌ Nggak perlu kalau nggak pakai React secara eksplisit import React from 'react'; Best Practices dalam Menulis Komponen React + TypeScript Nah, biar kode kamu clean, maintainable, dan scalable, coba terapin beberapa best practice berikut: Pisahin Tipe Props ke File Sendiri (kalau kompleks) Kalau props-nya banyak atau dipakai di banyak komponen, lebih baik dipisah ke file types.ts. // types/User.ts export type User = { name: string; email: string; }; // components/UserCard.tsx import { User } from '@/types/User'; const UserCard = ({ name, email }: User) => { return <div>{name} - {email}</div>; }; Gunain Destructuring Props Lebih rapi dan enak dibaca dibanding props.name, props.email, dst. // ✅ Lebih clean const Profile = ({ name, age }: { name: string; age: number }) => { return <p>{name} - {age}</p>; }; Selalu Type State dengan Jelas Daripada ngandelin inferensi TypeScript, lebih baik kamu tegasin typenya, apalagi kalau datanya nullable atau array. const [todos, setTodos] = useState<TodoItem[]>([]); Gunain React.FC untuk Komponen Simpel Kalau komponen kamu cuma pake props bawaan, React.FC bisa ngebantu banyak (auto children, auto typing props): type AlertProps = { message: string; }; const Alert: React.FC<AlertProps> = ({ message, children }) => { return <div>{message} {children}</div>; }; Break Down Komponen Jadi Kecil-kecil Jangan bikin satu komponen isinya ribuan baris. Pisah jadi komponen kecil yang reusable. // components/Post.tsx const Post = ({ title, author }: { title: string; author: string }) => ( <article> <h2>{title}</h2> <small>by {author}</small> </article> ); Gunakan ESLint + Prettier + TypeScript Strict Mode Biar kode kamu tetap bersih, konsisten, dan minim bug dari awal. ESLint – Linting Code JavaScript/TypeScript ESLint itu semacam "pengawas" kode kita. Dia bantu nyari dan ngasih warning/error kalau ada potensi bug atau style yang nggak konsisten. Contoh: const a = 5 console.log(a) Tanpa ESLint: Kode di atas dianggap sah-sah aja. Dengan ESLint: Bisa dikasih warning karena console.log, titik koma, atau penamaan variabel nggak sesuai aturan. Prettier – Code Formatter Otomatis Prettier fokus ke formatting, bukan logic. Dia bantu rapihin kode secara otomatis. Misalnya: const hello = (name:string)=>{return "Hi "+name} Setelah Prettier: const hello = (name: string) => { return "Hi " + name; }; Auto rapi, konsisten, dan bikin kode enak dibaca tim 😎 TypeScript Strict Mode – Type Safety Ketat strict: true di tsconfig.json artinya kamu bilang ke TypeScript: "Bro, tolong pastiin semua variable, return type, props, dsb harus jelas dan aman ya!” Contoh: // Tanpa strict mode function greet(name) { return 'Hello ' + name; } // Dengan strict mode function greet(name: string): string { return 'Hello ' + name; } Hasilnya: Lebih sedikit bug, lebih pede deploy 🚀 Next.js Include ESLint by Default Kalau kamu bikin proyek Next.js baru (npx create-next-app), Next.js bakal langsung nanya: "Mau aktifin ESLint?" Dan kalau kamu klik "Yes", dia bakal: Auto install ESLintTambah file .eslintrc.jsonKonfig yang cocok buat Next.js Kamu tinggal pakai aja tanpa setup ribet! Bonus: Gabungin Semuanya Untuk workflow terbaik, kamu bisa gabungin keempatnya: ✅ ESLint → cek kode logic & style✨ Prettier → rapihin format otomatis🔐 TypeScript Strict → jaga keamanan dan kejelasan data⚡ Next.js → tinggal pake, udah include tools-nya Perbandingan Singkat Functional vs Class Component (Tabel) AspekFunctional ComponentClass ComponentSintaksFungsi biasa atau arrow functionMenggunakan class dan extends React.ComponentStateGunakan useStateGunakan this.state dan this.setStateLifecycle MethodGunakan useEffectGunakan componentDidMount, componentDidUpdate, dllHooks Support✅ Ya❌ TidakBinding this❌ Tidak perlu✅ PerluKode lebih ringkas✅ Umumnya lebih ringkas❌ Lebih verboseDigunakan di proyek baru✅ Sangat disarankan❌ Jarang, kecuali legacyDukungan TypeScript✅ Sangat baik✅ Tapi butuh lebih banyak kodeTabel perbandingan singkat Kapan Sebaiknya Pakai Functional vs Class? Gunakan Functional Component jika: Kamu baru belajar React (lebih simpel dan modern)Proyek baru menggunakan React 16.8+Ingin menggunakan Hooks seperti useState, useEffect, useContext, dllIngin kode lebih singkat dan mudah dibacaIngin mengikuti best practice terbaru Gunakan Class Component jika: Kamu sedang maintenance proyek lamaProyek menggunakan React versi lama (di bawah 16.8)Komponen sudah sangat besar dan susah untuk diubah total ke function Tapi secara umum, Functional Component adalah standar modern React. Bahkan tim React sendiri merekomendasikan penggunaan fungsi ketimbang class. Penutup Di artikel ini, kita udah bahas lumayan lengkap tentang: Apa itu Functional dan Class Component di ReactCara setup proyek Next.js + TypeScriptContoh kode untuk dua jenis komponen❌ Kesalahan umum yang sering kejadian✅ Best practices biar kode lebih rapi dan scalable📌 Perbandingan dan kapan sebaiknya digunakan 🚀 Rekomendasi Selanjutnya: Tutorial Next JS 15 Belajar Server dan Client Components Projek Web Booking Hotel10 Hal Perlu Dipelajari Pemula Framework Next.js 15Tutorial Next JS Pemula Mengenal Pentingnya WebpackCara Deploy Website Statis ke Vercel lewat GitHub (Lengkap + Contoh)

Lo pernah nggak sih ngerasa tampilan website lo itu... flat banget? Kayak hidup segan, mati tak mau. Nah, di era sekarang, tampilan UI yang dinamis dan interaktif tuh udah jadi kebutuhan, bukan sekadar bonus. Salah satu cara paling gampang buat bikin tampilan web lo lebih hidup adalah pakai animasi. Untungnya, kalau lo pakai Tailwind CSS v4, lo nggak perlu repot ngoding animasi dari nol. Tailwind udah nyediain berbagai animasi siap pakai yang tinggal comot. Bahkan, kalau lo ngerasa animasi default-nya kurang nendang, lo bisa bikin custom animasi versi lo sendiri dengan mudah lewat konfigurasi di TailwindCSS. Di artikel ini, gue bakal ajak lo ngulik bareng soal: Animasi bawaan (yang tinggal pakai)Cara bikin animasi custom sendiriTips dan best practice biar animasi lo nggak lebay tapi tetap kece Yuk, kita mulai ngebahas panduan lengkap animasi Tailwind CSS v4, dari yang siap pakai sampai lo bisa bikin animasi versi lo sendiri! Apa Itu Animasi di Tailwind CSS? Sebelum lo langsung terjun pakai animasi bawaan atau bikin yang custom, penting banget buat ngerti dulu konsep dasarnya. Soalnya, animasi di Tailwind itu ada dua jenis utama: transition dan animation. Keduanya punya fungsi beda, tapi sering dipakai barengan buat bikin efek yang mulus. Transition Transition itu lebih ke perubahan gaya secara halus. Misalnya lo mau bikin tombol berubah warna pas di-hover. Nah, transisi ini ngebuat perubahannya nggak langsung “jepret”, tapi pelan-pelan, lebih enak dilihat. Contoh simple: <button class="bg-blue-500 hover:bg-blue-700 transition-colors duration-300"> Klik Gue </button> Lihat kan? Di situ kita pakai transition-colors biar efek hover-nya smooth. Animation Kalau animation, ini lebih kompleks. Lo bisa bikin elemen muter (spin), mantul-mantul (bounce), muncul perlahan, atau bahkan efek masuk dari samping. Tailwind udah sediain beberapa utility animate-* yang bisa langsung lo pake. Contoh: <div class="animate-bounce w-6 h-6 bg-red-500 rounded-full"></div> Hasilnya? Si bulat merah bakal mantul-mantul kayak bola pingpong. Seru, kan? Singkatnya: Transition → buat efek perubahan gaya (warna, ukuran, opacity, dll).Animation → buat efek gerak yang lebih kompleks dan bisa diatur pakai @keyframes. Jadi sekarang lo udah ngerti, kan, perbedaan dasar antara dua jenis animasi di Tailwind CSS? Yuk, lanjut ke bagian yang paling ditunggu: animasi keren siap pakai yang langsung bisa lo comot! Animasi Siap Pakai di Tailwind CSS v4 Tailwind CSS v4 hadir bawa beberapa animasi built-in yang bisa langsung lo pake tanpa harus nulis @keyframes manual. Cukup tambahin class animate-* ke elemen lo, dan boom — elemen lo langsung punya efek gerak yang kece. Animasi Built-in Tailwind CSS v4 + Contoh Penggunaan Lengkap Di bawah ini gue rangkum empat animasi bawaan paling sering dipakai di Tailwind CSS v4, lengkap sama penjelasan “kapan dipakai” dan potongan kode siap copy-paste. Tinggal ganti teks, warna, atau ukuran sesuai selera—langsung hidupin UI lo! 🚀 animate-spin — ikon loading muter Kapan dipakai? Saat butuh indikator proses (loaders, refresher). Cara kerja: elemen diputar 360° terus-menerus. <!-- Loader bulat --> <div class="h-10 w-10 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div> <!-- Loader pakai icon (Heroicons/Feather/FontAwesome, dll.) --> <svg class="h-6 w-6 text-blue-500 animate-spin" viewBox="0 0 24 24" fill="none"> <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" class="opacity-25"/> <path d="M4 12a8 8 0 018-8" stroke="currentColor" stroke-width="4" class="opacity-75"/> </svg> Hasilnya: animate-spin animate-bounce — elemen mantul-mantul Kapan dipakai? Buat narik perhatian (notifikasi, CTA). Cara kerja: elemen lompat naik-turun secara periodik. <!-- Badge notifikasi --> <span class="inline-flex items-center px-3 py-1 text-sm font-medium text-white bg-green-500 rounded-full animate-bounce"> ✔ Berhasil disimpan! </span> <!-- Panah scroll ke bawah --> <svg class="h-8 w-8 text-gray-700 animate-bounce mt-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/> </svg> Hasilnya: animate-bounce Tip: Kebanyakan bounce bikin pusing. Pakai di spot penting aja, lalu matikan setelah user interaksi (via JS → onClick /tambah animate-none). animate-ping — gelombang radar Kapan dipakai? Menandai posisi (online status, titik map). Cara kerja: muncul lingkaran membesar + memudar, terus mengulang. <!-- Titik lokasi dengan efek ping --> <span class="relative flex h-3 w-3"> <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span> <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span> </span> Hasilnya: animate-ping Tip: Ping agak “berat” di banyak elemen. Batasi di satu-dua titik penting. animate-pulse — shimmer loading Kapan dipakai? Skeleton screen atau button “bernafas”. Cara kerja: opacity elemen naik-turun perlahan. <!-- Skeleton --> <div class="mx-auto w-full max-w-sm rounded-md p-4"> <div class="flex animate-pulse space-x-4"> <div class="size-10 rounded-full bg-gray-200"></div> <div class="flex-1 space-y-6 py-1"> <div class="h-2 rounded bg-gray-200"></div> <div class="space-y-3"> <div class="grid grid-cols-3 gap-4"> <div class="col-span-2 h-2 rounded bg-gray-200"></div> <div class="col-span-1 h-2 rounded bg-gray-200"></div> </div> <div class="h-2 rounded bg-gray-200"></div> </div> </div> </div> </div> Tip: Matikan pulse ketika data udah ready: ganti class ke warna final + hapus animate-pulse. Hasilnya: animate-pulse Bikin Animasi Custom Sendiri di Tailwind CSS v4 Di Tailwind v4 bikin animasi jadi lebih mudah cuma pakai @keyframesaja dijamin gak bakal ribet. Berikut kode untuk konfigurasi Tailwind, masukkan kode ini di tag <head> yaa! Langsung aja kita bikin..! animate-fade-in CSS: <style type="text/tailwindcss"> @theme { --animate-fade-in: fade-in 0.6s ease-out forwards; @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } } </style> HTML: <button type="button" class="px-4 py-1.5 bg-blue-500 text-white rounded-md animate-fade-in"> Fade </button> Hasilnya: animate-fade-in animate-slide-in CSS: <style type="text/tailwindcss"> @theme { --animate-slide-in: slide-in 0.5s ease-out forwards; @keyframes slide-in { 0% { transform: translateX(100%); } 100% { transform: translateX(0); } } } </style> HTML: <button type="button" class="px-4 py-1.5 bg-blue-500 text-white rounded-md animate-slide-in"> Slide </button> Hasilnya: animate-slide-in animate-blur CSS: <style type="text/tailwindcss"> @theme { --animate-blur: blur 0.6s ease-out forwards; @keyframes blur { 0% { filter: blur(8px); opacity: 0; } 100% { filter: blur(0); opacity: 1; } } } </style> HTML: <button type="button" class="px-4 py-1.5 bg-blue-500 text-white rounded-md hover:animate-blur" > Blur </button> Hasilnya: animate-blur animate-expand CSS: <style type="text/tailwindcss"> @theme { --animate-expand: expand 0.4s ease-out forwards; @keyframes expand { 0% { transform: scale(0.8); } 100% { transform: scale(1); } } } </style> HTML: <button type="button" class="px-4 py-1.5 bg-blue-500 text-white rounded-md animate-expand"> Expand </button> Hasilnya: animate-expand animate-shrink CSS: <style type="text/tailwindcss"> @theme { --animate-shrink: shrink 0.4s ease-out forwards; @keyframes shrink { 0% { transform: scale(1.1); } 100% { transform: scale(1); } } } </style> HTML: <button type="button" class="px-4 py-1.5 bg-blue-500 text-white rounded-md animate-shrink"> Shrink </button> Hasilnya: animate-shrink animate-pop CSS: <style type="text/tailwindcss"> @theme { --animate-pop: pop 0.3s ease-out; @keyframes pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } } </style> HTML: <button type="button" class="px-4 py-1.5 bg-blue-500 text-white rounded-md animate-pop"> Pop </button> Hasilnya: aniimate-pop animate-shake CSS: <style type="text/tailwindcss"> @theme { --animate-shake: shake 0.6s ease-in-out both; @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } } </style> HTML: <button type="button" class="px-4 py-1.5 bg-blue-500 text-white rounded-md animate-shake"> Shake </button> Hasilnya: animate-shake animate-wobble CSS: <style type="text/tailwindcss"> @theme { --animate-wobble: wobble 1s ease-in-out infinite; @keyframes wobble { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(3deg); } 75% { transform: rotate(-3deg); } } } </style> HTML: <button type="button" class="px-4 py-1.5 bg-blue-500 text-white rounded-md animate-wobble"> Wobble </button> Hasilnya: animate-wobble animate-seesaw CSS: <style type="text/tailwindcss"> @theme { --animate-seesaw: seesaw 1.2s ease-in-out infinite; @keyframes seesaw { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(8deg); } 60% { transform: rotate(6deg); } 70% { transform: rotate(8deg); } 80% { transform: rotate(0deg); } 90% { transform: rotate(2deg); } } } </style> HTML: <button type="button" class="px-4 py-1.5 bg-blue-500 text-white rounded-md animate-seesaw"> Seesaw </button> Hasilnya: animate-seesaw Rangkuman ✅ Kenapa butuh animasi custom? Karena lo bisa bikin efek sesuai karakter brand lo: masuk dari samping, zoom in, fade out, dll. ✅ Bisa digabung sama Tailwind utility lain? Bisa banget. Lo tetep bisa atur delay, duration, dan ease secara fleksibel. Tips & Best Practices 🚫 Jangan Berlebihan Animasi itu kayak bumbu. Kalau kebanyakan, malah bikin eneg. Pakai secukupnya buat highlight interaksi penting aja (kayak buka modal, hover tombol, dsb). 🧑‍🦯 Gunakan motion-safe Biar animasi nggak mengganggu pengguna yang pakai preferensi "reduce motion", kamu bisa tambahkan prefix ini: <div class="motion-safe:animate-fade">Aman buat semua</div> 📱 Cek Performa di Perangkat Low-End Beberapa animasi berat (seperti shadow blur + scale + opacity sekaligus) bisa bikin patah-patah di HP kentang. Coba tes di device real kalau bisa. Penutup Nah, sampai sini lo udah ngerti gimana powerful-nya animasi di Tailwind CSS v4. Mulai dari animasi siap pakai, bikin custom animasi sendiri pakai CSS, sampai nerapin di komponen kayak modal — semuanya bisa lo lakuin tanpa ribet. Dengan fitur baru di v4, lo bisa: Bikin animasi sekali, pakai di mana aja.Nggak perlu oprek tailwind.config.js.Lebih fleksibel buat trigger animasi via JavaScript. Intinya? UI lo bakal jadi lebih hidup dan interaktif, tanpa harus ngoding panjang-panjang. Kalau lo pengen explore lebih jauh, nih gue kasih beberapa referensi keren: 📘 Dokumentasi Resmi Tailwind CSS - Animation🧪 Tailwind Play - Coba Langsung di Browser Ini gue kasih juga rekomendasi kelas gratis dari BuildWithAngga buat memperdalam TailwindCSS: 1. CSS Tailwind Web Design Kelas ini cocok banget buat lo yang pengen ngedesain website modern dan clean pake Tailwind CSS. Cocok buat pemula maupun yang udah pernah nyoba Tailwind tapi pengen lebih rapi dan estetik. 2. Belajar Tailwind CSS untuk Pemula Website Designer Namanya juga buat pemula, jadi tenang aja, lo bakal dipandu dari nol. Cocok buat lo yang masih suka bingung bedain mt-4 sama mb-4 😆 3. HTML5 + Tailwind CSS: Creating Modern Eye-Catching Website Gabungan antara HTML5 dan Tailwind, lo bakal diajarin bikin website yang gak cuma fungsional tapi juga menarik secara visual. Pokoknya gak cuma ngoding asal tampil. 4. Vue 3 + Tailwind CSS: Membuat Komponen Autocomplete Khusus buat lo yang udah mainan Vue 3, kelas ini ngajarin cara bikin komponen autocomplete yang reusable dan stylish pake Tailwind. Keren buat portofolio lo juga nanti! Semangat eksplor, bro! Animasi itu bukan cuma estetika — tapi juga bagian dari komunikasi desain yang baik. Jangan takut bereksperimen! 💪