Menjadi React Web Developer Expert
4.91 •

React

React

Learning Path

Menjadi React Web Developer Expert

Topik:

Full Stack Front End +1 lainnya
Level: Mahir

Level: Mahir

Level: Mahir 70 Jam Belajar
2.142

Siswa Terdaftar

Pelajari kaidah penulisan kode, state management dengan Redux, testing, hingga deployment dengan CI/CD pada pengembangan aplikasi React-mu.
Belajar Sekarang
Informasi kelas Lihat silabus
Learning Path React Developer

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

Langkah sebelumnya

Langkah 5
Belajar Fundamental Aplikasi Web dengan React
55 Jam 4,92 Level Menengah
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 Mahir
Menguasai materi dan latihan tingkat lanjut. Kelas ini mensyaratkan sejumlah penguasaan landasan pengetahuan yang baik.
Lihat silabus

Deskripsi

React merupakan UI Library paling populer yang digunakan industri dalam membangun aplikasi web. Tantangan terbesar dalam membangun aplikasi React adalah memastikan aplikasi yang dibangun mudah dikelola, minim bugs, dan teruji. Untuk itu, React developer harus mampu menulis kode yang baik sesuai kaidah, mengelola state dengan baik agar perubahannya lebih terprediksi, dan memastikan aplikasi yang dibuat sudah diuji secara otomatis sebelum menyentuh tahap rilis.

  • State adalah hal yang paling krusial di React, sehingga React developer perlu mengetahui cara mengelola state dengan baik.
  • Redux merupakan tools yang banyak digunakan industri dalam mengelola state UI. Dengan menguasai Redux, developer bisa memperluas kesempatan untuk berkarier.
  • Pengujian aplikasi yang dilakukan secara manual tidak selamanya efektif. Developer harus belajar cara menguji aplikasi secara otomatis agar bisa mengetahui penyebab error secara cepat dan hemat waktu.
  • Proses deployment aplikasi yang dilakukan secara manual rentan terjadi kesalahan. Selain itu, aplikasi sering kali tidak diuji sebelum berjalan ditahap production. Sebagai React Developer, kita harus tahu cara deployment aplikasi yang efisien, aman, dan cepat dengan menggunakan teknik CI/CD.
  • Tingginya kebutuhan industri terhadap talenta digital yang paham dengan React.

Target dan Sasaran Siswa

  • Kelas ini ditujukan untuk React Developer yang ingin meningkatkan kemampuannya dalam penulisan kode yang baik, pengelolaan state dengan Redux, pengujian aplikasi secara otomatis, dan teknik deployment yang efisien, aman, dan cepat.
  • Kelas ini dapat diikuti oleh siswa yang sudah familier dengan fundamental pengembangan aplikasi React seperti React element, React component, React Context, React Hooks, dan React Router.
  • 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 aplikasi React dengan kode yang baik, pengelolaan state menggunakan Redux, diuji dan dideploy secara otomatis.
Selengkapnya
Sembunyikan

Learning Path

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

Langkah sebelumnya

