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 [course next] 👉 https://kenapacoding.short.gy/laravel-course [course laravel] 👉 https://kenapacoding.short.gy/react-typescript-course [course react] 👉 https://kenapacoding.short.gy/tailwind-course [course tailwind] 👉 https://kenapacoding.short.gy/mysql [course mysql] 👉 https://kenapacoding.short.gy/data-analyst-dan-science [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-tutorial-pemula-bagian1 data : https://github.com/KenapaCoding/react-tutorial-pemula-bagian1/blob/main/src/data/product.js ## 🌟 Link Penting Sesi Bonus: Github : https://github.com/KenapaCoding/react-hooks ## 🌟 Link Penting Sesi 2: API di react : https://github.com/KenapaCoding/react-tutorial-pemula-bagian1/tree/feat-add-api Context : https://github.com/KenapaCoding/react-tutorial-pemula-bagian1/tree/feat/context React Router : https://github.com/KenapaCoding/kc-react-router-v6 Redux Setup : https://github.com/KenapaCoding/redux-todo-list branch setup Redux Setup : https://github.com/KenapaCoding/redux-todo-list branch todo-classic-redux Redux Setup : https://github.com/KenapaCoding/redux-todo-list branch redux-toolkit ## 🌟 Link Project Quiz App: Github : https://github.com/KenapaCoding/kc-quiz-app ## 🌟 Link Project Weather App: Github : https://github.com/KenapaCoding/kc-weather-app/ assets : https://drive.google.com/drive/folders/1uk651ACOqZV5ZPDeI8rm-Lki6sv9StzB?usp=drive_link ## 🌟 Link Project Portofolio: github : https://github.com/KenapaCoding/dynamic-portofolio assets : https://github.com/KenapaCoding/dynamic-portofolio/tree/main/src/assets css scroll: https://github.com/KenapaCoding/dynamic-portofolio/blob/main/src/index.css ## 🌟 Link Test Coding React: Github : https://github.com/KenapaCoding/soalFrontend