React Fundamental Profesional

Best Explanation of Reactjs

Yang dibahas di sini bukan sekadar bikin aplikasi bisa jalan. Tapi gimana bikin komponen rapi, scalable, dan bisa dipakai bareng-bareng dalam tim. Kita bedah berbagai Advanced React Pattern biar kamu ngerti cara kerja UI library populer yang digunakan banyak developer, dan bisa bikin pattern sendiri yang reusable.

React Fundamental Profesional

Materi

icon-Dasar Javascript untuk Reactjs

Dasar Javascript untuk Reactjs

Banyak sekali syntax Javascript yang bisa kita gunakan dalam membuat aplikasi web. namun ketika kita menulis kode dengan Reactjs, ada syntax Javascript yang sering digunakan. Sebagai pemanasan kita coba bahas tipis-tipis

1

Selamat Datang

Inilah alasan kuat mengapa course ini hadir
05:17
2

Rekomendasi Video Sebelum Belajar Reactjs

Tonton video yang beredar di youtube tentang javascript untuk menyamakan konteks.
02:15
3

Template Literal

Gabungin value javascript semudah itu
02:39
4

Short Hand Property Name

Hemat tenaga menulis nilai berbentuk object
00:10
5

Arrow Function

Cara lain menulis fungsi di javascript
02:42
6

Object & Array Destructuring

Syntax ini yang sering dipakai React untuk membungkus abstraksinya.
05:13
7

Rest and Spread Operator

Teknik ampuh untuk memecahkan struktur data
04:40
8

ECMAScript Module

Reuse kode jadi lebih mudah dan bersih
01:59
9

Ternaries Operator

Syntax ini adalah satu satunya jalan membuat pengkondisian di antara kode JSX
01:52
10

Array Method

Pelajari betapa pentingnya mengetahui teknik mengelola nilai berbentuk array
00:27
11

Array Method: Find

Cari nilai di dalam Array sesuai kondisi nilai yang kita inginkan
01:00
12

Array Method: Some

Apakah ada nilai di dalam array yang kita cari ?
01:49
13

Array Method: Every

Apakah semua nilai array adalah nilai yang kita cari ?
01:04
14

Array Method: Includes

Apakah nilai yang kita cari ada di dalam Array ?
00:48
15

Array Method: Map

Kita ubah bentuk isi daripada Array
03:40
16

Array Method: Filter

Jadikan Array hanya berisi nilai yang kita inginkan
01:46
17

Nullish Operator

Hati hati dalam menulis Pengkondisian pada Javascript
03:24
18

Optional Chaining

Syntax yang dihindari, namun pakai jika kepepet
03:07
19

Async Await

Menunggu kode bernilai Promise untuk diselesaikan terlebih dahulu
04:30
icon-React Dasar Fundamental

React Dasar Fundamental

Temukan alasan kalian menggunakan Reactjs, cari tahu cara kerja Reactjs dan bagaimana menggunakannya. Miliki fundamental yang kuat ketika kita membangun aplikasi web menggunakan Reactjs.

1

Mengapa Web Development

Bagaimana Prospek posisi web dibandingkan platform lain
02:29
2

Menghadapi Teknologi Baru Setiap Hari

Key mindset untuk menghadapi Stack yang muncul terus menerus
03:41
3

Luasnya dunia Web Development

Pada akhirnya untuk survive kita harus memilih
05:30
4

DOM & DOM Manipulation

Masalah apa yang sebenarnya terjadi, sehingga kita harus pakai React
05:47
5

Virtual DOM

Beginilah cara kerja Virtual DOM. Cara berfikir yang menarik
04:32
6

Hello World

Ritual wajib programmer setiap belajar sesuatu
05:54
7

React API

Pahami bagaimana sebenarnya React Bekerja dibalik layar
07:13
8

React API Nested Element

Bagaimana React menangani struktur DOM yang bercabang
02:39
9

