TUTORIAL REACT JS | BAHAS TUNTAS SEMUA MATERI
*Dukung Mimin atau Beliin Kopi di sini: [Saweria](https://saweria.co/kenapacoding)*
📀 Temukan video lainnya dengan akses lengkap di Udemy!
🔗 Link Course Udemy :
👉 https://kenapacoding.short.gy/nextjs-... [course next]
👉 https://kenapacoding.short.gy/laravel... [course laravel]
👉 https://kenapacoding.short.gy/react-t... [course react]
👉 https://kenapacoding.short.gy/tailwin... [course tailwind]
👉 https://kenapacoding.short.gy/mysql [course mysql]
👉 https://kenapacoding.short.gy/data-an... [course data science]
🚨 DISKON SPESIAL! COURSE KENAPA CODING UDEMY CUMA 99K!🚨
⏰ DISKON ADA 3 Kali Setiap Bulannya
🎁 Bayar Sekali Akses Seumur Hidup
🔥 Belajar coding murah, akses seumur hidup!
🚀 Update materi gratis, belajar kapan saja!
---
💰 List Materi Konten 💰
(0:00:00) *Introduction*
(0:01:22) *Penjelasan Materi dan Tutorial*
(0:05:47) *SESI PERTAMA: DASAR-DASAR REACT*
(0:05:51) Apa Itu React Js
(0:08:19) Program Pertama Dengan React Js
(0:12:58) Setup Project React
(0:20:42) Apa Itu JSX
(0:22:21) Contoh JSX Dan Non-JSX
(0:25:36) Menggunakan Variable Di JSX
(0:29:39) React Component
(0:30:22) Functional Component VS Class Component
(0:34:19) Class Component Layout
(0:36:10) Styling, Kesimpulan, dan Praktek
(0:50:23) React Props dan Reusable Component
(0:58:30) Split Code
(1:01:11) Challenge Props
(1:09:22) Menampilkan List Data Di React
(1:16:12) Challenge List
(1:19:54) Event Handler di React
(1:28:03) React State
(1:28:56) Contoh: Tanpa State Vs State
(1:39:14) Penjelasan Sintaks State (useState Hook)
(1:41:17) Conditional Rendering
(1:42:21) Conditional Rendering: If Else
(1:45:59) Conditional Rendering: Ternary
(1:52:26) Conditional Rendering: Logical Operator
(2:29:45) Handle Multiple Input Form
(2:31:40) Spread Operator (optional)
(2:54:47) Komunikasi Child Ke Parent Komponen
(3:03:30) Project CRUD Product Tanpa API
(3:08:30) Design Komponen dan State Aplikasi
(3:15:42) Praktek
(4:56:20) *SESI BONUS: REACT HOOKS*
(4:58:33) Apa Itu Hooks?
(5:02:51) Penggunaan Hooks
(5:03:48) State Hooks
(5:05:37) useState
(5:20:45) useReducer
(5:31:18) useState vs useReducer
(5:34:22) Effect Hooks
(5:35:55) Effect Hooks: Diff
(5:37:39) useEffect
(5:49:55) useLayoutEffect
(5:52:51) useInsertionEffect
(5:55:25) Context Hooks
(5:55:17) useContext
(6:04:11) Ref Hooks
(6:04:45) useRef
(6:13:43) useImperativeHandle
(6:23:47) Performance Hooks
(6:24:16) useMemo
(6:39:44) useCallback
(6:48:09) Other Hooks
(6:48:27) useDebugValue
(6:58:52) useId
(7:05:59) Custom Hook
(7:12:23) *SESI KEDUA: REACT ADVANCE*
(7:13:27) API di React
(7:14:08) Flow Diagram tanpa API
(7:16:07) Bagaimana API bekerja
(7:17:38) Pengenalan JSON Server
(7:18:51) Setup JSON-SERVER
(7:30:58) REST API Client JSON Server
(8:16:11) Refactor dengan UseContext
(8:47:42) Routing dan React Router v6
(8:47:47) Apa Itu Routing
(8:49:28) Setup React Router
(9:01:38) Router Types
(9:08:03) Dynamic Routes dan useParams
(9:15:04) Specific Routes
(9:17:58) Nested Routes
(9:35:17) useRoutes Hooks
(9:47:08) Link dan NavLink Component
(9:59:23) Navigate dan useNavigate Hook
(10:06:09)Reference React Router
(10:07:45) *Redux di React*
(13:13:50) *SESI PROJECTS*
(13:13:53) Project Quiz App
(15:17:52) Project Weather App
(16:12:34) Project Prayer App
(16:51:30) Project Portofolio App
(19:06:15) Soal Test Coding React
(21:39:59) Sertifikat Hackerrank
---
🌟 Link Penting Sesi 1:
github project : https://github.com/KenapaCoding/react...
data : https://github.com/KenapaCoding/react...
🌟 Link Penting Sesi Bonus:
Github : https://github.com/KenapaCoding/react...
🌟 Link Penting Sesi 2:
API di react : https://github.com/KenapaCoding/react...
Context : https://github.com/KenapaCoding/react...
React Router : https://github.com/KenapaCoding/kc-re...
Redux Setup : https://github.com/KenapaCoding/redux... branch setup
Redux Setup : https://github.com/KenapaCoding/redux... branch todo-classic-redux
Redux Setup : https://github.com/KenapaCoding/redux... branch redux-toolkit
🌟 Link Project Quiz App:
Github : https://github.com/KenapaCoding/kc-qu...
🌟 Link Project Weather App:
Github : https://github.com/KenapaCoding/kc-we...
assets : https://drive.google.com/drive/folder...
🌟 Link Project Portofolio:
github : https://github.com/KenapaCoding/dynam...
assets : https://github.com/KenapaCoding/dynam...
css scroll: https://github.com/KenapaCoding/dynam...
🌟 Link Test Coding React:
Github : https://github.com/KenapaCoding/soalF...