React.js

A collection of 34 posts

Members only

Fundamental

Mengenal Fitur Suspense di React 19: Belajar React JS Makin Seru!

React 19 hadir dengan fitur Suspense yang bikin ngoding makin asik! 🚀 Suspense memudahkan kita dalam mengelola loading state dan ningkatin pengalaman pengguna. Artikel ini ngejelasin gimana cara pakainya, termasuk contoh praktis buat fetching data dari API dan error handling.

Members only

Fundamental

React Compiler: Bikin Pengembangan Frontend Makin Simpel dan Cepat

React 19 hadir dengan inovasi besar yang bakal mengubah cara kita mengembangkan aplikasi frontend. Dengan React Compiler, kamu nggak perlu lagi pusing dengan optimisasi manual. Yuk, kenalan lebih dekat dengan React Compiler

Frontend

Panduan Lengkap Cara Install React 19 Beta

Kali ini kita akan bahas gimana cara install React 19 Beta. Langkah-langkahnya sangatlat mudah. Yuk, langsung baca selengkapnya.

Fundamental

React 19: Fitur dan Peningkatan Baru yang Wajib Kamu Tahu!

React 19 hadir dengan segudang fitur baru dan peningkatan yang bikin coding kita jadi lebih seru dan efisien! Dari Suspense untuk data fetching hingga dukungan Server Components, semuanya dirancang untuk meningkatkan pengalaman developer. Yuk, simak ulasan lengkapnya!

Fundamental

Dua Cara Memanggil File Asset Gambar Di React.js

Topik ini memang umum ditanyakan, khususnya buat programmer yang baru terjun ke react.js.

React.js

Memahami Fungsi Clean Up UseEffect Dengan Kasus Nyata

Dengan memanfaatkan fungsi clean up kita dapat mengoptimasi aplikasi kita

Fundamental

3 Cara Membuat Kondisional Class CSS di React.js

Seringkali kita perlu membuat beberapa class dengan beberapa kondisi di satu element, di react.js sendiri tidak ada fungsi khusus untuk melakukan ini. Kalian dapat menggunakan 3 cara ini untuk membuat class sesuai dengan kondisi yang dibutuhkan.

Frontend

Fitur Penting Buat Client Tapi Sering Dilewatkan Programmer React.js

coba kalian tanyakan ke client kalian pasti kebanyakan mereka merasa memerlukan fitur ini

React.js

Next Step?

Selamat kalian telah berhasil melewati satu tahap untuk menjadi master Remix, nah apa ni selanjutnya? Masih banyak fitur-fitur dari Remix yang bisa kita explore. Kalau ide mimin sih di pembahasan selanjutnya inginnya membuat projek blog menggunakan MongoDB dan Prisma ORM, lengkap dengan User Authentication. Jika kalian setuju atau ada ide

React.js

Mengatur Meta Data Halaman

React.js

Melengkapi Form Dengan Fungsi Validasi

React.js

Melakukan Submit Tanpa Mereload Halaman (SPA)

React.js

Membuat Halaman Detail Dengan Dynamic Route

React.js

Memunculkan Data Notes Tersimpan menggunakan Loader

React.js

Menggunakan Action Untuk Menghandle Form

React.js

Membuat Class Storage JSON

React.js

Membuat component Create Form

React.js

Membuat Halaman Home, Create dan Detail

React.js

Menambahkan Style CSS Pada Projek

React.js

Digging Deeper: Penjelasan Projek

React.js

Menambahkan CSS Eksternal Ke Dalam Project Remix

Ketika membangun website atau aplikasi pastinya kita akan menggunakan css, dan sebaiknya css dibuat terpisah agar lebih optimal dan efisien. Berikut cara menambahkan file css eksternal ke dalama projek Remix, pada contoh kali ini kita akan menambahkan app.css kedalam projek. 1. Tambahkan folder app/styles dan buat file css

React.js

Mengenal Component Link

Setelah sebelumnya kita berhasil membuat 2 halaman baru, yaitu about dan about/team sekarang kita akan menggunakan component Link untuk navigasi halaman, secara fungsi Link sama dengan tag di html, yang membedakan adalah kita dapat berpindah halaman tanpa reload seluruh halaman menggunakan Link, menjadikan web kita SPA (Single Page App)

React.js

Remix Routing

File Based Routing Sebelumnya telah kita bahas jika di folder route kita dapat mendifinisikan halaman-halaman dan sub-halaman di dalam aplikasi kita. Halaman-halaman bisa kita definisikan dalam bentuk file atau folder, biar lebih paham mari kita praktekkan. Buat file bernama about-us.jsx di dalam folder app/routes, lalu isi dengan code

React.js

Bedah Remix Structure Project

package.json Berisi segala dependency yang terinstal di projek ini. remix.config.js Kita bisa mengatur berbagai macam pengaturan projek remix disini, kalian akan lebih paham penggunaannya jika terus mengikuti tutorial ini sampai selesai. Untuk dokumentasi lengkapnya bisa kalian cek disini https://remix.run/docs/en/main/file-conventions/remix-config Folder

React.js

Preparation To Remix.js

Pastikan Kalian Sudah Menguasai Hal Berikut * Pengetahuan basic React.js. * Tetapi, tidak wajib memiliki pengetahuan soal Remix. Jika kalian merasa belum memiliki pengetahuan basic soal React.js, saya sarankan kalia menyelesaikan tutorial React.js Dasar Kami. Setup Projek Remix 1. Pastikan kalian sudah menginstal node.js, jika belum bisa cek