Element Attribute

Bagaimana penulisan attribut html di React API, kita bahas di sini
01:41
10

JSX

Synthetic Sugar yang dibuat tim React untuk mengabstraksi semuanya
03:07
11

Kenalan dengan Babel

Dibalik layar bagaimana dan kenapa JSX diciptakan
02:38
12

Bagaimana Babel menerjemahkan JSX

Mengapa kita harus import React di setiap file JSX
04:36
13

Menulis Syntax Javascript di antara Kode JSX

Kelemahan yang harus disadari dibalik file JSX
03:31
14

Component

Ini yang membuat React menjadi library yang Deklaratif
07:24
15

Custom Component

Tag html yang namanya sesuka kita. Cari tahu Bagaimana React memprosesnya
03:19
16

React Fragment

Kondisi yang harus kita ikuti jika pakai JSX
02:12
17

Props

Salah satu jalan untuk tukar alur data pada Component React
02:16
18

Key Props

Jawaban paling jelas mengapa key pada component itu dibutuhkan
06:42
19

Props Type

Validasi data untuk mencegah error terjadi
08:08
20

Best Practice Props Typing

Inilah mengapa teknologi ini dipakai dimana mana
02:18
21

Tools Management

Berbagai permasalahan yang harus diselesaikan secara bersamaan
09:45
22

Styling

Berbagai jalan mempercantik tampilan
06:21
23

Global CSS

Metode paling tradisional mempercantik tampilan
00:46
24

CSS Module

Memecahkan masalah yang ada pada global css
03:24
25

CSS Preprocessor

Next level ngoding css
03:51
26

CSS in JS

Stack yang dipakai di perusahaan ecommerce
05:45
27

CSS Utility Classes

Tailwind paling populer dibidang ini
06:27
28

CSS Framework & Component Library

Metode cepat untuk membuat fungsional component react
01:42
29

Form

Metode dasar untuk menerima data input dari user
08:50
30

Form Component Controlled

Memanfaatkan API React namun harus tahu bagaimana kelemahannya
03:56
31

Controlled vs Uncontrolled

Metode apa yang sebaiknya kita gunakan untuk membuat Form
05:34
icon-React Hooks Dasar

React Hooks Dasar

Membahas konsep dasar penggunaan React Hooks untuk membuat web menjadi interaktif. Jangan sampai Reacjs mengendalikan kamu. Tapi kamulah yang harus mengendalikan Reactjs

1

Komponen interaktif dengan useState

Membuat component React menjadi interaktif
07:20
2

Bikin sendiri fungsi useState

Buat ulang useState pakai Vanilla Js, alias ga pakai React, supaya tahu cara kerja useState sebenarnya
06:12
3

Ada Bug di useState yang kita buat

Ternyata tidak sesederhana itu, tapi mari kita pecahkan
04:44
4

Inilah alasan aturan Hooks itu lahir

Oalah pantesan peraturannya gitu
06:44
5

Merancang kebutuhan useState

Cara efektif dan efisien dalam penggunaan useState
03:44
6

Component Rerender

Semua developer React berlomba lomba untuk memecahkan masalah ini
07:35
7

React Lifecycle

Pengetahuan wajib para developer React untuk menghindari bad code
05:42
8

Interaksi eksternal dengan useEffect

Pintu darurat untuk membuat komponen berfungsi
05:34
9

useEffect dengan dependency

Buat seefisien mungkin komponen bekerja
03:24
10

Custom Hooks

Tools utama untuk membuat kode kita menjadi bersih
04:24
11

Menyentuh DOM dengan useRef

Jalan pintas untuk berhubungan langsung dengan elemen DOM
06:58
12

CRUD Project: To Do List (Create)

Pahami konsep dasar penerapan berbagai alat dasar yang ada di React
05:12
13

CRUD Project: To Do List (Read)

Bagian Read pada aplikasi Todo List
01:20
14

CRUD Project: To Do List (Update)

Belajar melakukan edit pada data yang sudah dimasukkan
12:14
15

CRUD Project: To Do List (Delete)

Belajar menghapus Object pada suatu Array
02:41
16

CRUD Project: Complete To Do List

Belajar menampilkan conditional rendering sesuai kebutuhan aplikasi kita
01:55
icon-React Hooks Advanced

React Hooks Advanced

Temukan tools bernama React Hooks yang disediakan oleh React. Masing-masing Hooks mempunyai use casenya sendiri, jangan sampai salah pilih hooks atau overkill penggunaan Hooks.

1

useReducer: Flux Pattern

Ga perlu terlalu gimana gimana pakai useReducer. Ternyata fungsinya cuma gini doang
07:31
2

Konsep Memoisasi

Setelah mempelajari materi ini, mental model akan semakin kuat. Kita akan lebih hati-hati ketika berhadapan dengan data non primitif
08:50
3

React memo

Bagaimana konsep memoisasi yang digunakan pada React untuk mengoptimasi performa pada komponen React
06:14
4

useMemo

Berbeda jenis data, berbeda juga API memoisasi yang harus digunakan
02:49
5

useCallback

Apa perbedaan useCallback dengan useMemo, tak sama tapi serupa
03:18
6

Sisi gelap memoisasi pada React

Apakah memoisasi selalu menguntungkan ? Tapi benarkah membuat aplikasi tambah cepat ?
08:28
7

Kapan Harus Menggunakan Memoisasi ?

Gunakan memoisasi hanya jika menemui kondisi ini
04:03
8

Props Drilling Problem

Materi ini akan mengantarkan kamu untuk memahami mengapa kita membutuhkan tools state management yang lebih advanced
06:48
9

useContext

Solusi untuk mengatasi masalah props drilling. Tapi katanya low performance
08:58
10

Kesalahan Umum Penggunaan API CreateContext

Di materi ini kamu akan menemukan solusi dari permasalahan yang tidak pernah dibahas oleh dokumentasi React
04:03
11

Rerender React Context

React Context dinilai low performance karena Rerender Behaviournya. Apakah benar ? Mari coba kita pahami
13:44
12

Redux

Alternatif useContext dalam menghindari props drilling
11:26
13

Fundamental Penulisan Redux

Bekal awal yang penting untuk mendalami ekosistem Redux
05:05
14

Update Redux Dynamic Value

Cara dinamis mengupdate store Redux dengan payload
02:24
15

Kelebihan dan Poin Kesalahan Pengguna Redux

Kekuatan super Redux yang tidak dimiliki React Context
02:14
16

Operasi Asynchronous Pada Redux

Penulisan agak laen operasi Asynchronous jika menggunakan Redux
05:27
17

Redux Toolkit

Ketahui darimana asal usul redux toolkit
06:18
18

Bikin sendiri Redux Toolkit

Belajar bikin sendiri kode mirip Redux Toolkit
07:55
19

Penerapan Redux Toolkit

Bagaimana implementasi Redux Toolkit
12:38
icon-Advanced React Pattern

Advanced React Pattern

Pelajari pattern penulisan komponen React yang akan membawamu menjadi level up React Developer. Dibahas lengkap dengan analogi dan contoh implementasi agar codebase lebih rapi, scalable, dan mudah dikelola. Kuasai berbagai macam pattern React agar kodemu Reusable.

1

React Pattern 1

Bongkar Pattern UI Library Populer React dengan teknik ini.
06:55
2

React Pattern 1 Implementation

Kita praktikkan langsung bagaimana cara nulisnya.
07:11

Bayar Sekali, Dapatkan Akses Selamanya! 🤩 🥳

Reactjs Fundamental Ultimate (Lifetime) icon
Popular

Reactjs Fundamental Ultimate (Lifetime)

Rp 1,190,00026%
Rp 880,000
Promo Naik Level

