đ399,000
699,000What you'll learn
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.
Course content
0 Sections
•
0 Lessons
•
0h 0m
Expand all section
Giới thiệu - cài đặt - và chạy chương trình React JS đầu tiên
3 Lessons
•
33 minutes 04 seconds
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 Lessons
•
19 minutes 46 seconds
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 Lessons
•
17 minutes 28 seconds
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 Lessons
•
14 minutes 28 seconds
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 Lessons
•
32 minutes 16 seconds
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 Lessons
•
15 minutes 52 seconds
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 Lessons
•
26 minutes 59 seconds
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 Lessons
•
47 minutes 47 seconds
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 Lessons
•
39 minutes 13 seconds
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 Lessons
•
27 minutes 03 seconds
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 Lessons
•
25 minutes 23 seconds
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 Lessons
•
18 minutes 02 seconds
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 Lessons
•
22 minutes 58 seconds
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 Lessons
•
20 minutes 39 seconds
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 Lessons
•
17 minutes 43 seconds
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 Lessons
•
43 minutes 25 seconds
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 Lessons
•
12 minutes 03 seconds
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 Lessons
•
44 minutes 51 seconds
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 Lessons
•
18 minutes 35 seconds
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 Lessons
•
14 minutes 23 seconds
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 Lessons
•
23 minutes 52 seconds
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 Lessons
•
23 minutes 22 seconds
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 Lessons
•
37 minutes 28 seconds
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 Lessons
•
29 minutes 07 seconds
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 Lessons
•
07 minutes 41 seconds
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 Lessons
•
16 minutes 26 seconds
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 Lessons
•
25 minutes 15 seconds
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 Lessons
•
24 minutes 50 seconds
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 Lessons
•
15 minutes 52 seconds
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 Lessons
•
21 minutes 47 seconds
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 Lessons
•
16 minutes 57 seconds
Đó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 Lessons
•
23 minutes 52 seconds
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 Lessons
•
17 minutes 12 seconds
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 Lessons
•
17 minutes 26 seconds
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 Lessons
•
18 minutes 30 seconds
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 Lessons
•
12 minutes 15 seconds
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 Lessons
•
29 minutes 12 seconds
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 Lessons
•
08 minutes 34 seconds
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 Lessons
•
30 minutes 29 seconds
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 Lessons
•
24 minutes 27 seconds
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 Lessons
•
29 minutes 02 seconds
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 Lessons
•
24 minutes 10 seconds
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 Lessons
•
16 minutes 40 seconds
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 Lessons
•
12 minutes 56 seconds
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 Lessons
•
43 minutes 09 seconds
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 Lessons
•
07 minutes 43 seconds
Hoàn thiện chức năng xoá ghi chú07:43
Xử lý điều hướng sử dụng Store
2 Lessons
•
10 minutes 26 seconds
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 Lessons
•
14 minutes 07 seconds
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 Lessons
•
17 minutes 01 seconds
Đị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 Lessons
•
12 minutes 35 seconds
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 Lessons
•
17 minutes 57 seconds
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 Lessons
•
15 minutes 51 seconds
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 Lessons
•
06 minutes 57 seconds
Đổ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 Lessons
•
09 minutes 59 seconds
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 Lessons
•
20 minutes 41 seconds
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 Lessons
•
25 minutes 08 seconds
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 Lessons
•
64 minutes 06 seconds
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 Lessons
•
18 minutes 04 seconds
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 Lessons
•
10 minutes 42 seconds
Lộ trình học10:42
Instructor
Nguyễn Đức Việt