Belajar Fundamental Aplikasi Web dengan React
4.92 •

React

React

Learning Path

Belajar Fundamental Aplikasi Web dengan React

Teknologi:

Web
Level: Menengah

Level: Menengah

Level: Menengah 55 Jam Belajar
3.159

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,90 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.
Lihat silabus

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

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

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

2

Curriculum Developer yang membangun kelas ini:

Dimas Maulana Dwi Saputra

Dimas Maulana Dwi Saputra

Curriculum Developer at Dicoding Indonesia

Zain Fathoni

Zain Fathoni

Senior Front-End Engineer at Relay Commerce

Reviewer

26

Code Reviewer yang akan me-review tugas dan kode Anda:

Moch Ridwan Taufik Alamsyah
Moch Ridwan Taufik Alamsyah

Moch Ridwan Taufik Alamsyah

R&D Engineer at Citra Sabda Abadi, External Code Reviewer at Dicoding Indonesia

- Full Stack Development Enthusiast
- Mobile Development Enthusiast
- Machine Learning Enthusiast
- IoT Enthusiast

Motto: "What We Learn When We Learn By Doing?" Roger C. Schank

Inggih Wicaksono
Inggih Wicaksono

Inggih Wicaksono

Web Developer at Erasys Consulting

- Fullstack man but currently focus on React.js

- Hacktoberfest fans @igihcksn

Agista Septiyanto
Alvin Indra Pratama
Alfian Yusuf Abdullah
Alfian Yusuf Abdullah

Alfian Yusuf Abdullah

Head of Reviewer at Dicoding Indonesia
  • Associate Android Developer
  • Kotlin Enthusiast
  • UI/UX Enthusiast

Lihat semua kontributor dan reviewer

Lihat semua kontributor dan reviewer

Kontributor & Reviewer

Kontributor kelas

Curriculum Developer yang membangun kelas ini:

Dimas Maulana Dwi Saputra

Dimas Maulana Dwi Saputra

Curriculum Developer at Dicoding Indonesia

Zain Fathoni

Zain Fathoni

Senior Front-End Engineer at Relay Commerce

Tim Reviewer

Code Reviewer yang akan me-review tugas dan kode Anda:

Moch Ridwan Taufik Alamsyah
Moch Ridwan Taufik Alamsyah

Moch Ridwan Taufik Alamsyah

R&D Engineer at Citra Sabda Abadi, External Code Reviewer at Dicoding Indonesia

- Full Stack Development Enthusiast
- Mobile Development Enthusiast
- Machine Learning Enthusiast
- IoT Enthusiast

Motto: "What We Learn When We Learn By Doing?" Roger C. Schank

Inggih Wicaksono
Inggih Wicaksono

Inggih Wicaksono

Web Developer at Erasys Consulting

- Fullstack man but currently focus on React.js

- Hacktoberfest fans @igihcksn

Agista Septiyanto
Alvin Indra Pratama
Alfian Yusuf Abdullah
Alfian Yusuf Abdullah

Alfian Yusuf Abdullah

Head of Reviewer at Dicoding Indonesia
  • Associate Android Developer
  • Kotlin Enthusiast
  • UI/UX Enthusiast
Nanang Sutisna
Nanang Sutisna

Nanang Sutisna

- Mobile & Web Enthusiast

- External Code Reviewer at Dicoding Indonesia

Putu Jhonarendra
Putu Jhonarendra

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 pemerintah.

Dimas Maulana Dwi Saputra
Gunawan Wahyu Andreanto
Alexzander Purwoko
Alexzander Purwoko

Alexzander Purwoko

Code Reviewer at Dicoding Indonesia

  • Associate Android Developer
  • Android, Web & IoT Enthusiast
Abdul Malik
Ivan Andrianto
Ivan Andrianto

Ivan Andrianto
  • Google Data Analytics Professional Certificate
  • UI/UX Enthusiast
  • Machine Learning Enthusiast
  • Mobile & Web Enthusiast
Mohamad Zaelani
Mohamad Zaelani

Mohamad Zaelani

