📄️ Apa itu React
React atau ReactJS dibuat oleh perusahaan raksasa yaitu meta dan bersifat open source dan merupakan library bukan framework, artinya apa? ketika menggunakan React kita akan diberikan kebebasan dalam menggunakan nya seperti apa tanpa ada kerangka kerja yang menentukan kita harus ngoding seperti apa. contohnya dari library React ini komunitas membuat berbagai framework seperti GatsbyJs dan yang paling popular saat ini yaitu NextJs
📄️ Installasi React
Requirment
📄️ Apa itu useState dan useEffect
useState dan useEffect merupakan salah satu hooks yang sempat sedikit dibahas di Apa itu React. Hooks sendiri merupakan Hooks sendiri merupakan fungsi yang memungkinkan kita untuk terhubung dengan fitur yang ada di React khusus di Functional Components.
📄️ Membuat Reusable Component
contoh code:
📄️ Menggunakan Axios untuk Mengambil Data
Axios merupakan HTTP Client library untuk nodejs dan browser. pengenalan menganai axios lebih lanjut bisa baca artikel ini Intro Axios
📄️ Membuat Form dengan React Hook Form
React Hook Form merupakan library yang menawarkan fitur 2 yang dibutuhkan dalam pembuatan sebuah form seperti validasi dengan tetap memerhatikan perfoma dari aplikasi
📄️ Membuat CRUD dengan React Hook Form
yang perlu deketahui:
📄️ Apa itu Alukerja UI
Alurkerja UI merupakan library yang menyediakan fitur standar seperti library UI yang menyediakan komponen siap pakai namun Alurkerja UI juga menyediakan komponen untuk membantu mempercepat pembuatan fitur CRUD dengan bantuan Alurkerja BE sebagai spec generator nya. library ini open source sehingga developer lain bisa contribute langsung.
📄️ Instalasi Alurkerja UI
New Project
📄️ Implementasi Tema Admin dengan Alurkerja UI
Requirment
📄️ Implementasi TableLowocode
Silahkan liat halaman dokumentasi Alurkerja UI terkait komponent TableLowcode karena disana sudah lengkap props2 apa yg tersedia beserta contoh code nya dan hasilnya
📄️ Override Spec TableLowcode
kasus seperti apa yang mengharuskan programmer menggunakan static spec?
📄️ Override Tombol Aksi TableLowcode
Case 1
📄️ Implementasi Override Header TableLowcode
Contoh Sebelum dicustom
📄️ Implementasi Override Cell TableLowcode
Contoh Sebelum dicustom
📄️ Implementasi FormLowcode
Silahkan liat halaman dokumentasi Alurkerja UI terkait komponent TableLowcode karena disana sudah lengkap props2 apa yg tersedia beserta contoh code nya dan hasilnya
📄️ Override Spec FormLowcode
kasus seperti apa yang mengharuskan programmer menggunakan static spec?
📄️ Override Button FormLowcode
FormLowcode memiliki 2 button yaitu button cancel dan button submit. masing2 button bisa di custom dengan cara:
📄️ Override Header FormLowcode
Header merupakan bagian atas yang biasanya menampilkan judul form
📄️ Override Input FormLowcode
Yang dimaksud input:
📄️ Implementasi Wysiwyg
di alurkerja versi 1 Wysiwyg sudah tidak build in lagi di alurkerja karena menjadi issue di aplikasi NextJS, sehingga di project perlu membuat komponen reusable sendiri contohnya:
📄️ Implementasi Form Kompleks
Form Kompleks disini conteks nya beragam, cuman yang paling gampang nya yaitu form yang layout nya abstract, input nya berlayer2 contoh ketika klik field muncul modal berisi form lagi, ada field yang depend ke field lain, dsb yang mana sulit untuk implementasiin form nya menggunakan FormLowcode
📄️ Membuat Fungsi Login Logout
yang perlu diketahui
📄️ useContext
hook ini digunakan untuk mengambil nilai ke context dari komponent. kenapa harus menggunakan useContext?
📄️ Implementasi Tema Alurkerja
Theme alurkerja berbeda dengan tema yang ada dilibrary pada umumnya, di library lain umumnya untuk theme itu dibedakan dari file css nya misal tema 1 maka akan menggunakan theme1.css, jika tema 2 maka akan menggunakan theme2.css . namun di alurkerja-ui thema merupakan cara untuk mengcustom className dari komponennya alurkerja contiohnya TableLowcode