Belajar Fundamental Aplikasi Web dengan React

4.93 •

React

Learning Path

Belajar Fundamental Aplikasi Web dengan React

Teknologi:

Web

Level: Menengah

Level: Menengah 55 Jam Belajar

1.326

Siswa Terdaftar

Pelajari penerapan validasi props, client routing, transaksi RESTful API, hingga React Hooks sebagai fondasi dalam membangun aplikasi React.

Belajar Sekarang

Informasi kelas Lihat silabus

Learning Path React Developer

Kelas ini merupakan langkah ke-lima Anda untuk menjadi React Developer.

Langkah sebelumnya

Langkah 4

Belajar Membuat Aplikasi Web dengan React

35 Jam 4,91 Level Pemula

Langkah setelahnya

Langkah 6

Menjadi React Web Developer Expert

70 Jam 4,91 Level Mahir

Apa yang akan Anda dapatkan

Sertifikat

Dapatkan sertifikat standar industri setelah menyelesaikan kelas ini.

Code Review

Kode yang Anda kerjakan akan di-review secara komprehensif oleh Reviewer.

Forum Diskusi

Diskusikan materi belajar dengan siswa lainnya.

Modul Tutorial

Materi bacaan elektronik disajikan dengan bahasa yang mudah dipahami.

Submission

Uji kemampuan teknis Anda dengan mengerjakan tugas submission.

Kode Interaktif

Modul belajar dalam bentuk video, disertai dengan latihan untuk menguji pemahaman.

Kuis

Kuis pilihan ganda membantu Anda memahami materi yang dipelajari.

Ujian

Validasi pengetahuan Anda dengan mengerjakan soal-soal ujian.

Level Menengah
Memahami konsep dasar secara mendalam dan luas. Di sejumlah kelas mempelajari teknik khusus untuk pemahaman praktis.

Deskripsi

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.

React Developer wajib mengetahui cara membuat aplikasi yang terbebas dari bugs, dapat menangani proses asynchronous, mengirim data antar-komponen dengan efektif, dan menulis kode yang baik dengan React Hooks..
Tingginya kebutuhan industri terhadap talenta digital yang paham dengan React.
React dipercaya dan digunakan oleh perusahaan besar nasional dan multinasional.
React memiliki komunitas developer yang besar baik di luar negeri maupun di dalam negeri.
Pengembangan aplikasi React tidak membutuhkan device dengan spesifikasi yang tinggi.

Target dan Sasaran Siswa

Kelas ini ditujukan untuk seorang yang ingin mendalami fundamental Front-End Web Developer dengan memanfaatkan library React dalam membangun antarmuka pengguna.
Kelas dapat diikuti oleh siswa yang sudah familier dengan konsep dasar React, Element dan Component, serta mampu membuat aplikasi React secara sederhana .
Siswa diharapkan sudah mampu mengembangkan aplikasi web di sisi Front-End, menguasai HTML, CSS, dan JavaScript serta sudah familier dengan sintaksis ES6.
Siswa harus bisa belajar mandiri, berkomitmen, benar-benar punya rasa ingin tahu, dan tertarik pada subjek materi, karena sebaik apa pun materi kelas ini, tidak akan berguna tanpa keseriusan siswa untuk belajar, berlatih, dan mencoba.
Di akhir kelas siswa dapat membuat web aplikasi dengan React yang menerapkan validasi props, client routing, component lifecycle, context, dan hooks.

Selengkapnya

Sembunyikan

Learning Path

Kelas ini merupakan langkah ke-lima Anda untuk menjadi React Developer.

Langkah sebelumnya

Langkah 4

Belajar Membuat Aplikasi Web dengan React

35 Jam 4,91 Level Pemula

Langkah setelahnya

Langkah 6

Menjadi React Web Developer Expert

70 Jam 4,91 Level Mahir

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

Peralatan Belajar

Spesifikasi minimal perangkat

Kelas 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)

Tools

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

Online - Self-paced Learning
- Total jam belajar : 55 jam
- Rekomendasi waktu belajar : 10 jam per minggu (selesai dalam 39 hari)
- Anda tentukan sendiri berapa lama waktu yang akan digunakan untuk belajar materi kelas ini selama masih aktif terdaftar pada kelas
Fasilitas Pengajaran
- Materi bacaan elektronik : Materi akan disajikan dalam bentuk teks dan bacaan
- Forum diskusi : Setiap kelas memiliki sebuah forum diskusi yang dapat Anda gunakan untuk bertanya dan berdiskusi
- Evaluasi pembelajaran :
  - Ujian Akhir Kelas
  - Submission (Proyek Akhir) berupa membangun web aplikasi dengan React yang menerapkan validasi props, client routing, component lifecycle, context, dan hooks.
  - Sertifikat kompetensi