Langkah 5
Belajar Fundamental Aplikasi Web dengan React
55 Jam 4,92 Level Menengah

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 : 70 jam
    • Rekomendasi waktu belajar : 10 jam per minggu (selesai dalam 49 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 aplikasi React dengan kode yang baik, pengelolaan state menggunakan Redux, diuji dan di-deploy secara otomatis.
    • Sertifikat kompetensi

Lihat semua metode ajar

Lihat semua metode ajar

Metode Ajar

  • Online - Self-paced Learning
    • Total jam belajar : 70 jam
    • Rekomendasi waktu belajar : 10 jam per minggu (selesai dalam 49 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 aplikasi React dengan kode yang baik, pengelolaan state menggunakan Redux, diuji dan di-deploy secara otomatis.
    • Sertifikat kompetensi

Kontributor

1

Curriculum Developer yang membangun kelas ini:

Dimas Maulana Dwi Saputra

Dimas Maulana Dwi Saputra

Curriculum Developer at Dicoding Indonesia

Reviewer

24

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

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

Academy Code Reviewer at Dicoding Indonesia
  • Google Data Analytics Professional Certificate
  • UI/UX Enthusiast
  • Machine Learning Enthusiast
  • Mobile & Web Enthusiast
Fiqri ardiansyah
Farhan Rafly Fahrezi Saepulloh
Farhan Rafly Fahrezi Saepulloh

Farhan Rafly Fahrezi Saepulloh

Frontend Engineer

If the physics says it is allowed, the engineers will find a way.

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.

Rizqy Hidayat
Seprian Dani
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
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

Academy Code Reviewer at Dicoding Indonesia

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

Fiqri ardiansyah

Frontend Developer at PT. SPM

HA, nice!

Take a look my portfolio

Farhan Rafly Fahrezi Saepulloh

Farhan Rafly Fahrezi Saepulloh

Frontend Engineer

If the physics says it is allowed, the engineers will find a way.

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.

Rizqy Hidayat

Rizqy Hidayat

Product Engineer, Dicoding Indonesia

Product Engineer, Dicoding

Seprian Dani

Seprian Dani

External Academy Code Reviewer at Dicoding Indonesia

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.

Dzaky Ahmad Badawi
Dzaky Ahmad Badawi
PT. Sarana Maju Lestari
Menjadi React Web Developer Expert
Sangat puas, sebab materi yang diberikan lumayan detil dan membahas yang jarang dibahas seperti penggunaan storybook, cara testing aplikasi, dan CI/CD!
Baca selengkapnya
Silabus
Belajar Sekarang

Silabus

Materi yang akan Anda pelajari pada kelas ini.

  • Pengantar Linter dan Clean Code

    5 Menit

  • Style Guide

    15 Menit

  • JavaScript Linter

    5 Menit

  • Latihan: Menggunakan ESLint pada React Project

    45 Menit

  • Clean Code

    5 Menit

  • Prinsip Membuat Variabel

    20 Menit

  • Prinsip Membuat Fungsi

    35 Menit

  • Prinsip Menangani Proses Asynchronous

    15 Menit

  • Prinsip Penanganan Error

    10 Menit

  • Prinsip Memberikan Komentar

    10 Menit

  • React Clean Code

    25 Menit

  • React Strict Mode

    35 Menit

  • Latihan: Menggunakan React Strict Mode

    45 Menit

  • Rangkuman Linter dan Clean Code

    15 Menit

  • Kuis Linter dan Clean Code

    5 Menit

  • Pendahuluan State Management dengan Redux

    5 Menit

  • State Container (Store)

    15 Menit

  • Latihan: Membuat Store

    30 Menit

  • Action

    15 Menit

  • Kuis Koding: Action Creator

    20 Menit

  • Reducer Function

    30 Menit

  • Kuis Koding: Pure Function

    20 Menit

  • Latihan: Membuat Action, Reducer Function, dan fungsi Dispatch pada Store

    45 Menit

  • Kuis Koding: Reducer Function

    30 Menit

  • Latihan: Mengombinasi Reducer

    20 Menit

  • Kuis Koding: Root Reducer

    15 Menit

  • Latihan: Redux Library

    10 Menit

  • React Redux

    15 Menit

  • Latihan: Menggunakan Redux Store di React

    45 Menit

  • Redux Middleware

    20 Menit

  • Latihan: Membuat dan Menggunakan Redux Middleware

    30 Menit

  • Asynchronous Action

    25 Menit

  • Latihan: Asynchronous Action

    45 Menit

  • Third Party Middleware

    10 Menit

  • Redux Best Practices

    20 Menit

  • Real World Project: Implementasi Redux pada Aplikasi Sosial Media Open Space (Twitter Like App)

    10 Menit

  • Menyiapkan, Menjalankan, dan Menganalisis Proyek Starter

    35 Menit

  • Membuat Action dan Reducer untuk State authUser

    25 Menit

  • Membuat Action dan Reducer untuk State isPreload

    25 Menit

  • Membuat Action dan Reducer untuk State users

    25 Menit

  • Membuat Action dan Reducer untuk State talks

    25 Menit

  • Membuat Action dan Reducer untuk State talkDetail

    25 Menit

  • Membuat Shared Action

    15 Menit

  • Membuat Redux Store

    15 Menit

  • Menggunakan Redux Store pada React Component

    30 Menit

  • Menerapkan Loading Bar

    25 Menit

  • Rangkuman State Management dengan Redux

    20 Menit

  • Kuis State Management dengan Redux

    5 Menit

  • Proyek: Membangun Aplikasi React dengan Redux

    1200 Menit

  • Pengantar Automation Testing

    5 Menit

  • Pentingnya Pengujian pada Pengembangan Aplikasi

    10 Menit

  • Mengenal Automation Testing

    5 Menit

  • Automation Testing di JavaScript

    15 Menit

  • Framework Testing untuk JavaScript

    20 Menit

  • Mengenal Kultur Test Driven Development

    15 Menit

  • Latihan: Mencoba Unit Testing dengan Kultur TDD

    45 Menit

  • Latihan: Menerapkan Unit Testing untuk Menguji Fungsi Reducer

    45 Menit

  • Test Double

    25 Menit

  • Latihan: Test Double untuk Menguji Thunk Function

    45 Menit

  • React Testing Library

    30 Menit

  • Latihan: Menguji Komponen React

    45 Menit

  • End-to-End Test dengan Cypress

    15 Menit

  • Latihan: Memasang dan Mengonfigurasi Cypress

    35 Menit

  • Latihan: E2E Test pada Proses Login Aplikasi

    45 Menit

  • Rangkuman Automation Testing

    10 Menit

  • Kuis Automation Testing

    5 Menit

  • Pengantar Deployment dengan CI/CD

    5 Menit

  • Cara Developer Mengelola Kode

    10 Menit

  • Pengertian CI/CD

    10 Menit

  • Platform CI/CD untuk Aplikasi React

    5 Menit

  • Alur CI/CD

    10 Menit

  • Persiapan Latihan Deployment dengan CI/CD

    10 Menit

  • Latihan: Memasang Git pada Komputer

    25 Menit

  • Latihan: Membuat Local Repository

    15 Menit

  • Latihan: Membuat Akun GitHub

    10 Menit

  • Latihan: Menghubungkan Akun GitHub di Lokal Git dengan GitHub CLI

    15 Menit

  • Latihan: Membuat Remote Repository dan Mengunggah Source Code ke GitHub

    15 Menit

  • Latihan: Membuat CI Menggunakan GitHub Action

    35 Menit

  • Latihan: Membuat CD dengan Vercel

    35 Menit

  • Latihan: Menguji Deployment dengan CI/CD

    35 Menit

  • Latihan: Memasang Proteksi pada Branch Master

    15 Menit

  • Rangkuman Deployment dengan CI/CD

    10 Menit

  • Kuis Deployment dengan CI/CD

    5 Menit

  • Pengantar React Useful Ecosystem

    5 Menit

  • Static React Site dengan Next.js

    15 Menit

  • Latihan: Membuat Proyek Next.js

    45 Menit

  • CSS-in-JS dengan Styled Component

    20 Menit

  • Latihan: Membuat Styled Component

    45 Menit

  • Isolasi Komponen dengan Storybook

    20 Menit

  • Latihan: Membuat Lingkungan yang Aman untuk Bereksperimen pada Komponen dengan Storybook

    45 Menit

  • Rangkuman React useful Ecosystem

    10 Menit

  • Kuis React Useful Ecosystem

    5 Menit

  • Rangkuman Kelas

    15 Menit

  • Ujian Akhir

    30 Menit

  • Submission: Menerapkan Automation Testing dan CI/CD pada Aplikasi Forum Diskusi

    950 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