online course

A collection of 27 posts

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

React.js

Cara Remix Bekerja Di Frontend Dan Backend

Remix memiliki function utama loader, action dan  default component. 1. Loader dan Action akan berjalan di balik layar (server side) tanpa muncul di sisi user atau frontend. 2. Yang akan di render dibrowser hanya export default dari komponen/route itu sendiri saja. Mari kita ambil contoh, kita akan membuat satu

remix

Introduction Remix

What is Remix Remix adalah framework fullstack javascript yang dibangun diatas React.js library. Remix masih terbilang baru, tetapi merupakan alternatif (jika tidak ingin dikatakan penantang) dari Next.js. Tidak main-main, pengembangan Remix sekarang di backup oleh Shopify. Remix vs Next.js Beberapa perbedaan utama Remix dan Next.js: 1.

Members only

Node.js

Mengaplikasikan Express Validator Di Project Direktori Manga

Dengan menerapkan fungsi validasi kita dapat membatasi ukuran dari file dan jenis file yang dapat diupload.

Members only

React

Menambahkan Fitur Upload Dan Replace File Manga Di React JS

Jika sebelumnya kita telah berhasil membuat CRUD React JS beserta validasi pada projek listing manga, kali ini kita akan menambahkan fitur upload file manga

Members only

Frontend

Membuat Validasi Form Di React JS Menggunakan React Hook Form

Untuk memastikan bahwa data yang diinput melalui form oleh pengguna adalah valid, sebelum dikirimkan ke server kita perlu membuat sistem validasi, kita bisa memanfaatkan library untuk membuat sistem validasi form. Di tutorial kali ini kita akan menggunakan library React Hook Form

Members only

React.js

3 Langkah Mudah Install Tailwind CSS Di React JS

Sebelumnya, kita sudah Membuat CRUD React.js menggunakan pure css, nah kali ini kita akan mengimplementasikan Tailwind css di projek ini

Members only

REST API

Mengubah Dan Menghapus File Yang Tersimpan Di Record Database Menggunakan Express.js

Jika kemaren kita sudah belajar cara membuat fungsi upload ketika menambah data baru dengan express.js, lalu muncul pertanyaan bagaimana jika kita ingin mengubah file yang telah tersimpan di record ataupun menghapus record beserta file yang terkait.

Members only

REST API

Panduan Lengkap Menambah Fungsi Upload Di Express.js

Pada tutorial kali ini kita akan menambahkan fungsi upload file ke server dan menyimpan nama file nya ke record di table. Hanya beberapa langkah, mudah dipahami dan mudah untuk dipraktekkan.