Lihat semua metode ajar

Metode Ajar

Online - Self-paced Learning
- Total jam belajar : 55 jam
- Rekomendasi waktu belajar : 10 jam per minggu (selesai dalam 39 hari)
- Anda tentukan sendiri berapa lama waktu yang akan digunakan untuk belajar materi kelas ini selama masih aktif terdaftar pada kelas
Fasilitas Pengajaran
- Materi bacaan elektronik : Materi akan disajikan dalam bentuk teks dan bacaan
- Forum diskusi : Setiap kelas memiliki sebuah forum diskusi yang dapat Anda gunakan untuk bertanya dan berdiskusi
- Evaluasi pembelajaran :
  - Ujian Akhir Kelas
  - Submission (Proyek Akhir) berupa membangun web aplikasi dengan React yang menerapkan validasi props, client routing, component lifecycle, context, dan hooks.
  - Sertifikat kompetensi

Kontributor

Curriculum Developer yang membangun kelas ini:

Dimas Maulana Dwi Saputra

Curriculum Developer at Dicoding Indonesia

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

Full Stack Development Enthusiast
Mobile Development Enthusiast
Machine Learning Enthusiast

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

Associate Android Developer

Alfian Yusuf Abdullah

Head of Reviewer at Dicoding Indonesia

Associate Android Developer
Kotlin Enthusiast
UI/UX Enthusiast

Dimas Maulana Dwi Saputra

Curriculum Developer at Dicoding Indonesia

Mobile and Web Enthusiast
Node.js Developer Certified
AWS Certified Cloud Practitioner
React Developer
Associate Android Developer

Lihat semua kontributor dan reviewer

Kontributor & Reviewer

Kontributor 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

Full Stack Development Enthusiast
Mobile Development Enthusiast
Machine Learning Enthusiast

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

Associate Android Developer

Alfian Yusuf Abdullah

Head of Reviewer at Dicoding Indonesia

Associate Android Developer
Kotlin Enthusiast
UI/UX Enthusiast

Dimas Maulana Dwi Saputra

Curriculum Developer at Dicoding Indonesia

Mobile and Web Enthusiast
Node.js Developer Certified
AWS Certified Cloud Practitioner
React Developer
Associate Android Developer

Alexzander Purwoko Widiantoro

Code Reviewer at Dicoding Indonesia

Associate Android Developer
Android, Web & IoT Enthusiast

Ivan Andrianto

External Reviewer at Dicoding Indonesia

Google Data Analytics Professional Certificate
UI/UX Enthusiast
Machine Learning Enthusiast
Mobile & Web Enthusiast

Ilham Shiddiq

External Code Reviewer at Dicoding Indonesia. Backend Developer at a company in Bandung.

Back-End Web Developer
Web Developing Enthusiast

Sofyan Egi Lesmana

External Code Reviewer at Dicoding Indonesia

SIB Graduate Batch 2 - Front-End & Back-End Web
Certified by 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

Full Stack Development Enthusiast
Mobile Development Enthusiast
Machine Learning Enthusiast

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

Associate Android Developer

Alfian Yusuf Abdullah

Head of Reviewer at Dicoding Indonesia

Associate Android Developer
Kotlin Enthusiast
UI/UX Enthusiast

Dimas Maulana Dwi Saputra

Curriculum Developer at Dicoding Indonesia

Mobile and Web Enthusiast
Node.js Developer Certified
AWS Certified Cloud Practitioner
React Developer
Associate Android Developer

Alexzander Purwoko Widiantoro

Code Reviewer at Dicoding Indonesia

Associate Android Developer
Android, Web & IoT Enthusiast

Ivan Andrianto

External Reviewer at Dicoding Indonesia

Google Data Analytics Professional Certificate
UI/UX Enthusiast
Machine Learning Enthusiast
Mobile & Web Enthusiast

Ilham Shiddiq

External Code Reviewer at Dicoding Indonesia. Backend Developer at a company in Bandung.

Back-End Web Developer
Web Developing Enthusiast

Sofyan Egi Lesmana

External Code Reviewer at Dicoding Indonesia

SIB Graduate Batch 2 - Front-End & Back-End Web
Certified by 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.

Testimoni Siswa

Ribuan siswa sukses belajar di Dicoding Academy. Apa kata mereka? Berikut adalah testimoni asli mereka.

Danar Dono

Institut Sains dan Teknologi Terpadu Surabaya

Memulai Dasar Pemrograman untuk Menjadi Pengembang Software

