TRAINING REACT FOR ADVANCED DEVELOPERS
REACT FOR ADVANCED DEVELOPERS
DESKRIPSI
Training React for Advanced Developers ini dirancang untuk memberikan pemahaman yang mendalam mengenai fitur-fitur lanjutan dan praktik terbaik dalam menggunakan React. Pelatihan ini mencakup topik-topik yang lebih kompleks, seperti manajemen status dengan Redux, penerapan hooks dan context API, optimisasi kinerja, dan desain arsitektur aplikasi yang besar dengan React. Peserta akan mempelajari teknik lanjutan dalam pengembangan aplikasi berbasis React serta cara mengelola aplikasi React di tingkat perusahaan dan proyek berskala besar.
TUJUAN TRAINING
Setelah mengikuti training ini, peserta diharapkan mampu:
- Menggunakan dan memahami fitur-fitur lanjutan React seperti hooks, context API, dan porting aplikasi ke React Hooks.
- Menerapkan teknik manajemen status yang kompleks menggunakan Redux dan React-Query.
- Mengoptimalkan kinerja aplikasi React dan mengurangi rendering yang tidak perlu.
- Menerapkan arsitektur aplikasi yang skalabel dan terstruktur dengan baik menggunakan React.
- Memahami prinsip-prinsip dan pola desain dalam pengembangan aplikasi React tingkat lanjut.
MATERI TRAINING
1. Pengenalan React Lanjutan
- Apa itu React dan bagaimana framework ini berkembang dari React dasar ke lanjutan
- Perbedaan antara class components dan functional components di React
- Penjelasan hooks (useState, useEffect, useRef, dll.) dan keuntungannya
2. React Hooks dan Context API
- Menggunakan React Hooks secara efisien (useState, useEffect, useContext, dll.)
- Memahami dan menggunakan custom hooks untuk kode yang lebih modular
- Mengelola status global dengan Context API dan menghindari prop drilling
- Kasus penggunaan terbaik untuk hooks dalam aplikasi React besar
3. Manajemen Status dengan Redux
- Apa itu Redux dan bagaimana cara kerjanya dalam React
- Menyusun store, action, dan reducer di Redux
- Menggunakan Redux Toolkit untuk mengelola status dengan cara yang lebih efisien
- Penggunaan middleware seperti Thunk atau Saga untuk penanganan efek samping (side effects)
- Mengelola status dalam aplikasi berskala besar dengan Redux
4. Pengelolaan Data dan Server-Side Data Fetching
- Menggunakan React-Query dan SWR untuk pengelolaan data server-side dan cache
- Pemrograman deklaratif dengan data fetching yang efisien
- Manajemen cache dan sinkronisasi status di antara komponen dengan data yang datang dari API
5. Optimasi Kinerja di React
- Mengidentifikasi dan mengatasi masalah performa di React
- Penggunaan React.memo dan PureComponent untuk mencegah rendering yang tidak perlu
- Memahami dan menggunakan React Suspense dan Lazy loading untuk pemuatan komponen yang efisien
- Optimasi komponen dan penggunaan teknik virtualisasi list dengan React-Window atau React-Virtualized
- Profiling dan pengoptimalan render dengan React Developer Tools
6. Desain Arsitektur Aplikasi React
- Merancang arsitektur aplikasi React yang berskala besar
- Struktur folder dan pengelolaan modul dalam aplikasi besar
- Menyusun aplikasi dengan pola desain seperti Component-Driven Development (CDD) dan Atomic Design
- Manajemen routing dan navigasi menggunakan React Router
7. Testing di React
- Teknik testing untuk React components menggunakan Jest dan React Testing Library
- Pengujian unit dan integrasi untuk komponen React
- Penggunaan Enzyme untuk pengujian komponen yang lebih kompleks
- Menulis pengujian untuk hooks dan logika bisnis di aplikasi React
8. Integrasi React dengan Backend
- Menghubungkan aplikasi React dengan backend menggunakan API (REST atau GraphQL)
- Implementasi GraphQL di aplikasi React menggunakan Apollo Client
- Teknik pengelolaan status aplikasi dengan data yang terus berubah dari backend
9. Menerapkan SSR (Server-Side Rendering) dan Next.js
- Memahami konsep SSR di React dan keuntungan yang ditawarkannya
- Menggunakan Next.js untuk mengembangkan aplikasi React dengan SSR
- Pembuatan aplikasi React yang SEO-friendly menggunakan Next.js
- Konfigurasi dan penggunaan server-side rendering di aplikasi React berskala besar
METODE TRAINING
- Presentasi interaktif dan diskusi kelompok
- Demonstrasi pengkodean langsung dan penulisan kode React tingkat lanjut
- Latihan praktis dalam membangun aplikasi React kompleks
- Studi kasus dari proyek React nyata yang menggunakan teknologi terbaru
- Evaluasi dan umpan balik peserta untuk memahami kemajuan dan perbaikan
TARGET PESERTA
- Pengembang React yang sudah berpengalaman dan ingin mengasah keterampilan lebih lanjut
- Pengembang front-end yang ingin memahami lebih dalam tentang pengelolaan status dan optimasi kinerja aplikasi React
- Developer yang tertarik mempelajari framework Next.js untuk SSR dan aplikasi React berskala besar
- Tim pengembang yang bekerja dengan React dan membutuhkan praktik terbaik untuk aplikasi yang lebih efisien dan terkelola dengan baik
