TUTORIAL REACT JS | BAHAS TUNTAS SEMUA MATERI

Published: 10 September 2024
on channel: Kenapa Coding

12,145

748

*Dukung Mimin atau Beliin Kopi di sini: [Saweria](https://saweria.co/kenapacoding)*
---
💰 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
(1:55:43) Praktek Event Handler, State, dan Conditional Rendering
(2:18:20) Handle Form di React
(2:19:10) Contoh Form
(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 (Read) Display List Product
(3:21:16) Praktek Create Product
(3:52:16) Praktek Delete Product
(4:09:56) Praktek Edit Product

(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*
(10:08:25) Apa Itu Redux
(10:09:47) Redux Design
(10:12:40) Redux Praktek: Todo List App
(10:12:48) Setup Project
(10:13:43) Penjelasan Package
(10:15:14) Todo List App Tanpa Redux
(11:16:03) Todo List App dengan Redux
(12:05:37) Redux Toolkit
(12:06:39) Redux Toolkit Design
(12:07:27) Redux Toolkit Praktek
(12:31:07) Redux Toolkit dengan Async Thunks

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

Watch video TUTORIAL REACT JS | BAHAS TUNTAS SEMUA MATERI online without registration, duration hours minute second in high quality. This video was added by user Kenapa Coding 10 September 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 12,145 once and liked it 748 people.