Belajar React JS Dari Awal Buat Yang Nggak Jago JavaScript
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 ?
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 ?