Bila belajar lewat YouTube ada kendala atau videonya agak delay dengan suara, sebagai alternatif bisa belajar di web Multinity:
https://multinity.id/course/belajar-front-end-react-js-fundamental

=======

Ya namanya juga hidup kadang bisa JavaScript, kadang nggak bisa JavaScript. Di kesempatan kali ini, Nauval akan mengajari kamu soal React JS. Kamu nggak perlu jago-jago amat soal JavaScript, yang penting punya niat serta tekad yang kuat untuk belajar React JS!

Referensi:
– https://reactjs.org
– https://nodejs.org
– https://npmjs.com/package/live-server
– https://npmjs.com/package/serve
– https://github.com/facebook/create-react-app
– https://babeljs.io
– https://reactrouter.com

Support:
– https://trakteer.id/arrayid

Array ID
– http://links.array.id/

Nauval:
– Twitter: https://twitter.com/mhdnauvalazhar​​​​
– Github: https://github.com/nauvalazhar​​​​
– Website: https://nauv.al​​​​
– IG: https://instagram.com/mhdnauvalazhar

🎥 Timestamps

Chapter 1 – The Basics
00:00:00 Intro
00:02:05 What is React JS?
00:18:16 Create a user interface with vanilla JavaScript
00:24:14 Create a user interface with React JS
00:30:17 react.js vs react-dom.js
00:34:36 Fragment
00:40:47 Nested element
00:45:24 Introduce JSX and Babel
00:59:03 How does Babel works?
01:03:06 Embed JavaScript Expression inside JSX
01:11:18 React component
01:19:48 How does React render an element into the DOM tree?
01:26:55 Recap chapter 1

Chapter 2 – The Essentials
01:33:55 New React environment (lupa edit, videonya di sini: https://youtu.be/2rYrBPhpASo)
01:33:57 Setup local Babel for precompile scripts
01:49:29 Basic style React element (inline style)
01:54:02 External stylesheet React
01:57:47 Event handling
02:04:14 Component and state (State hooks)
02:18:50 Component lifecycle (Effect hooks)
02:44:33 Conditional rendering
02:54:37 DOM manipulation (Ref hooks)
03:01:48 React list & keys (render multiple components)
03:08:29 Forms
03:19:47 Data fetching (HTTP client request)
03:31:13 Sync data fetching response with UI
03:37:24 The final project (todo list app)
04:38:06 Recap chapter 2

Chapter 3 – The Toolchain
04:50:53 Intro toolchain
05:02:47 Init React project with CRA
05:09:14 Inside create-react-app
05:16:43 React component (separation of concerns)
05:34:37 Styling component in CRA
05:40:08 Static file
05:42:37 Move JavaScript file from old codebase to CRA
05:49:23 Production build with CRA
05:59:24 Recap chapter 3

Chapter 4 – The Router
06:04:42 Intro React Router
06:08:04 Install React Router
06:10:52 Basic routing
06:15:19 How does React Router works?
06:21:32 Nested route
06:24:52 Nested route (shared layout)
06:27:26 Get URL params
06:35:38 No match route
06:38:51 Redirect programmatically
06:44:24 The final project (simple website with multiple pages)

Chapter 5 – The Ending
08:01:58 Deploy CRA to Netlify (method 1: upload folder manually)
08:10:06 Deploy CRA to Netlify (method 2: using CLI)
08:23:47 Closing

Semoga bermanfaat 💖