Bài giảng trước
Bài giảng sau
029 - Học lập trình React js và Redux từ đầu, tạo ứng dụng fullstack với Node JS + React JS
0%
Mục đầu tiên
Phần 01 - Giới thiệu - cài đặt - và chạy chương trình React JS đầu tiên
002 - Giới thiệu React JS
(13:40)
003 - Cài đặt công cụ
(10:04)
004 - Chạy app react js đầu tiên
(09:32)
Phần 02 - Khái niệm và 4 cách định nghĩa component trong React JS
005 - Khái niệm component
(05:07)
006 - Định nghĩa component cách số 1
(05:22)
007 - Định nghĩa component bằng Anonymous function và Arrow Function
(05:26)
008 - Định nghĩa component bằng Class
(04:28)
Phần 03 - Khái niệm và cách truyền thông tin qua Props trong Component
009 - Khái niệm props trong component
(10:35)
010 - Phương pháp số 2 thao tác với props trong component
(07:01)
Phần 04 - Thực hành JSX và hàm 'Map' thông dụng
011 - Cách viết JSX
(07:23)
012 - Cách sử dụng hàm map trong react js
(07:13)
Phần 05 - Thực hành kiến thức Component qua bài tập chuyển đổi giao diện từ bootstrap 4 sang React JS
013 - Thực hành 'component hoá' giao diện HTML bằng React JS
(05:21)
014 - Sử dụng Public_URL
(05:02)
015 - Sử dụng phím tắt cho việc tạo component
(10:02)
016 - Hoàn thiện phần giao diện từ bootstrap sang React js Component
(12:07)
Phần 06 - Hai cách viết tương tác trong React JS
017 - Cách viết tương tác với hàm ko có tham số trong React js
(10:30)
018 - Cách viết tổng quát tương tác trong React js
(05:30)
Phần 07 - Khái niệm State - thao tác với state
019 - Hiểu về State trong React js
(07:46)
020 - Thực hành với State trong React JS - Tạo hàm render
(09:09)
Phần 08 - Thay đổi state và sử dụng thuộc tính Default Value
021 - Thực hành với State trong React JS - Thay đổi State
(07:02)
022 - Sử dụng thuộc tính defaultValue trong JSX
(03:18)
Phần 09 - Học về LifeCycle của React Component
023 - LifeCycle trong React JS
(07:36)
024 - Sử dụng thuộc tính Ref trong JSX
(05:18)
025 - Sử dụng LifeCycle cơ bản với Mounting
(07:50)
026 - Sử dụng 4 hàm trong LifeCycle updation
(08:26)
027 - Sử dụng các hàm Update cho Props trong LifeCycle - phần 1
(07:37)
028 - Sử dụng các hàm Update cho Props trong LifeCycle - phần 2
(11:24)
Phần 10 - Học về React Router và thực hành tạo giao diện
029 - Giới thiệu React Router
(08:04)
030 - Tạo giao diện trang chủ
(11:21)
031 - Tạo giao diện chức năng tin tức
(12:29)
032 - Tạo giao diện trang liên hệ
(07:35)
Phần 11 - Chuyển đổi từ giao diện thành React Component
033 - Tạo component Home, Footer, Nav
(12:59)
034 - Chuyển 4 trang HTML thành 6 Component React js
(14:12)
Phần 12 - Tích hợp React Router để thao tác không cần load lại trang
035 - Cài đặt React Router và sử dụng điều hướng cơ bản
(11:18)
036 - Xử lý điều hướng bằng Router không cần load lại trang
(09:26)
037 - Đặt trạng thái cho thanh điều hướng như Gmail bằng activeClassName
(04:47)
Phần 13 - Tạo dữ liệu và load dữ liệu Json trong React JS
038 - Tạo file dữ liệu Json chuẩn bị cho xử lý URL
(11:15)
039 - Load dữ liệu và tạo NewsItem
(06:55)
Phần 14 - Ánh xạ dữ liệu vào Component và tạo đường dẫn SEO
040 - Mapping dữ liệu vào component
(11:43)
041 - Tạo đường dẫn thân thiện với SEO trong React JS
(11:23)
Phần 15 - Cách truyền tham số thông qua URL và nhận dữ liệu từ tham số truyền vào
042 - Cách nhận tham số truyền vào thông qua URL Parameter
(05:14)
043 - Cách phun dữ liệu ra giao diện dựa trên tham số truyền vào từ URL
(15:34)
Phần 16 - Hoàn thiện chức năng tin liên quan cho demo
044 - Xử lý phần NewsRelated component
(14:35)
045 - Hoàn thiện phần tin liên quan
(03:16)
Phần 17 - Cách gửi nhận dữ liệu bằng Form trong React JS
046 - Bắt đầu xử lý form gửi nhận dữ liệu với Redirect
(10:32)
047 - Cách nhận dữ liệu dưới dạng mảng trong react js form
(12:51)
048 - Tối ưu hoá code React JS
(07:55)
049 - Xử lý phần thẻ select trong React form
(05:14)
050 - Xử lý phần nhận thông tin file trong React form
(07:15)
Phần 18 - Project thiết kế backend với dữ liệu LocalStorage
051 - Giới thiệu Project làm giao diện backend quản lý User bằng React js
(04:54)
052 - Download giao diện Bootstrap Admin
(07:17)
Phần 19 - Thiết kế UX và cắt HTML CSS
053 - Thiết kế giao diện UX demo chức năng trước khi code
(19:32)
054 - Code HTML phần giao diện quản lý theo thiết kế phác thảo
(12:39)
055 - Hoàn thiện giao diện quản lý demo trực tiếp trên chrome
(12:48)
Phần 20 - Tạo Project React và chuyển đổi từ giao diện HTML sang React
056 - Tạo project
(05:48)
057 - Chuyển đổi giao diện thành 4 component
(10:31)
058 - Thanh lọc các warning cho project
(02:28)
Phần 21 - Xử lý các tương tác cơ bản
059 - Xử lý các tương tác cơ bản trên Frontend bằng React Js
(07:38)
060 - Xử lý hiển thị Form thông báo ứng với trường hợp chung component
(06:53)
Phần 22 - Thực hành kết nối các component cha con và component ngang cấp
061 - Cách kết nối từ component con sang component bố trong React Js
(11:48)
062 - Cách kết nối giữa hai component ngang cấp
(08:18)
063 - Hoàn thiện phần thực hành thao tác giữa các component ngang cấp
(03:58)
Phần 23 - Tạo dữ liệu cho project và đẩy dữ liệu ra giao diện
064 - Tạo dữ liệu cho project và in test
(08:10)
065 - Đẩy dữ liệu ra bảng sử dụng Map
(15:20)
Phần 24 - Logic các bước làm và cách lập trình chức năng tìm kiếm
066 - Tự động co dãn giao diện sử dụng col
(02:55)
067 - Kết nối component bố và con thông qua props
(10:10)
068 - Lấy text tìm kiếm trong Search Component đẩy về App Component
(07:56)
069 - Quá trình tìm dữ liệu sử dụng indexOf
(12:09)
070 - Đẩy kết quả tìm kiếm về giao diện
(04:38)
Phần 25 - Lập trình chức năng thêm mới thành viên bằng React JS
071 - Logic các bước thực hiện chức năng thêm mới thành viên
(02:51)
072 - Lấy dữ liệu thành viên được thêm mới bằng sự kiện onChange
(06:43)
073 - Đẩy dữ liệu vào state
(07:05)
074 - Lấy nội dung gửi lên App và đóng gói đối tượng
(08:07)
075 - Cập nhật thông tin thành viên mới vào dữ liệu Json
(04:41)
Phần 26 - Hoàn thiện chức năng thêm mới bằng cách tự sinh ID khi tạo mới dữ liệu
076 - Xoá trắng nội dung sau khi thêm mới
(03:25)
077 - Tự tạo id không trùng lặp bằng UUID
(04:24)
Phần 27 - Phân tích logic thực hiện chức năng sửa thông tin
078 - Chức năng sửa thông tin thành viên
(04:32)
079 - Kết nối component để truyền dữ liệu
(05:48)
080 - Truyền thông tin user cần sửa từ tableDataRow lên App
(06:18)
Phần 28 - Tạo Form sửa dữ liệu và load nội dung khi được kích hoạt
081 - Tạo form sửa thông tin của người dùng
(10:03)
082 - Tạo hàm thay đổi trạng thái hiển thị của form
(08:03)
083 - Load nội dung cần sửa vào form
(07:21)
Phần 29 - Hoàn thiện chức năng sửa thông tin thành viên
084 - Sử dụng state lưu trữ thông tin trong quá trình sửa thông tin
(09:28)
085 - Chuyển dữ liệu đã sửa lên Component App
(12:34)
086 - Hoàn thiện chức năng sửa dữ liệu
(03:00)
Phần 30 - Lập trình chức năng xóa thông tin thành viên
087 - Gửi dữ liệu xoá lên component cha
(07:51)
088 - Xoá thông tin người dùng sử dụng hàm filter trong ES2015
(08:09)
Phần 31 - Dữ liệu hóa ứng dụng với LocalStorage
089 - Bộ 3 hàm thao tác với localStorage - set - get - remove
(06:52)
090 - Lưu trữ dữ liệu vào localStorage và hoàn thiện ứng dụng
(15:03)
Phần 32 - Cách đóng gói ứng dụng và chạy ứng dụng trên Xamp server
091 - Đóng gói ứng dụng chạy trên server với npm run build
(04:05)
092 - Cách chạy ứng dụng react app trên Xamp
(10:18)
093 - Cách chạy React App băng cách sử dụng dòng lệnh
(02:46)
Phần 33 - Cách đồng bộ code, download code, chạy code và quản lý bằng Github
094 - Cách đồng bộ code, download code và quản lý code với Git trên Visual studio code - Tạo tài khoản github
(07:34)
095 - Cách tạo tài khoản, tạo repo, upload lên github
(09:49)
096 - Cách tải code và chạy code
(06:41)
Phần 34 - Bắt đầu với Redux - what & why
098 - Giới thiệu Redux
(06:04)
099 - Sử dụng toán tử 3 chấm
(06:49)
100 - Cách viết tắt ghi đè và thêm mới với toán tử 3 chấm
(04:31)
Phần 35 - Phân tích cấu trúc một ứng dụng Redux
101 - Cấu trúc của một store Redux
(05:00)
102 - Chạy thử cấu trúc redux cơ bản để hiểu cách hoạt động của store - reducer - action
(12:34)
Phần 36 - Thực hành với Redux và hàm Subscribe
103 - Thực hành với Redux Store
(07:55)
104 - Thực hành với Redux Store với chỉ thị xoá bằng filter
(06:22)
105 - Hàm Subscribe trong store
(04:25)
Phần 37 - Tạo ứng dụng kết hợp React - Redux
106 - Cài đặt plugin React-redux ES6 snippet
(04:10)
107 - Tạo ứng dụng kết hợp React - Redux
(08:13)
Phần 38 - Cách sử dụng hàm MapDispatchToProps
108 - Truy xuất dữ liệu trong store từ component con
(09:31)
109 - Cách chia tách Reducer thành từng file
(12:39)
110 - Cách gọi hàm trong Store từ component con
(07:14)
111 - Hàm mapDispatchToProps
(04:29)
Phần 39 - Giới thiệu Project mới với Redux và Firebase
112 - Tổng kết phần cơ bản về cách viết code với redux
(04:13)
113 - Bước 1 - Tạo giao diện ứng dụng trong 5 phút
(15:21)
Phần 40 - Học cách sử dụng Firebase trong 30 phút
115 - Học nhanh cách sử dụng cơ sở dữ liệu FireBase
(08:57)
116 - Thực hành thao tác dữ liệu với Firebase
(06:23)
Phần 41 - Thực hành thêm sửa xóa dữ liệu Firebase từ React JS
117 - Kết nối React js - Firebase
(05:42)
118 - Lấy dữ liệu của bảng dữ liệu thông qua DataSnapshot
(08:22)
119 - Sửa dữ liệu trong Firebase
(03:55)
120 - Thêm dữ liệu vào Firebase bằng 2 cách
(06:44)
121- Thực hành xoá dữ liệu trong firebase
(04:05)
Phần 42 - Cài đặt redux - khởi tạo store - khởi tạo reducer
122 - Bắt đầu xử lý dữ liệu cho ứng dụng quản lý ghi chú
(05:11)
123 - Bước số 2 - click vào nút lấy được dữ liệu
(07:07)
124 - Bước 3 - Đẩy dữ liệu lên firebase sử dụng React js thuần
(09:34)
125 - Cài đặt redux - khởi tạo store - khởi tạo reducer
(07:26)
Phần 43 - Thực hành kết nối Store và Component hoàn thiện chức năng thêm mới dữ liệu vào Firebase
126 - Ba bước cơ bản kết nối store và component
(11:15)
127 - Truyền tham số vào xử lý trong Store
(09:08)
Phần 44 - Chức năng in dữ liệu ra danh sách
128 - Hoàn thiện chức năng thêm mới dữ liệu vào firebase với redux
(03:59)
129 - Xử lý gọi dữ liệu ra danh sách bằng redux - bước 1
(11:17)
130 - Xử lý gọi dữ liệu ra danh sách bằng redux - bước 2
(05:31)
Phần 45 - Thực hành kết nối App và NoteItem với Redux Store
131 - Kết nối App với Store
(07:37)
132 - Kết nối NoteItem với Store
(05:27)
Phần 46 - Chức năng sửa dữ liệu
133 - Thực hành chức năng sửa ghi chú với redux
(05:28)
134 - Đẩy dữ liệu cần sửa lên trên Store và theo dõi với hàm subscribe
(08:51)
135 - Đẩy dữ liệu cần sửa hiện thị lên Form
(07:37)
136 - Lấy dữ liệu ban đầu bằng cách áp dụng React lifeCycle
(08:46)
137 - Đẩy dữ liệu lên trên store khi click vào nút 'Lưu'
(08:33)
138 - Hoàn thiện chức năng sửa ghi chú của ứng dụng
(04:18)
Phần 47 - Chức năng xoá dữ liệu
139 - Hoàn thiện chức năng xoá ghi chú
(07:47)
Phần 48 - Xử lý điều hướng sử dụng Store
140 - Xử lý điều hướng sử dụng Store
(05:04)
140 - Xử lý điều hướng sử dụng Store (1)
(05:04)
141 - Hoàn thiện chức năng điều hướng thêm mới ghi chú ko cần load lại trang
(05:30)
Phần 49 - Tuỳ biến tiêu đề theo chức năng
142 - Luyện tập Redux Store qua trường hợp tuỳ biến tiêu đề theo chức năng
(07:37)
142 - Luyện tập Redux Store qua trường hợp tuỳ biến tiêu đề theo chức năng (1)
(07:37)
143 - Hiển thị thông báo các thao tác bằng plugin của React js
(06:38)
Phần 50 - Lập trình phần hiển thị thông báo cho các thao tác chức năng
144 - Định nghĩa state trong Store qui định việc hiển thị của thông báo
(04:40)
145 - Bật tắt thông báo tương ứng với thao tác chức năng trong ứng dụng
(06:10)
146 - Xử lý tắt thông báo bằng hai cách
(06:23)
Phần 51 - Tổng kết
147 - Truyền tham số nội dung vào thông báo thông qua state
(05:12)
148 - Hoàn thiện chức năng thông báo - bài tập - và tổng kết
(07:31)
Phần 52 - Cài đặt và tạo cơ sở dữ liệu PostgreSQL
149 - Giới thiệu phần Node JS kết hợp với React JS
(09:47)
150 - Cài đặt cơ sở dữ liệu PostgreSQL version 10
(03:29)
151 - Thực hành tạo cơ sở dữ liệu - Tạo bảng - Insert dữ liệu với PostgreSQL
(04:53)
Phần 53 - Khởi tạo project
152 - Cài đặt các phần mềm cần sử dụng - Khởi tạo project
(11:08)
153 - Khởi tạo frontend React Js
(04:51)
Phần 54 - Kết nối Node js và PostgreSql
154 - Đổi cổng kết nối của node js
(01:25)
155 - Kết nối Node js và cơ sở dữ liệu
(05:40)
Phần 55 - Phân tích logic của một ứng dụng
156 - Lấy dữ liệu từ postgreSql thông qua Node js
(06:04)
157 - Phân tích logic của một ứng dụng Javascript Fullstack
(04:03)
Phần 56 - Dựng frontend bằng React js
158 - Tạo giao diện frontend sử dụng bootstrap 4
(06:35)
159 - Sử dụng React JS làm frontend
(10:14)
160 - Kết nối các Component trong React JS
(04:04)
Phần 57 - Giao tiếp dữ liệu từ Node js sang React JS
161 - Kết nối Node JS và React JS thông qua axios
(11:00)
162 - Cách hứng dữ liệu từ NoteJS trong React JS
(14:16)
Phần 58 - Giao tiếp dữ liệu từ React js sang Node JS
163 - Gửi dữ liệu từ React JS lên Node JS
(04:51)
164 - Xử lý thêm dữ liệu trong Node JS
(10:05)
165 - Hoàn thiện thao tác thêm dữ liệu trong React JS
(08:37)
166 - Tạo form nhập liệu với React JS
(04:30)
167 - Lấy dữ liệu trong React JS
(07:07)
168 - Chuyển dữ liệu từ React JS về Node JS
(10:14)
169 - Setup proxy cho kết nối riêng của backend và frontend
(05:00)
170 - Tự động update nội dung khi thêm mới - phần 1
(06:24)
171 - Tự động update nội dung khi thêm mới - phần 2
(07:54)
Phần 59 - Tổng kết ứng dụng
172 - Cách quản lý code bằng github - download và chạy file project
(16:32)
173 - Tổng kết ứng dụng Node React
(01:40)
File đính kèm khoá học
081 - Tạo form sửa thông tin của người dùng
Hoàn thành
Chúc mừng, bạn đã hoàn thành khóa học này!
Quay lại
Thông báo!
Đóng
Thông báo!
Đóng
0
bình luận
Đăng
