React.js

[FajarFE]

• [ ] Pengenalan React.js
  • [ ] Instalasi Ektension Code Editor
  • [ ] Instalasi React Vite
• [ ] Structure Folder
  • [ ] Mengenal lebih jauh struktur folder pada react
  • [ ] Menggunakan Prinsip Atomic Design pada React
• [ ] Pembuatan Component
  • [ ] Pengenalan Function dan Class component
  • [ ] Untuk apa Jsx pada React ?
  • [ ] Cara kerja Props
  • [ ] Apa Perbedaan Usestate dan Props pada React ?
  • [ ] Penggunaan Condisional Rendering pada Component
  • [ ] Struktrur Kompisisi React
• [ ] Rendering
  • [ ] Mengoper function dengan Props
  • [ ] Membuat Component Reusable
  • [ ] Menggunakan Maping Data sekaligus Memanggil data API dengan Axios
  • [ ] Data Binding
  • [ ] Pembuatan component untuk high order component (HOC)
• [ ] Pengenalan Hooks
  • [ ] Use Ref
  • [ ] Use Memo
  • [ ] Use Reducer
  • [ ] Use callback
  • [ ] Use debug value
• [ ] Routing halaman pada React
  • [ ] Pengenalan Routing
  • [ ] Setup React Router pada App
  • [ ] Route Component
  • [ ] Outlet sebagai Layouting
  • [ ] UseParams untuk mendapatkan parameter query pada Routing
  • [ ] Penggunaan Hooks pada React Router Lainnya
• [ ] Styling component
  • [ ] Setup Tailwind
  • [ ] Layoting dengan tailwind
  • [ ] Condisional rendering pada style dan classname
  • [ ] Responsive Component dengan Tailwind
• [ ] State Menegement
  • [ ] Apa itu state management ?
  • [ ] Macam macam state management ?
  • [ ] Instalasi React Query Tanstak atau Redux Toolkit Query
  • [ ] Perbedaan cara kerja React Query Tanstak atau Redux Toolkit Query dengan state biasa
  • [ ] Payload dan mengubah data pada React Query Tanstak atau Redux Toolkit Query
  • [ ] Penggunaan React Query Tanstak atau Redux Toolkit Query untuk send data dan request data pada API
• [ ] Pengenalan Useform
  • [ ] Cara kerja useform
  • [ ] Penggunaan formstate sebagai value input
• [ ] Error Handling dengan Zod
  • [ ] Pembuatan schema sebagai validator input
  • [ ] Integrasi zod dan useform untuk send data ke API
• [ ] Referensi Library Frontend
  • [ ] Component
    • [ ] https://headlessui.com/ (rekomendasi)
    • [ ] https://ui.shadcn.com/ (rekomendasi) karena bisa custom component secara langsung
    • [ ] https://mui.com/
    • [ ] https://www.radix-ui.com/
    • [ ] https://ui.aceternity.com/ untuk component modern
    • [ ] https://react-spectrum.adobe.com/react-aria/index.html (rekomendasi)
  • [ ] Other
    • [ ] https://www.framer.com/motion/
    • [ ] https://www.react-fast-marquee.com/
    • [ ] https://mattboldt.github.io/typed.js/

[haikelz]

Izin menanggapi mas, untuk atomic design apakah tidak overwhelming untuk pemula yg bru belajar React? Apalagi ini ditaruh di section pengenalan React.

Saya rasa untuk materi atomic design ini materi lanjutan, lebih baik ditaruh di section sendiri seperti folder structuring atau design system.