Di kelas ini, akan diajarkan bagaimana konsep dasar pemograman. Saya sendiri merasa (seperti mengulas) kembali belajar mata kuliah algoritma 1, namun materinya disampaikan secara interaktif dan menyeyangkan sehingga relatif lebih cepat paham. Terima kasih Dicoding.

Baca selengkapnya

Muhammad Rafli

Universitas Padjadjaran

Memulai Dasar Pemrograman untuk Menjadi Pengembang Software

Kelas ini benar-benar memberikan pemahaman yang baik tentang pemrograman. Dengan bahasa yang menarik, mudah dipahami, dan sedikit humor, saya selaku orang non-IT dapat memahami kelas ini dengan baik. Terima kasih Dicoding.

Baca selengkapnya

Lihat semua testimoni

Testimoni Siswa

Danar Dono

Institut Sains dan Teknologi Terpadu Surabaya

Memulai Dasar Pemrograman untuk Menjadi Pengembang Software

Di kelas ini, Anda akan diajarkan bagaimana konsep dasar pemograman. Saya sendiri merasa (seperti mengulas) kembali belajar mata kuliah algoritma 1, namun materinya disampaikan secara interaktif dan menyeyangkan sehingga relatif lebih cepat paham. Terima kasih dicoding atas materi pembelajarannya. Salam.

Muhammad Rafli

Universitas Padjadjaran

Memulai Dasar Pemrograman untuk Menjadi Pengembang Software

Thifal Nurrifqi Ariel Kurniawan

Universitas Pendidikan Indonesia

Memulai Dasar Pemrograman untuk Menjadi Pengembang Software

Kelas ini sangat informatif dan bermanfaat bagi siapapun yang hendak memulai langkah di dunia pemrograman. Hal ini dikarenakan media dan pendekatan yang digunakan menjadikan saya mudah memahami tentang pemrograman dari 0 dan tidak buta arah untuk menentukan langkah selanjutnya.

Timotius Haniel

Boston Consulting Group

Memulai Dasar Pemrograman untuk Menjadi Pengembang Software

Melalui kelas Basic Programming 101, Saya menyadari bahwa betapa pentingnya basic yang kuat bagi seorang developer. Melalui basic yang kuat, seorang programmer dapat lebih mudah mengembangkan setiap software yang akan dibangun. "Bangunan yang tinggi dan besar, pasti memiliki pondasi yang kokoh"

Punya pertanyaan seputar kelas ini?

Berikut adalah beberapa pertanyaan yang paling sering ditanyakan.

Bagaimana cara memasukkan token Academy? Aturan membuat pertanyaan di forum diskusi kelas Bagaimana cara mencetak sertifikat kelulusan kelas?

Lihat semua FAQ

Silabus

Materi yang akan Anda pelajari pada kelas ini.

Persiapan Belajar

Memahami HAKI, mekanisme belajar, forum diskusi, glosarium, dan daftar referensi.

8 Artikel

80 menit

Persetujuan Hak Cipta
2 Menit
Prasyarat Kemampuan
10 Menit
Prasyarat Tools
10 Menit
Proyek Awal Studi Kasus Aplikasi Kontak
10 Menit
Mekanisme Belajar
10 Menit
Forum Diskusi
20 Menit
Glosarium
10 Menit
Daftar Referensi
8 Menit

Property Validation

Belajar cara memvalidasi komponen props menggunakan PropTypes.

6 Artikel
1 Ujian

145 menit

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

React Router

Belajar cara membuat routing di sisi client yang mudah dengan menggunakan ekosistem React Router.

11 Artikel
1 Ujian

265 menit

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

Submission: Membangun Single Page Application dengan React

Menguji pemahaman peserta akan materi Property Validation dan React Router dengan membuat aplikasi yang menerapkan routing dan validasi properti di React.

1 Submission

945 menit

Proyek: Membangun Single Page Application menggunakan React

945 Menit

Component Lifecycle

Belajar cara memanfaatkan lifecycle method untuk menangani proses asynchornous seperti mendapatkan data dari API di dalam komponen.

12 Artikel
1 Ujian

305 menit

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

React Context

Belajar cara menyimpan state global yang dapat diakses tanpa praktik props drilling dengan menggunakan React Context.

6 Artikel
1 Ujian

125 menit

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

React Hooks

Belajar cara menuliskan kode React yang lebih baik dengan memaksimalkan penggunaan functional component melalui Hooks.

14 Artikel
1 Ujian

275 menit

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

Penutup

Menguji pemahaman peserta mengenai keseluruhan materi yang telah diajarkan pada kelas melalui ujian.

1 Artikel
1 Ujian

60 menit

Rangkuman Kelas

30 Menit
Ujian Akhir

30 Menit

Submission Akhir: Membangun SPA + API, Context, dan Hooks

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.