This course was created with the
course builder. Create your online course today.
Start now
Create your course
with
Autoplay
Autocomplete
Previous Lesson
Complete and Continue
React Novice to Ninja ( Second Edition )
Introduction - บทนำ
ทำความรู้จักกับ ReactJS (10:01)
การทำงานของ React (6:55)
ตัวอย่างการทำงานของ DOM vs Virtual DOM (5:05)
ติดตั้ง ReactJS
npm install -g create-react-app (5:27)
แนะนำ VScode Extensions ที่ช่วยให้เขียน React อย่างมีความสุข (3:31)
โครงสร้างโฟลเดอร์และการเรนเดอร์ของ React (3:16)
JavaScript ES6 ( ECMAScript 2015) ที่เราควรรู้ก่อนเขียน ReactJS
Variables ( let & const ) (10:27)
Template Literals (3:51)
Default Function Parameters (3:00)
Destructuring (7:09)
Object literal Shorthand (2:26)
Arrow Functions (5:01)
Spread Operators & Rest Parameters (6:23)
Classes (8:43)
Higher Order Functions
Map (6:14)
Filter (4:53)
Reduce (12:20)
Method Chain (2:11)
ทำความรู้จักกับ JSX ในการเขียน React
What is JSX ? (2:36)
Basic Expressions (5:11)
Conditional Statements (5:11)
Loops (2:45)
Custom Components (3:24)
Event Handling (2:09)
React Class Component
Create a Class Component (4:51)
Class constructor method (1:17)
Props (5:39)
State & setState() (5:02)
Events (2:06)
Bind " this " (9:21)
React Forms (4:05)
Coditional Rendering (1:48)
Submitting Forms (2:01)
Multiple Input Fields (3:54)
Validating Form Input (4:30)
Textarea & Select (3:48)
React with CSS (7:03)
React with SASS (5:36)
React Lifecycle
Lifecycle of Components (2:29)
Mounting (7:15)
Updating (13:08)
Unmounting (3:36)
React Class Project - Pokemon Finder App
Project intro (1:15)
Create UI (10:11)
Add functionality (15:57)
Code refactoring (4:06)
Display pokemon abilities ( Solutions ) (4:00)
React Class Project - Markdown Editor
Project intro (1:30)
Create UI (14:17)
Add functionality (10:27)
React Class Project - Emoji Search App
Project intro (0:46)
Create UI (22:39)
Add functionality (9:30)
Deploy app (3:32)
React Functional Component
Intro (2:46)
Props (2:59)
Arrow function (1:54)
State ( useState ) (5:32)
Event hanlder (1:36)
Callback function (8:12)
Lifecycle ( Mount ) (7:17)
Lifecycle ( Update ) (12:51)
Memo ( performance optimization ) (4:51)
Export & Import (3:24)
Ref ( useRef ) (7:20)
Proptypes (6:59)
Function Component vs Class Component (7:56)
React Hooks
What is Hooks ? (4:47)
useState Hook (6:07)
useEffect Hook (18:15)
useEffect to Fetch Data (24:26)
useContext Hook (9:59)
useReducer Hook (21:20)
useCallback Hook (16:40)
useMemo Hook (9:12)
useRef Hook (25:30)
React Router
Introduction (2:12)
Link & Route (7:43)
Switch (2:56)
Dynamic Nested Routing (4:58)
Nested Routing With Path Parameters (11:06)
Protected Routes (10:33)
React Build Personal Portfolio Web app
Intro (1:35)
Components (1:43)
Create API data (3:24)
Get started (5:42)
Create Layout , Sidebar & UserHeader Components (34:12)
Me components (6:18)
Projects components (6:42)
Work components (5:38)
Education components (5:45)
MobileNav components (6:24)
Responsive (6:28)
activeClassName (2:46)
CaptureApp - A photo gallery with search
Intro (0:59)
Setup Project, API, Components, Context (14:55)
Container component (4:00)
Header component (4:04)
Form component (5:24)
Search component (5:01)
Gallery component (11:17)
Loader component (3:29)
NotFound component (1:38)
CSS styling (6:52)
Button active class (2:44)
React + Firebase Full Stack Project | Instagram Clone 📷
Intro (4:35)
Setup (7:58)
Post component (6:47)
CommentBox component (3:37)
Comments component (3:53)
Setup Firebase & Firestore (6:21)
Fetch data from firebase (12:22)
Auth component (17:17)
Sign Up & Sign In (12:06)
PostUpload component (20:47)
Guest login (6:28)
Comment features (9:32)
Fetch & Display comments (7:44)
Load more comments features (6:20)
Load more posts features (10:30)
Fix upload image (2:38)
Deploy to netlify (3:10)
Work components
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock