Reactjs Fundamental
Best Explanation of Reactjs
Temukan berbagai materi Reactjs untuk memahami konsep fundamental hingga mahir dengan metode pembelajaran interaktif yang lengkap.
Materi
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 hadir05: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 itu02:39
4
Short Hand Property Name
Hemat tenaga menulis nilai berbentuk object00:10
5
Arrow Function
Cara lain menulis fungsi di javascript02: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 data04:40
8
ECMAScript Module
Reuse kode jadi lebih mudah dan bersih01:59
9
Ternaries Operator
Syntax ini adalah satu satunya jalan membuat pengkondisian di antara kode JSX01:52
10
Array Method
Pelajari betapa pentingnya mengetahui teknik mengelola nilai berbentuk array00:27
11
Array Method: Find
Cari nilai di dalam Array sesuai kondisi nilai yang kita inginkan01: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 Array03:40
16
Array Method: Filter
Jadikan Array hanya berisi nilai yang kita inginkan01:46
17
Nullish Operator
Hati hati dalam menulis Pengkondisian pada Javascript03:24
18
Optional Chaining
Syntax yang dihindari, namun pakai jika kepepet03:07
19
Async Await
Menunggu kode bernilai Promise untuk diselesaikan terlebih dahulu04:30
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 lain02:29
2
Menghadapi Teknologi Baru Setiap Hari
Key mindset untuk menghadapi Stack yang muncul terus menerus03:41
3
Luasnya dunia Web Development
Pada akhirnya untuk survive kita harus memilih05:30
4
DOM & DOM Manipulation
Masalah apa yang sebenarnya terjadi, sehingga kita harus pakai React05:47
5
Virtual DOM
Beginilah cara kerja Virtual DOM. Cara berfikir yang menarik04:32
6
Hello World
Ritual wajib programmer setiap belajar sesuatu05:54
7
React API
Pahami bagaimana sebenarnya React Bekerja dibalik layar07:13
8
React API Nested Element
Bagaimana React menangani struktur DOM yang bercabang02:39
9
Element Attribute
Bagaimana penulisan attribut html di React API, kita bahas di sini01:41
10
JSX
Synthetic Sugar yang dibuat tim React untuk mengabstraksi semuanya03:07
11
Kenalan dengan Babel
Dibalik layar bagaimana dan kenapa JSX diciptakan02:38
12
Bagaimana Babel menerjemahkan JSX
Mengapa kita harus import React di setiap file JSX04:36
13
Menulis Syntax Javascript di antara Kode JSX
Kelemahan yang harus disadari dibalik file JSX03:31
14
Component
Ini yang membuat React menjadi library yang Deklaratif07:24
15
Custom Component
Tag html yang namanya sesuka kita. Cari tahu Bagaimana React memprosesnya03:19
16
React Fragment
Kondisi yang harus kita ikuti jika pakai JSX02:12
17
Props
Salah satu jalan untuk tukar alur data pada Component React02:16
18
Key Props
Jawaban paling jelas mengapa key pada component itu dibutuhkan06:42
19
Props Type
Validasi data untuk mencegah error terjadi08:08
20
Best Practice Props Typing
Inilah mengapa teknologi ini dipakai dimana mana02:18
21
Tools Management
Berbagai permasalahan yang harus diselesaikan secara bersamaan09:45
22
Styling
Berbagai jalan mempercantik tampilan06:21
23
Global CSS
Metode paling tradisional mempercantik tampilan00:46
24
CSS Module
Memecahkan masalah yang ada pada global css03:24
25
CSS Preprocessor
Next level ngoding css03:51
26
CSS in JS
Stack yang dipakai di perusahaan ecommerce05:45
27
CSS Utility Classes
Tailwind paling populer dibidang ini06:27
28
CSS Framework & Component Library
Metode cepat untuk membuat fungsional component react01:42
29
Form
Metode dasar untuk menerima data input dari user08:50
30
Form Component Controlled
Memanfaatkan API React namun harus tahu bagaimana kelemahannya03:56
31
Controlled vs Uncontrolled
Metode apa yang sebaiknya kita gunakan untuk membuat Form05:34
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 interaktif07:20
2
Bikin sendiri fungsi useState
Buat ulang useState pakai Vanilla Js, alias ga pakai React, supaya tahu cara kerja useState sebenarnya06:12
3
Merancang kebutuhan useState
Cara efektif dan efisien dalam penggunaan useState03:44
4
Component Rerender
Semua developer React berlomba lomba untuk memecahkan masalah ini07:35
5
React Lifecycle
Pengetahuan wajib para developer React untuk menghindari bad code05:42
6
Interaksi eksternal dengan useEffect
Pintu darurat untuk membuat komponen berfungsi05:34
7
useEffect dengan dependency
Buat seefisien mungkin komponen bekerja03:24
8
Custom Hooks
Tools utama untuk membuat kode kita menjadi bersih04:24
9
Menyentuh DOM dengan useRef
Jalan pintas untuk berhubungan langsung dengan elemen DOM06:58
10
CRUD Project: To Do List (Create)
Pahami konsep dasar penerapan berbagai alat dasar yang ada di React05:12
11
CRUD Project: To Do List (Read)
Bagian Read pada aplikasi Todo List01:20
12
CRUD Project: To Do List (Update)
Belajar melakukan edit pada data yang sudah dimasukkan12:14
13
CRUD Project: To Do List (Delete)
Belajar menghapus Object pada suatu Array02:41
14
CRUD Project: Complete To Do List
Belajar menampilkan conditional rendering sesuai kebutuhan aplikasi kita01:55
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 doang07:31
2
Konsep Memoisasi
Setelah mempelajari materi ini, mental model akan semakin kuat. Kita akan lebih hati-hati ketika berhadapan dengan data non primitif08:50
3
React memo
Bagaimana konsep memoisasi yang digunakan pada React untuk mengoptimasi performa pada komponen React06:14
4
useMemo
Berbeda jenis data, berbeda juga API memoisasi yang harus digunakan02:49
5
useCallback
Apa perbedaan useCallback dengan useMemo, tak sama tapi serupa03: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 ini04:03
8
Props Drilling Problem
Materi ini akan mengantarkan kamu untuk memahami mengapa kita membutuhkan tools state management yang lebih advanced06:48
9
useContext
Solusi untuk mengatasi masalah props drilling. Tapi katanya low performance08:58
10
Kesalahan Umum Penggunaan API CreateContext
Di materi ini kamu akan menemukan solusi dari permasalahan yang tidak pernah dibahas oleh dokumentasi React04:03
11
Rerender React Context
React Context dinilai low performance karena Rerender Behaviournya. Apakah benar ? Mari coba kita pahami13:44
12
Redux
Alternatif useContext dalam menghindari props drilling11:26
13
Fundamental Penulisan Redux
Bekal awal yang penting untuk mendalami ekosistem Redux05:05
14
Update Redux Dynamic Value
Cara dinamis mengupdate store Redux dengan payload02:24
15
Kelebihan dan Poin Kesalahan Pengguna Redux
Kekuatan super Redux yang tidak dimiliki React Context02:14
16
Operasi Asynchronous Pada Redux
Penulisan agak laen operasi Asynchronous jika menggunakan Redux05:27
17
Redux Toolkit
Ketahui darimana asal usul redux toolkit06:18
18
Bikin sendiri Redux Toolkit
Belajar bikin sendiri kode mirip Redux Toolkit07:55
19
Penerapan Redux Toolkit
Bagaimana implementasi Redux Toolkit12:38
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