External Code Reviewer Dicoding

Feel free to connect with me on LinkedIn.

• External Code Reviewer Dicoding

• Backend Developer

• TensorFlow Developer Certified

• AWS Certified Cloud Practitioner

• AWS Certified Solutions Architect – Associate

Swanddd
Fiqri ardiansyah
YUSRIL ADRIANSYAH PUTRA
YUSRIL ADRIANSYAH PUTRA

YUSRIL ADRIANSYAH PUTRA

External Code Reviewer at Dicoding Indonesia
  • Front-End Web Developer
  • Back-End Web Developer
  • Javascript Enthusiast
Hasan Ismail Abdulmalik
Hasan Ismail Abdulmalik

Hasan Ismail Abdulmalik

Software Engineering Student at College of Vocational Studies IPB University

I am a web developer who is interested in both backend and frontend development. I have been teaching myself web development and am familiar with programming languages such as HTML, CSS, JavaScript, PHP and Python as well as frameworks like Laravel, Django, React and Node.js. I am eager to gain practical experience and contribute to the development of high-quality websites and software.

Ilham Shiddiq
Eko Rahayu Widodo
Eko Rahayu Widodo

Eko Rahayu Widodo

Software Engineer

• Lifelong Learner.

• Let's Connect ^^.

Sofyan Egi Lesmana
Sofyan Egi Lesmana

Sofyan Egi Lesmana

You can reach out me on my Linkedin.

Seprian Dani
Refiandi Reza Syawaldriyansah
Shidqi Rifat Pangestu
Shidqi Rifat Pangestu

Shidqi Rifat Pangestu

Frontend Developer at Badr Interactive

- Frontend web enthusiast
- Contribute through technology </>

Fazza Razaq Amiarso
Fazza Razaq Amiarso

Fazza Razaq Amiarso

Software Engineer@WidaTech & Mentor

I'm a self-taught web developer focusing on making everyone can inclusively use the web. Currently learning and building interactive experience on the Web and Mobile.

Huge believer (and doer ofc) in learning by doing.

Personal Website: https://www.fazzaamiarso.com

Github: https://github.com/fazzaamiarso

Fauzi Kurniawan
Muhammad Zainul Hakim
Muhammad Zainul Hakim

Muhammad Zainul Hakim

Developer

Learning the web tech.

Moch Ridwan Taufik Alamsyah

Moch Ridwan Taufik Alamsyah

R&D Engineer at Citra Sabda Abadi, External Code Reviewer at Dicoding Indonesia

- Full Stack Development Enthusiast
- Mobile Development Enthusiast
- Machine Learning Enthusiast
- IoT Enthusiast

Motto: "What We Learn When We Learn By Doing?" Roger C. Schank

Inggih Wicaksono

Inggih Wicaksono

Web Developer at Erasys Consulting

- Fullstack man but currently focus on React.js

- Hacktoberfest fans @igihcksn

Agista Septiyanto

Agista Septiyanto

Product Engineer

Tim product

Alvin Indra Pratama

Alvin Indra Pratama

Frontend Developer at Antikode

  • Front-End Developer
Alfian Yusuf Abdullah

Alfian Yusuf Abdullah

Head of Reviewer at Dicoding Indonesia

  • Associate Android Developer
  • Kotlin Enthusiast
  • UI/UX Enthusiast
Nanang Sutisna

Nanang Sutisna

- Mobile & Web Enthusiast

- External Code Reviewer at Dicoding Indonesia

Putu Jhonarendra

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 pemerintah.

Gunawan Wahyu Andreanto

Gunawan Wahyu Andreanto

Full Stack Developer

meh
Alexzander Purwoko

Alexzander Purwoko

Code Reviewer at Dicoding Indonesia

  • Associate Android Developer
  • Android, Web & IoT Enthusiast
Abdul Malik

Abdul Malik

Frontend Developer

Let's get in touch with me:

Linkedin - GitHub - Facebook

Ivan Andrianto

Ivan Andrianto

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

Mohamad Zaelani

External Code Reviewer Dicoding

