Belajar Fundamental Aplikasi Web dengan React
Topik:
Full Stack Front End +1 lainnyaLevel: Menengah
Siswa Terdaftar
Topik:
Full Stack Front End +1 lainnyaLevel: 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
3Curriculum Developer yang membangun kelas ini:
Dimas Maulana Dwi Saputra
Curriculum Developer at Dicoding Indonesia
Zain Fathoni
Senior Front-End Engineer at Relay Commerce
Reviewer
54Code Reviewer yang akan me-review tugas dan kode Anda:
Moch Ridwan Taufik Alamsyah
IT Systems Governance Engineer at Politeknik Ketenagakerjaan, External Code Reviewer at Dicoding Indonesia
- Full Stack Development Enthusiast
- Mobile Development Enthusiast
- Machine Learning Enthusiast
- IoT Enthusiast
"What We Learn When We Learn By Doing?" Roger C. Schank
M. Auliya Mirzaq Romdloni
Software Engineer
Saya merupakan lulusan teknik informatika di ITS Surabaya. Saat ini saya sedang bekerja sebagai software engineer di salah satu perusahaan di Surabaya. Saya sangat tertarik dengan apapun yang terkait dengan pengembangan web dan pengetahuan baru yang saya belum tahu
Listiananda Apriliawan
Frontend Developer
I’m Nanda, a Frontend Developer focused on building production-grade mobile apps with React Native and TypeScript. I deliver features end-to-end, from UI implementation and state management to diagnosing production issues, while keeping codebases maintainable through pragmatic trade-offs.
What I do best:
• React Native (Android/iOS), TypeScript, React
• Performance profiling, crash debugging, and root-cause analysis
• API integration and delivery with modern JS tooling (Node.js/Bun, Vite)
• Collaboration with product/design, code reviews, and raising engineering standards
I’m interested in roles where I can own complex features, improve platform quality (DX, performance, reliability), and contribute at a higher level on teams shipping at scale.
Inggih Wicaksono
Web Developer at Erasys Consulting
- Fullstack man but currently focus on React.js
- Hacktoberfest fans @igihcksn
Agista Septiyanto
Elite Manager at Dicoding Indonesia
Software Engineer with over 5 years of experience delivering digital solutions across mobile, web, backend, and system automation domains. I am proficient in a variety of programming languages and technologies, including JavaScript, TypeScript, PHP, CSS, and HTML. I enjoy exploring different tech stacks, tackling cross-platform challenges, and am currently learning Go, Nix, and deployment technologies.
Throughout my career, I have actively developed a wide range of projects—from Android applications and backend systems to web interfaces and automation tools. In addition to my technical expertise, I have hands-on experience teaching and mentoring in the technical field, sharing knowledge, and helping teams and individuals grow.
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
Zain Fathoni
Senior Front-End Engineer at Relay Commerce
Inggih Wicaksono
Curriculum Developer at Dicoding Indonesia
Tim Reviewer
Code Reviewer yang akan me-review tugas dan kode Anda:
Moch Ridwan Taufik Alamsyah
IT Systems Governance Engineer at Politeknik Ketenagakerjaan, External Code Reviewer at Dicoding Indonesia
- Full Stack Development Enthusiast
- Mobile Development Enthusiast
- Machine Learning Enthusiast
- IoT Enthusiast
"What We Learn When We Learn By Doing?" Roger C. Schank
M. Auliya Mirzaq Romdloni
Software Engineer
Saya merupakan lulusan teknik informatika di ITS Surabaya. Saat ini saya sedang bekerja sebagai software engineer di salah satu perusahaan di Surabaya. Saya sangat tertarik dengan apapun yang terkait dengan pengembangan web dan pengetahuan baru yang saya belum tahu
Listiananda Apriliawan
Frontend Developer
I’m Nanda, a Frontend Developer focused on building production-grade mobile apps with React Native and TypeScript. I deliver features end-to-end, from UI implementation and state management to diagnosing production issues, while keeping codebases maintainable through pragmatic trade-offs.
What I do best:
• React Native (Android/iOS), TypeScript, React
• Performance profiling, crash debugging, and root-cause analysis
• API integration and delivery with modern JS tooling (Node.js/Bun, Vite)
• Collaboration with product/design, code reviews, and raising engineering standards
I’m interested in roles where I can own complex features, improve platform quality (DX, performance, reliability), and contribute at a higher level on teams shipping at scale.
Inggih Wicaksono
Web Developer at Erasys Consulting
- Fullstack man but currently focus on React.js
- Hacktoberfest fans @igihcksn
Agista Septiyanto
Elite Manager at Dicoding Indonesia
Software Engineer with over 5 years of experience delivering digital solutions across mobile, web, backend, and system automation domains. I am proficient in a variety of programming languages and technologies, including JavaScript, TypeScript, PHP, CSS, and HTML. I enjoy exploring different tech stacks, tackling cross-platform challenges, and am currently learning Go, Nix, and deployment technologies.
Throughout my career, I have actively developed a wide range of projects—from Android applications and backend systems to web interfaces and automation tools. In addition to my technical expertise, I have hands-on experience teaching and mentoring in the technical field, sharing knowledge, and helping teams and individuals grow.
Alvin Indra Pratama
Frontend Developer at Antikode
An Frontend Developer working at Antikode a UI UX Agency. 5+ years of experience in the Frontend field. Mastering several technologies such as React.js, Next.js, Vue.js, Nuxt.js, Tailwind CSS, GrahphQL, SEO and others. I also have mentoring experience at Bangkit and Kampus Merdeka.
Ar Fajar Setiaji
Tech Enthusiast
Amor Fati && Memento Mori
Alfian Yusuf Abdullah
Head of Reviewer at Dicoding Indonesia
Nanang Sutisna
- Mobile & Web Enthusiast
- External Code Reviewer at Dicoding Indonesia
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, instansi pemerintah dan rumah sakit.
Alexzander Purwoko
Code Reviewer at Dicoding Indonesia
MAULANA KAVALDO
Interest in data science, analyst, machine learning and cloud computing. A passion for code and semantics.
Muhammad Nazar Alwi
External Code Reviewer at Dicoding Indonesia
Ivan Andrianto
External Reviewer at Dicoding Indonesia
Grafis Nuresa
Fullstack Developer at Whello
Pixel perfect to build websites and prioritizing performance and reliable REST APIs to keep our Front-End team happy. Hi, I am Grafis Nuresa since 2018, I have been dedicated for those tasks daily, and I think we can agree that I am a Full-Stack Developer but honestly I am more inclined towards the Front-End part with deep experience in WordPress theme and plugin development also UI libraries like React, Vue, Svelte etc even web frameworks like Next.js, Nuxt and Astro. Besides that I have a lot of experience in the Back-End part with Nodejs (Fastify, Express and Hapi) to serve REST APIs for various purposes. Of course I do both of them type safety with TypeScript. Being used to working with multinational people makes me ready to work with anyone and anywhere.
Mohamad Zaelani
External Code Reviewer Dicoding
Feel free to connect with me on LinkedIn.
• External Code Reviewer Dicoding
• Backend Developer
• TensorFlow Developer Certified
Tatang Kuswandi
External Code Reviewer at Dicoding Indonesia
Fiqri ardiansyah
Fullstack Developer at INCIT
HA, nice!
Take a look my portfolio
Yusuf Sugiono
Fullstack Web Developer di PT Prima Visi Globalindo
• FrontEnd Instructor - Coding Camp 2026 powered by DBS Foundation
• MLOps Facilitator - IDCamp 2025
• Alumni Bangkit 2021 - Cloud Computing Learning Path
• Alumni SIB Dicoding Cycle 1 - Machine Learning & FrontEnd Learning Path
Feel free to connect with me on LinkedIn
MUHAMMAD IKHLAS NAUFALSYAH RANAU
Frontend Web Developer at Paperpillar
I am a passionate and dedicated Frontend Developer with over three years of experience in creating dynamic and visually appealing web applications. My expertise lies in utilizing cutting-edge technologies to deliver exceptional user experiences. I specialize in Next.js, leveraging its powerful features to build high-performance and scalable web solutions.
Core Competencies
Frontend Development:Â
- Proficient in HTML, CSS, JavaScript, and modern frontend frameworks.
- Next.js Expert: Extensive experience in building and optimizing applications with Next.js.
- Responsive Design: Skilled in creating responsive and mobile-friendly designs.
- UI/UX Principles: Strong understanding of user interface and user experience design.
- Version Control: Experienced with Git and collaborative development workflows.
- Cross-Browser Compatibility: Ensuring consistent performance across different browsers and devices.
YUSRIL ADRIANSYAH PUTRA
External Code Reviewer at Dicoding Indonesia
Hasan Ismail Abdulmalik
Full Stack Engineer - Dicoding Elite
Saya adalah seorang Full Stack Engineer, dengan keahlian di bidang backend development, frontend development, serta cloud computing, saya siap membantu peserta memahami konsep secara mendalam dan menerapkannya dalam membangun solusi digital yang scalable dan berdampak. Pengalaman saya dalam berbagai program fasilitasi dengan peserta dari berbagai latar belakang harapannya dapat membantu teman-teman tumbuh secara menyeluruh dan siap menghadapi tantangan industri teknologi.
Ilham Shiddiq
External Code Reviewer at Dicoding Indonesia. Backend Developer at a company in Bandung.
I Gede Laksmana Yudha
Fullstack Web Developer
Fullstack Web Developer
Eko Rahayu Widodo
Software Engineer
• Lifelong Learner.
• Let's Connect ^^.
Sofyan Egi Lesmana
You can reach out me on my Linkedin.
Refiandi Reza Syawaldriyansah
External Reviewer Dicoding
Front-End & Javascript Enthusiast
Shidqi Rifat Pangestu
Frontend Developer at Badr Interactive
- Frontend web enthusiast
- Instructor, Mentor, and Advisor Project at Dicoding
- Contribute through technology </>
Febry Billiyagi Karsidi
-
Stay calm, Stay sharp
Fauzi Kurniawan
External Code Reviewer at Dicoding Indonesia
Javascript enthusiast
Fazar Budiman Eka S
Mahasiswa
I am a final year Informatics Engineering student at Sunan Gunung Djati State Islamic University Bandung. I have sufficient skills in website development using React and Back End with Javascript. Additionally, I have an interest in Machine Learning and Cloud Computing skills.
Tarwin
IT Support
Saya Seorang Support It di suatu perusahaan di jakarta
Muhammad Zainul Hakim
Developer
Learning the web tech.
Julhan Abdul Malik
Mahasiswa at Nusa Putra University
Hi, I’m Julhan Abdul Malik, a final-year student at Nusa Putra University, majoring in Information Technology, with a GPA of 3.91. I have a strong passion for and extensive experience in Software Engineering, starting from vocational education, internships, programmer training, to professional work experience.
Deden Muhamad Furqon
Academy Code Reviewer at Dicoding Indonesia
Saya memulai perjalanan di bidang Android Development sejak 2017 dan telah lulus dari program Google Developer Kejar 2019, IDCamp 2019, serta Bangkit 2021. Sejak bergabung dengan Dicoding pada tahun 2022, saya mengembangkan keahlian lebih luas di bidang Software Engineering, mencakup Mobile Development (Kotlin, Flutter, dan Swift), Web Development (Frontend & Backend), UI/UX, sampai Project Management.
Certificate:
Jacky Chen
Fullstack Web Developer
I am a graduate with a degree in Information Systems from Institut Bisnis dan Teknologi Pelita Indonesia. I am passionate about website development, focusing on both front-end and back-end aspects.
Kevin Winardi
External Code Reviewer at Dicoding Indonesia
Seseorang yang berdedikasi tinggi untuk belajar.Â
Moch Ridwan Taufik Alamsyah
IT Systems Governance Engineer at Politeknik Ketenagakerjaan, External Code Reviewer at Dicoding Indonesia
- Full Stack Development Enthusiast
- Mobile Development Enthusiast
- Machine Learning Enthusiast
- IoT Enthusiast
"What We Learn When We Learn By Doing?" Roger C. Schank
M. Auliya Mirzaq Romdloni
Software Engineer
Saya merupakan lulusan teknik informatika di ITS Surabaya. Saat ini saya sedang bekerja sebagai software engineer di salah satu perusahaan di Surabaya. Saya sangat tertarik dengan apapun yang terkait dengan pengembangan web dan pengetahuan baru yang saya belum tahu
Listiananda Apriliawan
Frontend Developer
I’m Nanda, a Frontend Developer focused on building production-grade mobile apps with React Native and TypeScript. I deliver features end-to-end, from UI implementation and state management to diagnosing production issues, while keeping codebases maintainable through pragmatic trade-offs.
What I do best:
• React Native (Android/iOS), TypeScript, React
• Performance profiling, crash debugging, and root-cause analysis
• API integration and delivery with modern JS tooling (Node.js/Bun, Vite)
• Collaboration with product/design, code reviews, and raising engineering standards
I’m interested in roles where I can own complex features, improve platform quality (DX, performance, reliability), and contribute at a higher level on teams shipping at scale.
Inggih Wicaksono
Web Developer at Erasys Consulting
- Fullstack man but currently focus on React.js
- Hacktoberfest fans @igihcksn
Agista Septiyanto
Elite Manager at Dicoding Indonesia
Software Engineer with over 5 years of experience delivering digital solutions across mobile, web, backend, and system automation domains. I am proficient in a variety of programming languages and technologies, including JavaScript, TypeScript, PHP, CSS, and HTML. I enjoy exploring different tech stacks, tackling cross-platform challenges, and am currently learning Go, Nix, and deployment technologies.
Throughout my career, I have actively developed a wide range of projects—from Android applications and backend systems to web interfaces and automation tools. In addition to my technical expertise, I have hands-on experience teaching and mentoring in the technical field, sharing knowledge, and helping teams and individuals grow.
Alvin Indra Pratama
Frontend Developer at Antikode
An Frontend Developer working at Antikode a UI UX Agency. 5+ years of experience in the Frontend field. Mastering several technologies such as React.js, Next.js, Vue.js, Nuxt.js, Tailwind CSS, GrahphQL, SEO and others. I also have mentoring experience at Bangkit and Kampus Merdeka.
Ar Fajar Setiaji
Tech Enthusiast
Amor Fati && Memento Mori
Alfian Yusuf Abdullah
Head of Reviewer at Dicoding Indonesia
Nanang Sutisna
- Mobile & Web Enthusiast
- External Code Reviewer at Dicoding Indonesia
Muhammad Fikri Bill Gufran
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, instansi pemerintah dan rumah sakit.
Dimas Maulana Dwi Saputra
Curriculum Developer at Dicoding Indonesia
Gunawan Wahyu Andreanto
Full Stack Developer
Alexzander Purwoko
Code Reviewer at Dicoding Indonesia
MAULANA KAVALDO
Interest in data science, analyst, machine learning and cloud computing. A passion for code and semantics.
RENALDY GATAN PRAMANA
DevOps Enthusiast
Muhammad Nazar Alwi
External Code Reviewer at Dicoding Indonesia
Ivan Andrianto
External Reviewer at Dicoding Indonesia
Grafis Nuresa
Fullstack Developer at Whello
Pixel perfect to build websites and prioritizing performance and reliable REST APIs to keep our Front-End team happy. Hi, I am Grafis Nuresa since 2018, I have been dedicated for those tasks daily, and I think we can agree that I am a Full-Stack Developer but honestly I am more inclined towards the Front-End part with deep experience in WordPress theme and plugin development also UI libraries like React, Vue, Svelte etc even web frameworks like Next.js, Nuxt and Astro. Besides that I have a lot of experience in the Back-End part with Nodejs (Fastify, Express and Hapi) to serve REST APIs for various purposes. Of course I do both of them type safety with TypeScript. Being used to working with multinational people makes me ready to work with anyone and anywhere.
Jonry Simbolon
Keep Learning Maplen,,,
Geraldo Sepdwijaya
Software Engineer at Maybank
Mohamad Zaelani
External Code Reviewer Dicoding
Feel free to connect with me on LinkedIn.
• External Code Reviewer Dicoding
• Backend Developer
• TensorFlow Developer Certified
Tatang Kuswandi
External Code Reviewer at Dicoding Indonesia
Fiqri ardiansyah
Fullstack Developer at INCIT
HA, nice!
Take a look my portfolio
Yusuf Sugiono
Fullstack Web Developer di PT Prima Visi Globalindo
• FrontEnd Instructor - Coding Camp 2026 powered by DBS Foundation
• MLOps Facilitator - IDCamp 2025
• Alumni Bangkit 2021 - Cloud Computing Learning Path
• Alumni SIB Dicoding Cycle 1 - Machine Learning & FrontEnd Learning Path
Feel free to connect with me on LinkedIn
MUHAMMAD IKHLAS NAUFALSYAH RANAU
Frontend Web Developer at Paperpillar
I am a passionate and dedicated Frontend Developer with over three years of experience in creating dynamic and visually appealing web applications. My expertise lies in utilizing cutting-edge technologies to deliver exceptional user experiences. I specialize in Next.js, leveraging its powerful features to build high-performance and scalable web solutions.
Core Competencies
Frontend Development:Â
- Proficient in HTML, CSS, JavaScript, and modern frontend frameworks.
- Next.js Expert: Extensive experience in building and optimizing applications with Next.js.
- Responsive Design: Skilled in creating responsive and mobile-friendly designs.
- UI/UX Principles: Strong understanding of user interface and user experience design.
- Version Control: Experienced with Git and collaborative development workflows.
- Cross-Browser Compatibility: Ensuring consistent performance across different browsers and devices.
YUSRIL ADRIANSYAH PUTRA
External Code Reviewer at Dicoding Indonesia
Hasan Ismail Abdulmalik
Full Stack Engineer - Dicoding Elite
Saya adalah seorang Full Stack Engineer, dengan keahlian di bidang backend development, frontend development, serta cloud computing, saya siap membantu peserta memahami konsep secara mendalam dan menerapkannya dalam membangun solusi digital yang scalable dan berdampak. Pengalaman saya dalam berbagai program fasilitasi dengan peserta dari berbagai latar belakang harapannya dapat membantu teman-teman tumbuh secara menyeluruh dan siap menghadapi tantangan industri teknologi.
Levi Rizki Saputra
Ilham Shiddiq
External Code Reviewer at Dicoding Indonesia. Backend Developer at a company in Bandung.
I Gede Laksmana Yudha
Fullstack Web Developer
Fullstack Web Developer
Eko Rahayu Widodo
Software Engineer
• Lifelong Learner.
• Let's Connect ^^.
Dhea Fesa Athallah
Frontend Developer | Tech Enthusiast | Code Reviewer
Achmad Ali Izzudin
Group Head of Junior Engineers at PLN ICON+
Sofyan Egi Lesmana
You can reach out me on my Linkedin.
Seprian Dani
Owner Petani Canggih Indonesia
Refiandi Reza Syawaldriyansah
External Reviewer Dicoding
Front-End & Javascript Enthusiast
Shidqi Rifat Pangestu
Frontend Developer at Badr Interactive
- Frontend web enthusiast
- Instructor, Mentor, and Advisor Project at Dicoding
- Contribute through technology </>
Usman
Febry Billiyagi Karsidi
-
Stay calm, Stay sharp
Fauzi Kurniawan
External Code Reviewer at Dicoding Indonesia
Javascript enthusiast
Fazar Budiman Eka S
Mahasiswa
I am a final year Informatics Engineering student at Sunan Gunung Djati State Islamic University Bandung. I have sufficient skills in website development using React and Back End with Javascript. Additionally, I have an interest in Machine Learning and Cloud Computing skills.
Tarwin
IT Support
Saya Seorang Support It di suatu perusahaan di jakarta
Muhammad Zainul Hakim
Developer
Learning the web tech.
Julhan Abdul Malik
Mahasiswa at Nusa Putra University
Hi, I’m Julhan Abdul Malik, a final-year student at Nusa Putra University, majoring in Information Technology, with a GPA of 3.91. I have a strong passion for and extensive experience in Software Engineering, starting from vocational education, internships, programmer training, to professional work experience.
Deden Muhamad Furqon
Academy Code Reviewer at Dicoding Indonesia
Saya memulai perjalanan di bidang Android Development sejak 2017 dan telah lulus dari program Google Developer Kejar 2019, IDCamp 2019, serta Bangkit 2021. Sejak bergabung dengan Dicoding pada tahun 2022, saya mengembangkan keahlian lebih luas di bidang Software Engineering, mencakup Mobile Development (Kotlin, Flutter, dan Swift), Web Development (Frontend & Backend), UI/UX, sampai Project Management.
Certificate:
Jacky Chen
Fullstack Web Developer
I am a graduate with a degree in Information Systems from Institut Bisnis dan Teknologi Pelita Indonesia. I am passionate about website development, focusing on both front-end and back-end aspects.
Muhammad Alfin Alfarizi
Academy Code Reviewer At Dicoding Indonesia
Kevin Winardi
External Code Reviewer at Dicoding Indonesia
Seseorang yang berdedikasi tinggi untuk belajar.Â
Andre
Mahasiswa
Satwika Nino Wandhana
Computer Science Student at Universitas Gadjah Mada
Chairul Amri
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 (Solusi untuk React < v18)
25 Menit
Latihan: Menambahkan PropTypes pada Component
30 Menit
Latihan Studi Kasus: Menerapkan PropTypes pada Aplikasi Kontak
30 Menit
Runtime Property Validation di React > v19
15 Menit
Latihan: Runtime Property Validation dengan Joi
25 Menit
Latihan Studi Kasus: Menerapkan Runtime Property Validation dengan Joi
30 Menit
Best Practices: Runtime Property Validation dengan Joi
15 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
860 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