andriajah Sun Nov 2021 1 year ago
Learn React Js from scratch for those who aren't good at Javascript
https://multinity.id/course/belajar-front-end-react-js-fundamental
=======
Yes, it's called life, sometimes you can JavaScript, sometimes you can't JavaScript. On this occasion, Nauval will teach you about React JS. You don't need to be very good at JavaScript, the important thing is to have a strong intention and determination to learn React JS!
Reference:
- 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
ID Array
- 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 Fragments
00:40:47 Nested elements
00:45:24 Introduce JSX and Babel
00:59:03 How does Babel work?
01:03:06 Embed JavaScript Expression inside JSX
01:11:18 React components
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 (forgot to edit, video here: https://youtu.be/2rYrBPhpASo)
01:33:57 Setup local Babel for precompile scripts
01:49:29 Basic styles React elements (inline styles)
01:54:02 External React stylesheets
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 Toolchain intro
05:02:47 Init React project with CRA
05:09:14 Inside create-react-app
05:16:43 React components (separation of concerns)
05:34:37 Styling components in CRA
05:40:08 Static files
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 Routers
06:04:42 Intro React Router
06:08:04 Install React Router
06:10:52 Basic routing
06:15:19 How does React Router work?
06:21:32 Nested routes
06:24:52 Nested routes (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
Hopefully it's useful 💖
andriajah