Feel free to connect with me on LinkedIn.

• External Code Reviewer Dicoding

• Backend Developer

• TensorFlow Developer Certified

• AWS Certified Cloud Practitioner

• AWS Certified Solutions Architect – Associate

Swanddd

Swanddd

External Code Reviewer at Dicoding Indonesia

  • Mobile and Web Enthusiast
Fiqri ardiansyah

Fiqri ardiansyah

Frontend Developer at PT. SPM

HA, nice!

Take a look my portfolio

YUSRIL ADRIANSYAH PUTRA

YUSRIL ADRIANSYAH PUTRA

External Code Reviewer at Dicoding Indonesia

  • Front-End Web Developer
  • Back-End Web Developer
  • Javascript Enthusiast
Hasan Ismail Abdulmalik

Hasan Ismail Abdulmalik

Software Engineering Student at College of Vocational Studies IPB University

I am a web developer who is interested in both backend and frontend development. I have been teaching myself web development and am familiar with programming languages such as HTML, CSS, JavaScript, PHP and Python as well as frameworks like Laravel, Django, React and Node.js. I am eager to gain practical experience and contribute to the development of high-quality websites and software.

Ilham Shiddiq

Ilham Shiddiq

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

  • Back-End Web Developer
  • Web Developing Enthusiast
Eko Rahayu Widodo

Eko Rahayu Widodo

Software Engineer

• Lifelong Learner.

• Let's Connect ^^.

Sofyan Egi Lesmana

Sofyan Egi Lesmana

You can reach out me on my Linkedin.

Seprian Dani

Seprian Dani

External Academy Code Reviewer at Dicoding Indonesia

Refiandi Reza Syawaldriyansah

Refiandi Reza Syawaldriyansah

External Reviewer Dicoding

Front-End & Javascript Enthusiast

Shidqi Rifat Pangestu

Shidqi Rifat Pangestu

Frontend Developer at Badr Interactive

- Frontend web enthusiast
- Contribute through technology </>

Fazza Razaq Amiarso

Fazza Razaq Amiarso

Software Engineer@WidaTech & Mentor

I'm a self-taught web developer focusing on making everyone can inclusively use the web. Currently learning and building interactive experience on the Web and Mobile.

Huge believer (and doer ofc) in learning by doing.

Personal Website: https://www.fazzaamiarso.com

Github: https://github.com/fazzaamiarso

Fauzi Kurniawan

Fauzi Kurniawan

External Code Reviewer at Dicoding Indonesia

Javascript enthusiast

Muhammad Zainul Hakim

Muhammad Zainul Hakim

Developer

Learning the web tech.

Testimoni Siswa

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

Muhammad Theda Amanda
Muhammad Theda Amanda
Dinas Komunikasi, Informatika, Statistik dan Persandian
Belajar Fundamental Aplikasi Web dengan React
Sangat puas sekali dengan mengikuti kelas ini saya bisa lebih memahami react secara mendalam.
Baca selengkapnya
Rusdia Hamid
Rusdia Hamid
PT Steel Pipe Industry of Indonesia Tbk
Belajar Fundamental Aplikasi Web dengan React
Terima kasih saya sampaikan kepada tim dicoding karena telah menuajikan kelas lengkap yang mudah dipahami
Baca selengkapnya
Silabus
Belajar Sekarang

Silabus

Materi yang akan Anda pelajari pada kelas ini.

  • 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

  • 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

  • Proyek: Membangun Single Page Application menggunakan React

    945 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

  • 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

  • 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

  • Rangkuman Kelas

    30 Menit

  • Ujian Akhir

    30 Menit

  • Proyek: Membangun SPA + API, Context, dan Hooks

    1100 Menit

Dicoding Logo

Dicoding Space
Jl. Batik Kumeli No.50, Sukaluyu,
Kec. Cibeunying Kaler, Kota Bandung
Jawa Barat 40123

Penghargaan

Asean Business Award 2019

Decode Ideas
Discover Potential

Tentang Kami
Blog
Reward
Showcase
Dicoding Elite
Hubungi Kami
FAQ