"Giới thiệu vể React JS - thư viện javascript phát triển bởi Facebook.
- Sức mạnh khủng khiếp mà Facebook mang đến trong React, đó chính là mô hình DOM, làm tăng khả năng trình diễn các đối tượng trên nền web một cách hiệu quả & tốc độ mượt hơn bất kì Java Script Framework nào trước đây.
- Mục đích mà Facebook nhắm đến trong React là ""Learn Once, Write Anywhere"" - Có nghĩa là sau khi hoàn tất khóa học React JS, ngoài việc bạn thiết kế được layout web, bạn còn sẽ có nền tảng vững chắc để tiếp cận React Native (Mobile App) mà không cần phải mất nhiều thời gian.
Đối tượng học khóa học :
- React cực kì thân thiện đối với bạn nào đã từng học qua JavaScript, CSS hoặc HTML.
- Sinh viên học lập trình web, muốn tối ưu tốc độ xử lý của website.
- Những người muốn tiếp cận công nghệ lập trình web bằng React JS nhanh nhất qua bài thực hành.
- Người muốn tìm hiểu về lập trình frontend bằng React JS một cách bài bản nhưng chưa biết bắt đầu từ đâu.
- Các lập trình viên front-end đang sử dụng các framework khác, nay muốn nâng cao tay nghề thông qua việc học ReactJS
- Các lập trình viên back-end, mobile muốn chuyển sang phát triển các ứng dụng front-end trong thời gian ngắn nhất
- Các lập trình viên đang băn khoăn, muốn lựa chọn một framework tốt cho phát triển ứng dụng front-end
"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ác tích hợp React JS với Firebase
- Đư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.
Nội dung khóa học
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
