andriajah Sun Nov 2021 2 years ago
Learn JS React from the beginning for those who are not good at javascript
https://multinity.id/course/belajar-front-end-react-js-fundamental
=======
Yes the name is also alive sometimes it can be javascript, sometimes it can't be 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://reactruer.com
Support:
- https://trateer.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 react rendering 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, the video here: 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 STYLLESHEET 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
Hopefully useful 💖