bayar sekali akses selamanya

🔥 Bayar sekali, nikmati Chapter update kedepannya Gratis
⚠️ Harga naik seiring bertambahnya materi

Materi

icon-https://res.cloudinary.com/dm6iuwvw4/image/upload/v1747392797/iconcourse/reactjs-fundamental-dasar_jcuxik.webp
Reactjs Fundamental Dasar
icon-https://res.cloudinary.com/dm6iuwvw4/image/upload/v1747393318/iconcourse/reactjs-fundamental-interaktif_clzdxx.webp
Reactjs Fundamental Interaktif
icon-https://res.cloudinary.com/dm6iuwvw4/image/upload/v1747393585/iconcourse/react-fundamental-profesional_a8wyov.webp
React Fundamental Profesional
🚀
Chapter akan terus bertambah ...

Fasilitas

icon-tanya-pimon
Konsultasi Bersama Pimon
Reactjs Fundamental Dasar icon

Reactjs Fundamental Dasar

Rp 610,00034%
Rp 399,000
Promo

bayar sekali akses selamanya

🔥 Dapat diupgrade (kecuali ke ultimate) dengan diskon khusus
⚠️ Dapat update hanya jika ada perubahan isi topik.

Materi

icon-https://res.cloudinary.com/dm6iuwvw4/image/upload/v1702354656/iconcourse/dasar-javascript-untuk-reactjs_qjt7mh.webp
Dasar Javascript untuk Reactjs
icon-https://res.cloudinary.com/dm6iuwvw4/image/upload/v1702354647/iconcourse/react-dasar-fundamental_ymas9v.webp
React Dasar Fundamental
⚠️
Tidak termasuk akses ke chapter baru di masa depan.

Fasilitas

icon-tanya-pimon
Konsultasi Bersama Pimon
Reactjs Fundamental Interaktif icon

Reactjs Fundamental Interaktif

Rp 799,00025%
Rp 599,000
Promo

bayar sekali akses selamanya

🔥 Dapat diupgrade (kecuali ke ultimate) dengan diskon khusus
⚠️ Dapat update hanya jika ada perubahan isi topik.

Materi

icon-https://res.cloudinary.com/dm6iuwvw4/image/upload/v1747392797/iconcourse/reactjs-fundamental-dasar_jcuxik.webp
Semua Materi Reactjs Fundamental Dasar
icon-https://res.cloudinary.com/dm6iuwvw4/image/upload/v1702354630/iconcourse/react-hooks-dasar_cpnyp6.webp
React Hooks Dasar
⚠️
Tidak termasuk akses ke chapter baru di masa depan

Fasilitas

icon-tanya-pimon
Konsultasi Bersama Pimon
React Fundamental Profesional icon

React Fundamental Profesional

Rp 1,190,00031%
Rp 810,000
Promo

bayar sekali akses selamanya

🔥 Dapat diupgrade (kecuali ke ultimate) dengan diskon khusus
⚠️ Dapat update hanya jika ada perubahan isi topik.

Materi

icon-https://res.cloudinary.com/dm6iuwvw4/image/upload/v1747393318/iconcourse/reactjs-fundamental-interaktif_clzdxx.webp
Semua Materi Reactjs Fundamental Interaktif
icon-https://res.cloudinary.com/dm6iuwvw4/image/upload/v1708491766/iconcourse/react-hooks-lanjutan_xlsyxc.png
React Hooks Advanced
icon-https://res.cloudinary.com/dm6iuwvw4/image/upload/v1742264444/iconcourse/advanced-react-pattern_dzd5uz.webp
Advanced React Pattern
⚠️
Tidak termasuk akses ke chapter baru di masa depan.

Fasilitas

icon-tanya-pimon
Konsultasi Bersama Pimon

Harga bisa naik sewaktu waktu tanpa pemberitahuan seiring bertambahnya modul atau fasilitas