_1738753706398.png){kind=logo}
đ399,000
699,000Bạn sẽ học được những gì
Với khoá học này bạn sẽ:
Nắm được kiến thức bài bản từ đầu về thư viện Javascript nổi tiếng phát triển bởi facebook - React JS.
Nắm được logic hoạt động, các khái niệm, cách thao tác, lập trình chức năng và cách kết hợp Redux và React JS.
Học từ đầu về cách thao tác với cơ sở dữ liệu PostgreSQL.
Hiểu cách xử lý Router trong lập trình React JS.
Học cách tích hợp React JS với LocalStorage.
Học cách tích hợp React JS với Firebase.
Lập trình Node JS với cơ sở dữ liệu PostgreSQL.
Đưa bạn từng bước đi từ chưa biết gì cho đến lúc bạn có thể tự tin apply vào các công ty lập trình React.
Khóa học sẽ giúp bạn có thể thiết kế những trang web dựa trên nền tảng React một cách chuyên nghiệp nhất.
Hoàn tất khóa học, bạn có thể apply vào các công ty lập trình Web có yêu cầu React với "Profile cá nhân của bạn có React JS là Headhunt sẽ gọi tới bạn liên tục"!
Khóa học sẽ giúp bạn lập trình Node JS với vai trò API, và React JS với vai trò frontend thông qua một ứng dụng fullstack Javascript.
Nội dung
0 Chương
•
0 Bài học
•
0 giờ 0 phút
Mở rộng tất cả
Giới thiệu - cài đặt - và chạy chương trình React JS đầu tiên
3 Bài học
•
33 phút 04 giây
Giới thiệu React JS13:36
Cài đặt công cụ10:00
Chạy app react js đầu tiên09:28
Khái niệm và 4 cách định nghĩa component trong React JS
4 Bài học
•
19 phút 46 giây
Khái niệm component05:03
Định nghĩa component cách số 105:18
Định nghĩa component bằng Anonymous function và Arrow Function05:01
Định nghĩa component bằng Class04:24
Khái niệm và cách truyền thông tin qua Props trong Component
2 Bài học
•
17 phút 28 giây
Khái niệm props trong component10:31
Phương pháp số 2 thao tác với props trong component06:57
Thực hành JSX và hàm 'Map' thông dụng
2 Bài học
•
14 phút 28 giây
Cách viết JSX07:19
Cách sử dụng hàm map trong react js07:09
Thực hành kiến thức Component qua bài tập chuyển đổi giao diện từ bootstrap 4 sa
4 Bài học
•
32 phút 16 giây
Thực hành 'component hoá' giao diện HTML bằng React JS05:17
Sử dụng Public_URL04:58
Sử dụng phím tắt cho việc tạo component09:58
Hoàn thiện phần giao diện từ bootstrap sang React js Component12:03
Hai cách viết tương tác trong React JS
2 Bài học
•
15 phút 52 giây
Cách viết tương tác với hàm không có tham số trong React js10:26
Cách viết tổng quát tương tác trong React js05:26
Khái niệm State - thao tác với state
4 Bài học
•
26 phút 59 giây
Hiểu về State trong React js07:42
Thực hành với State trong React JS - Tạo hàm render09:05
Thực hành với State trong React JS - Thay đổi State06:58
Sử dụng thuộc tính defaultValue trong JSX03:14
Học về LifeCycle của React Component
6 Bài học
•
47 phút 47 giây
LifeCycle trong React JS07:32
Sử dụng thuộc tính Ref trong JSX05:14
Sử dụng LifeCycle cơ bản với Mounting07:46
Sử dụng 4 hàm trong LifeCycle updation08:22
Sử dụng các hàm Update cho Props trong LifeCycle phần 107:33
Sử dụng các hàm Update cho Props trong LifeCycle - phần 211:20
Học về React Router và thực hành tạo giao diện
4 Bài học
•
39 phút 13 giây
Giới thiệu React Router08:00
Tạo giao diện trang chủ11:17
Tạo giao diện chức năng tin tức12:25
Tạo giao diện trang liên hệ07:31
Chuyển đổi từ giao diện thành React Component
2 Bài học
•
27 phút 03 giây
Tạo component Home, Footer, Nav12:55
Chuyển 4 trang HTML thành 6 Component React js14:08
Tích hợp React Router để thao tác không cần load lại trang
3 Bài học
•
25 phút 23 giây
Cài đặt React Router và sử dụng điều hướng cơ bản11:18
Xử lý điều hướng bằng Router không cần load lại trang09:22
Đặt trạng thái cho thanh điều hướng như Gmail bằng activeClassName04:43
Tạo dữ liệu và load dữ liệu Json trong React JS
2 Bài học
•
18 phút 02 giây
Tạo file dữ liệu Json chuẩn bị cho xử lý URL11:11
Load dữ liệu và tạo NewsItem06:51
Ánh xạ dữ liệu vào Component và tạo đường dẫn SEO
2 Bài học
•
22 phút 58 giây
Mapping dữ liệu vào component11:39
Tạo đường dẫn thân thiện với SEO trong React JS11:19
Cách truyền tham số thông qua URL và nhận dữ liệu từ tham số truyền vào
2 Bài học
•
20 phút 39 giây
Cách nhận tham số truyền vào thông qua URL Parameter05:10
Cách phun dữ liệu ra giao diện dựa trên tham số truyền vào từ URL15:29
Hoàn thiện chức năng tin liên quan cho demo
2 Bài học
•
17 phút 43 giây
Xử lý phần NewsRelated component14:31
Hoàn thiện phần tin liên quan03:12
Cách gửi nhận dữ liệu bằng Form trong React JS
5 Bài học
•
43 phút 25 giây
Bắt đầu xử lý form gửi nhận dữ liệu với Redirect10:28
Cách nhận dữ liệu dưới dạng mảng trong react js form--loi12:47
Tối ưu hóa code React JS07:49
Xử lý phần thẻ select trong React form05:10
Xử lý phần nhận thông tin file trong React form07:11
Project thiết kế backend với dữ liệu LocalStorage
2 Bài học
•
12 phút 03 giây
Giới thiệu Project làm giao diện backend quản lý User bằng React js04:50
Download giao diện Bootstrap Admin07:13
Thiết kế UX và cắt HTML CSS
3 Bài học
•
44 phút 51 giây
Thiết kế giao diện UX demo chức năng trước khi code19:32
Code HTML phần giao diện quản lý theo thiết kế phác thảo12:35
Hoàn thiện giao diện quản lý demo trực tiếp trên Chrome12:44
Tạo Project React và chuyển đổi từ giao diện HTML sang React
3 Bài học
•
18 phút 35 giây
Tạo project05:44
Chuyển đổi giao diện thành 4 component10:27
Thanh lọc các warning cho project02:24
Xử lý các tương tác cơ bản
2 Bài học
•
14 phút 23 giây
Xử lý các tương tác cơ bản trên Frontend bằng React Js07:34
Xử lý hiển thị Form thông báo ứng với trường hợp chung component06:49
Thực hành kết nối các component cha con và component ngang cấp
3 Bài học
•
23 phút 52 giây
Cách kết nối từ component con sang component bố trong React Js11:44
Cách kết nối giữa hai component ngang cấp08:14
Hoàn thiện phần thực hành thao tác giữa các component ngang cấp03:54
Tạo dữ liệu cho project và đẩy dữ liệu ra giao diện
2 Bài học
•
23 phút 22 giây
Tạo dữ liệu cho project và in test08:06
Đẩy dữ liệu ra bảng sử dụng Map15:16
Logic các bước làm và cách lập trình chức năng tìm kiếm
5 Bài học
•
37 phút 28 giây
Tự động co dãn giao diện sử dụng col02:51
Kết nối component bố và con thông qua props10:06
Lấy text tìm kiếm trong Search Component đẩy về App Component07:52
Quá trình tìm dữ liệu sử dụng indexOf12:05
Đẩy kết quả tìm kiếm về giao diện04:34
Lập trình chức năng thêm mới thành viên bằng React JS
5 Bài học
•
29 phút 07 giây
Logic các bước thực hiện chức năng thêm mới thành viên02:47
Lấy dữ liệu thành viên được thêm mới bằng sự kiện onChange06:39
Đẩy dữ liệu vào state07:01
Lấy nội dung gửi lên App và đóng gói đối tượng08:03
Cập nhật thông tin thành viên mới vào dữ liệu Json04:37
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
2 Bài học
•
07 phút 41 giây
Xoá trắng nội dung sau khi thêm mới03:21
Tự tạo id không trùng lặp bằng UUID04:20
Phân tích logic thực hiện chức năng sửa thông tin
3 Bài học
•
16 phút 26 giây
Chức năng sửa thông tin thành viên04:28
Kết nối component để truyền dữ liệu05:44
Truyền thông tin user cần sửa từ tableDataRow lên App06:14
Tạo Form sửa dữ liệu và load nội dung khi được kích hoạt
3 Bài học
•
25 phút 15 giây
Tạo form sửa thông tin của người dùng09:59
Tạo hàm thay đổi trạng thái hiển thị của form07:59
Load nội dung cần sửa vào form07:17
Hoàn thiện chức năng sửa thông tin thành viên
3 Bài học
•
24 phút 50 giây
Sử dụng state lưu trữ thông tin trong quá trình sửa thông tin09:24
Chuyển dữ liệu đã sửa lên Component App12:30
Hoàn thiện chức năng sửa dữ liệu02:56
Lập trình chức năng xóa thông tin thành viên
2 Bài học
•
15 phút 52 giây
Gửi dữ liệu xoá lên component cha07:47
Xoá thông tin người dùng sử dụng hàm filter trong ES201508:05
Dữ liệu hóa ứng dụng với LocalStorage
2 Bài học
•
21 phút 47 giây
Bộ 3 hàm thao tác với localStorage - set - get - remove06:48
Lưu trữ dữ liệu vào localStorage và hoàn thiện ứng dụng14:59
Cách đóng gói ứng dụng và chạy ứng dụng trên Xamp server
3 Bài học
•
16 phút 57 giây
Đóng gói ứng dụng chạy trên server với npm run build04:01
Cách chạy ứng dụng react app trên Xamp10:14
Cách chạy React App bằng cách sử dụng dòng lệnh02:42
Cách đồng bộ code, download code, chạy code và quản lý bằng Github
3 Bài học
•
23 phút 52 giây
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 github07:30
Cách tạo tài khoản, tạo repo, upload lên github09:45
Cách tải code và chạy code06:37
Bắt đầu với Redux - what & why
3 Bài học
•
17 phút 12 giây
Giới thiệu Redux06:00
Sử dụng toán tử 3 chấm06:45
Cách viết tắt ghi đè và thêm mới với toán tử 3 chấm04:27
Phân tích cấu trúc một ứng dụng Redux
2 Bài học
•
17 phút 26 giây
Cấu trúc của một store Redux04:56
Chạy thử cấu trúc redux cơ bản để hiểu cách hoạt động của store - reducer - action12:30
Thực hành với Redux và hàm Subscribe
3 Bài học
•
18 phút 30 giây
Thực hành với Redux Store07:51
Thực hành với Redux Store với chỉ thị xoá bằng filter06:18
Hàm Subscribe trong store04:21
Tạo ứng dụng kết hợp React - Redux
2 Bài học
•
12 phút 15 giây
Cài đặt plugin React-redux ES6 snippet04:06
Tạo ứng dụng kết hợp React - Redux08:09
Cách sử dụng hàm MapDispatchToProps
3 Bài học
•
29 phút 12 giây
Truy xuất dữ liệu trong store từ component con09:27
Cách chia tách Reducer thành từng file12:35
Cách gọi hàm trong Store từ component con07:10
Giới thiệu Project mới với Redux và Firebase
2 Bài học
•
08 phút 34 giây
Hàm mapDispatchToProps04:25
Tổng kết phần cơ bản về cách viết code với redux04:09
Học cách sử dụng Firebase trong 30 phút
3 Bài học
•
30 phút 29 giây
Bước 1 - Tạo giao diện ứng dụng trong 5 phút15:17
Học nhanh cách sử dụng cơ sở dữ liệu FireBase08:53
Thực hành thao tác dữ liệu với Firebase06:19
Thực hành thêm sửa xóa dữ liệu Firebase từ React JS
4 Bài học
•
24 phút 27 giây
Kết nối React js - Firebase05:38
Lấy dữ liệu của bảng dữ liệu thông qua DataSnapshot08:18
Sửa dữ liệu trong Firebase03:51
Thêm dữ liệu vào Firebase bằng 2 cách06:40
Cài đặt redux - khởi tạo store - khởi tạo reducer
4 Bài học
•
29 phút 02 giây
Bắt đầu xử lý dữ liệu cho ứng dụng quản lý ghi chú05:07
Bước số 2 - click vào nút lấy được dữ liệu07:03
Bước 3 - Đẩy dữ liệu lên firebase sử dụng React js thuần09:30
Cài đặt redux - khởi tạo store - khởi tạo reducer07:22
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
3 Bài học
•
24 phút 10 giây
Ba bước cơ bản kết nối store và component11:11
Truyền tham số vào xử lý trong Store09:04
Hoàn thiện chức năng thêm mới dữ liệu vào firebase với redux03:55
Chức năng in dữ liệu ra danh sách
2 Bài học
•
16 phút 40 giây
Xử lý gọi dữ liệu ra danh sách bằng redux - bước 111:13
Xử lý gọi dữ liệu ra danh sách bằng redux - bước 205:27
Thực hành kết nối App và NoteItem với Redux Store
2 Bài học
•
12 phút 56 giây
Kết nối App với Store07:33
Kết nối NoteItem với Store05:23
Chức năng sửa dữ liệu
6 Bài học
•
43 phút 09 giây
Thực hành chức năng sửa ghi chú với redux05:24
Đẩy dữ liệu cần sửa lên trên Store và theo dõi với hàm subscribe08:47
Đẩy dữ liệu cần sửa hiện thị lên Form07:33
Lấy dữ liệu ban đầu bằng cách áp dụng React lifeCycle08:42
Đẩy dữ liệu lên trên store khi click vào nút "Lưu"08:29
Hoàn thiện chức năng sửa ghi chú của ứng dụng04:14
Chức năng xoá dữ liệu
1 Bài học
•
07 phút 43 giây
Hoàn thiện chức năng xoá ghi chú07:43
Xử lý điều hướng sử dụng Store
2 Bài học
•
10 phút 26 giây
Xử lý điều hướng sử dụng Store05:00
Hoàn thiện chức năng điều hướng thêm mới ghi chú ko cần load lại trang05:26
Tuỳ biến tiêu đề theo chức năng
2 Bài học
•
14 phút 07 giây
Luyện tập Redux Store qua trường hợp tuỳ biến tiêu đề theo chức năng07:33
Hiển thị thông báo các thao tác bằng plugin của React js06:34
Lập trình phần hiển thị thông báo cho các thao tác chức năng
3 Bài học
•
17 phút 01 giây
Định nghĩa state trong Store qui định việc hiển thị của thông báo04:36
Bật tắt thông báo tương ứng với thao tác chức năng trong ứng dụng06:06
Xử lý tắt thông báo bằng hai cách06:19
Tổng kết phần React Redux
2 Bài học
•
12 phút 35 giây
Truyền tham số nội dung vào thông báo thông qua state05:08
Hoàn thiện chức năng thông báo - bài tập - và tổng kết07:27
Cài đặt và tạo cơ sở dữ liệu PostgreSQL
3 Bài học
•
17 phút 57 giây
Giới thiệu phần Node JS kết hợp với React JS09:43
Cài đặt cơ sở dữ liệu PostgreSQL version 1003:25
Thực hành tạo cơ sở dữ liệu - Tạo bảng - Insert dữ liệu với PostgreSQL04:49
Khởi tạo project
2 Bài học
•
15 phút 51 giây
Cài đặt các phần mềm cần sử dụng - Khởi tạo project11:04
Khởi tạo frontend React Js04:47
Kết nối Node js và PostgreSql
2 Bài học
•
06 phút 57 giây
Đổi cổng kết nối của node js01:21
Kết nối Node js và cơ sở dữ liệu05:36
Phân tích logic của một ứng dụng
2 Bài học
•
09 phút 59 giây
Lấy dữ liệu từ postgreSql thông qua Node js06:00
Phân tích logic của một ứng dụng Javascript Fullstack03:59
Dựng frontend bằng React js
3 Bài học
•
20 phút 41 giây
Tạo giao diện frontend sử dụng bootstrap 406:31
Sử dụng React JS làm frontend10:10
Kết nối các Component trong React JS04:00
Giao tiếp dữ liệu từ Node js sang React JS
2 Bài học
•
25 phút 08 giây
Kết nối Node JS và React JS thông qua axios10:56
Cách hứng dữ liệu từ NoteJS trong React JS14:12
Giao tiếp dữ liệu từ React js sang Node JS
9 Bài học
•
64 phút 06 giây
Gửi dữ liệu từ React JS lên Node JS04:47
Xử lý thêm dữ liệu trong Node JS10:01
Hoàn thiện thao tác thêm dữ liệu trong React JS08:33
Tạo form nhập liệu với React JS04:26
Lấy dữ liệu trong React JS07:03
Chuyển dữ liệu từ React JS về Node JS10:10
Setup proxy cho kết nối riêng của backend và frontend04:56
Tự động update nội dung khi thêm mới - phần 106:20
Tự động update nội dung khi thêm mới - phần 207:50
Tổng kết ứng dụng
2 Bài học
•
18 phút 04 giây
Cách quản lý code bằng github - download và chạy file project16:28
Tổng kết ứng dụng Node React01:36
Giới thiệu khóa học tiếp theo
1 Bài học
•
10 phút 42 giây
Lộ trình học10:42
Quản trị viên
Nguyễn Đức Việt