
Belajar Fundamental Aplikasi Web dengan React
Teknologi:
WebLevel: Menengah
Siswa Terdaftar
Teknologi:
WebLevel: Menengah
Siswa Terdaftar
Kelas ini merupakan langkah ke-lima Anda untuk menjadi React Developer.
React merupakan library yang disukai developer dalam membangun antarmuka pengguna. Popularitasnya dari waktu ke waktu kian melejit. Selaras dengan itu, talenta yang menguasai React terus dicari perusahaan, tetapi seringkali perusahaan sulit mendapatkan talenta yang andal. Sebagai React Developer, menguasai fundamental adalah hal wajib. Di kelas ini kami mengajak React Developer pemula untuk upskilling mempelajari mekanisme routing, component lifecycle, context, hingga hooks agar siap terjun ke industri.
Kelas ini merupakan langkah ke-lima Anda untuk menjadi React Developer.
Peralatan Belajar
Spesifikasi minimal perangkat:
Prosesor
Intel Dual Core (Rekomendasi Core i3 ke atas)
Tools yang dibutuhkan untuk belajar:
Node.js versi LTS terbaru
Lihat semua peralatan belajar
Lihat semua peralatan belajarKelas ini membutuhkan spesifikasi perangkat seperti berikut:
RAM
2GB (Rekomendasi 4GB)
Layar
1366 x 768 (Rekomendasi Full HD 1920 x 1080)
Sistem Operasi
Windows, Linux, MacOS
Prosesor
Intel Dual Core (Rekomendasi Core i3 ke atas)
Kelas ini membutuhkan beberapa tools berikut:
Node.js versi LTS terbaru
Command Line (Terminal atau cmd)
Web Browser (Google Chrome atau Mozilla Firefox)
Teks Editor (VSCode)
Metode Ajar
Lihat semua metode ajar
Lihat semua metode ajarKontributor
1Curriculum Developer yang membangun kelas ini:
Dimas Maulana Dwi Saputra
Curriculum Developer at Dicoding Indonesia
Reviewer
13Code Reviewer yang akan me-review tugas dan kode Anda:
Moch Ridwan Taufik Alamsyah
External Code Reviewer at Dicoding Indonesia
"What We Learn When We Learn By Doing"
Currently as R&D Engineer at csacomputer.com
Inggih Wicaksono
Web Developer at Erasys Consulting
- Fullstack man but currently focus on React.js
- Hacktoberfest fans @igihcksn
Agista Septiyanto
Code Reviewer at Dicoding Indonesia
Alfian Yusuf Abdullah
Head of Reviewer at Dicoding Indonesia
Dimas Maulana Dwi Saputra
Curriculum Developer at Dicoding Indonesia
Lihat semua kontributor dan reviewer
Lihat semua kontributor dan reviewerKontributor kelas
Curriculum Developer yang membangun kelas ini:
Dimas Maulana Dwi Saputra
Curriculum Developer at Dicoding Indonesia
Tim Reviewer
Code Reviewer yang akan me-review tugas dan kode Anda:
Moch Ridwan Taufik Alamsyah
External Code Reviewer at Dicoding Indonesia
"What We Learn When We Learn By Doing"
Currently as R&D Engineer at csacomputer.com
Inggih Wicaksono
Web Developer at Erasys Consulting
- Fullstack man but currently focus on React.js
- Hacktoberfest fans @igihcksn
Agista Septiyanto
Code Reviewer at Dicoding Indonesia
Alfian Yusuf Abdullah
Head of Reviewer at Dicoding Indonesia
Dimas Maulana Dwi Saputra
Curriculum Developer at Dicoding Indonesia
Alexzander Purwoko Widiantoro
Code Reviewer at Dicoding Indonesia
Ivan Andrianto
External Reviewer at Dicoding Indonesia
Ilham Shiddiq
External Code Reviewer at Dicoding Indonesia. Backend Developer at a company in Bandung.
Sofyan Egi Lesmana
External Code Reviewer at Dicoding Indonesia
You can reach out me on my Linkedin.
Fauzi Kurniawan
External Code Reviewer at Dicoding Indonesia
Javascript enthusiast
Muhammad Zainul Hakim
Developer
Building epic frontend with modern web standard
Eko Rahayu Widodo
Front-End Web Developer | React Developer
- Front-end web developer concentrating on developing an attractive website appearance using an Eye-catching and Beautifully crafted concept with React as the core stack.Â
- Machine Learning and Mobile Apps Enthusiasts.
Putu Jhonarendra
Programmer
Seorang Programmer dari Bali, Indonesia yang memiliki pengalaman lebih dari 3 tahun mengembangkan aplikasi web. Aplikasi yang dibuat telah dipakai di lembaga pendidikan dan instansi pemerintahan.
Moch Ridwan Taufik Alamsyah
External Code Reviewer at Dicoding Indonesia
"What We Learn When We Learn By Doing"
Currently as R&D Engineer at csacomputer.com
Inggih Wicaksono
Web Developer at Erasys Consulting
- Fullstack man but currently focus on React.js
- Hacktoberfest fans @igihcksn
Agista Septiyanto
Code Reviewer at Dicoding Indonesia
Alfian Yusuf Abdullah
Head of Reviewer at Dicoding Indonesia
Dimas Maulana Dwi Saputra
Curriculum Developer at Dicoding Indonesia
Alexzander Purwoko Widiantoro
Code Reviewer at Dicoding Indonesia
Ivan Andrianto
External Reviewer at Dicoding Indonesia
Ilham Shiddiq
External Code Reviewer at Dicoding Indonesia. Backend Developer at a company in Bandung.
Sofyan Egi Lesmana
External Code Reviewer at Dicoding Indonesia
You can reach out me on my Linkedin.
Fauzi Kurniawan
External Code Reviewer at Dicoding Indonesia
Javascript enthusiast
Muhammad Zainul Hakim
Developer
Building epic frontend with modern web standard
Eko Rahayu Widodo
Front-End Web Developer | React Developer
- Front-end web developer concentrating on developing an attractive website appearance using an Eye-catching and Beautifully crafted concept with React as the core stack.Â
- Machine Learning and Mobile Apps Enthusiasts.
Putu Jhonarendra
Programmer
Seorang Programmer dari Bali, Indonesia yang memiliki pengalaman lebih dari 3 tahun mengembangkan aplikasi web. Aplikasi yang dibuat telah dipakai di lembaga pendidikan dan instansi pemerintahan.
Ribuan siswa sukses belajar di Dicoding Academy. Apa kata mereka? Berikut adalah testimoni asli mereka.
Lihat semua testimoni
Lihat semua testimoniBerikut adalah beberapa pertanyaan yang paling sering ditanyakan.
Materi yang akan Anda pelajari pada kelas ini.
Memahami HAKI, mekanisme belajar, forum diskusi, glosarium, dan daftar referensi.
2 Menit
10 Menit
10 Menit
10 Menit
10 Menit
20 Menit
10 Menit
8 Menit
Belajar cara memvalidasi komponen props menggunakan PropTypes.
Pendahuluan Property Validation
15 Menit
Pentingnya Validasi Properti
20 Menit
PropsTypes API
25 Menit
Latihan: Menambahkan PropTypes pada Component
30 Menit
Latihan Studi Kasus: Menerapkan PropTypes pada Aplikasi Kontak
30 Menit
Rangkuman Property Validation
20 Menit
Kuis Property Validation
5 Menit
Belajar cara membuat routing di sisi client yang mudah dengan menggunakan ekosistem React Router.
Pendahuluan React Router
10 Menit
Web Routing
15 Menit
Latihan: Membuat Single-Page App di React
25 Menit
React Router
15 Menit
Latihan: Membuat Single-Page App dengan React Router
20 Menit
Path dan Query Parameter dengan React Router
15 Menit
Latihan: Memanfaatkan Path Parameter pada SPA dengan React Router
30 Menit
Latihan: Memanfaatkan Query Parameter pada Fitur Pencarian
35 Menit
Latihan Studi Kasus: Membuat Halaman Tambah Kontak
35 Menit
Latihan Studi Kasus: Membuat Fitur Pencarian Kontak
40 Menit
Rangkuman React Router
20 Menit
Kuis React Router
5 Menit
Menguji pemahaman peserta akan materi Property Validation dan React Router dengan membuat aplikasi yang menerapkan routing dan validasi properti di React.
Proyek: Membangun Single Page Application menggunakan React
945 Menit
Belajar cara memanfaatkan lifecycle method untuk menangani proses asynchornous seperti mendapatkan data dari API di dalam komponen.
Pendahuluan Component Lifecycle
10 Menit
(Opsional) Fetch API: Cara Aplikasi Front-End Menampilkan Data Dinamis
25 Menit
(Opsional) Latihan Fetch API: Mengonsumsi API Publik
30 Menit
Component Lifecycle
25 Menit
Latihan: Component Lifecycle
30 Menit
Studi Kasus: Memanfaatkan RESTful API pada Contact Apps
10 Menit
Latihan Studi Kasus: Memahami Spesifikasi API dan Menyiapkan Kebutuhan Latihan
30 Menit
Latihan Studi Kasus: Memproteksi Fitur Kontak
30 Menit
Latihan Studi Kasus: Membuat Fitur Registrasi
30 Menit
Latihan Studi Kasus: Membuat Fitur Login
30 Menit
Latihan Studi Kasus: Menampilkan, Menyimpan, dan Menghapus Kontak memanfaatkan API
30 Menit
Rangkuman Component Lifecycle
20 Menit
Kuis Component Lifecycle
5 Menit
Belajar cara menyimpan state global yang dapat diakses tanpa praktik props drilling dengan menggunakan React Context.
Pendahuluan React Context
15 Menit
React Context
20 Menit
Context Bukan Solusi Untuk Segalanya
5 Menit
Latihan: Memanfaatkan React Context untuk Fitur Mode Gelap
30 Menit
Latihan Studi Kasus: Memanfaatkan React Context untuk Fitur Ubah Bahasa
30 Menit
Rangkuman React Context
20 Menit
Kuis React Context
5 Menit
Belajar cara menuliskan kode React yang lebih baik dengan memaksimalkan penggunaan functional component melalui Hooks.
Pendahuluan React Hooks
15 Menit
Alasan Hadirnya hooks
20 Menit
React Hooks
20 Menit
Mengelola State dengan useState()
15 Menit
Latihan: Mengelola State dengan useState()
25 Menit
Side-Effect dengan useEffect()
20 Menit
Latihan: Side-Effect dengan useEffect()
25 Menit
React Context dengan useContext()
15 Menit
Latihan: React Context dengan useContext()
25 Menit
Custom Hooks
15 Menit
Latihan: Custom hooks
20 Menit
Aturan Penggunaan React Hooks
5 Menit
Latihan Studi Kasus: Mengubah komponen HomePage menjadi Functional Component
30 Menit
Rangkuman React Hooks
20 Menit
Kuis React Hooks
5 Menit
Menguji pemahaman peserta mengenai keseluruhan materi yang telah diajarkan pada kelas melalui ujian.
Rangkuman Kelas
30 Menit
Ujian Akhir
30 Menit
Menguji pemahaman peserta akan materi Component Lifecycle, React Context, dan Hooks dengan membuat aplikasi yang menerapkan API dan fitur perubahan bahasa/dark mode di React.
Proyek: Membangun SPA + API, Context, dan Hooks
1100 Menit