Học lập trình frontend nâng cao với React JS

Chia sẻ khóa học nhận ngay hoa hồng cực khủng lên đến 45% Thử ngay

Học lập trình frontend nâng cao với React JS

(0 lượt đánh giá khóa học)
Nguyễn Đức Việt

Tổng quan

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.
Yêu cầu của khóa học
- Máy tính có kết nối internet.
Lợi ích từ khóa học
- 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.
Đối tượng mục tiêu
- 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.
Giáo trình
Phần 01 - Giới thiệu - cài đặt - và chạy chương trình React JS đầu tiên
  • Bài 1
    Giới thiệu React JS
    13:41
    Học thử
  • Bài 2
    Cài đặt công cụ
    10:05
    Học thử
  • Bài 3
    Chạy app react js đầu tiên
    09:32
    Học thử
Phần 02 - Khái niệm và 4 cách định nghĩa component trong React JS
  • Bài 4
    Khái niệm component
    05:07
    Học thử
  • Bài 5
    Định nghĩa component cách số 1
    05:23
  • Bài 6
    Định nghĩa component bằng Anonymous function và Arrow Function
    05:26
  • Bài 7
    Đị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
  • Bài 8
    Khái niệm props trong component
    10:35
  • Bài 9
    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
  • Bài 10
    Cách viết JSX
    07:01
  • Bài 11
    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
  • Bài 12
    Thực hành component hoá giao diện HTML bằng React JS
    05:21
  • Bài 13
    Sử dụng Public_URL
    12:08
  • Bài 14
    Sử dụng phím tắt cho việc tạo component
    10:02
  • Bài 15
    Hoàn thiện phần giao diện từ bootstrap sang React js Component
    12:08
Phần 06 - Hai cách viết tương tác trong React JS
  • Bài 16
    Cách viết tương tác với hàm không có tham số trong React JS
    10:31
  • Bài 17
    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
  • Bài 18
    Hiểu về State trong React js
    07:46
  • Bài 19
    Thực hành với State trong React JS - Tạo hàm render
    09:10
Phần 08 - Thay đổi state và sử dụng thuộc tính Default Value
  • Bài 20
    Thực hành với State trong React JS - Thay đổi State
    07:03
  • Bài 21
    Sử dụng thuộc tính defaultValue trong JSX
    03:19
Phần 09 - Học về LifeCycle của React Component
  • Bài 22
    LifeCycle trong React JS
    07:36
  • Bài 23
    Sử dụng thuộc tính Ref trong JSX
    05:19
  • Bài 24
    Sử dụng LifeCycle cơ bản với Mounting
    07:51
  • Bài 25
    Sử dụng 4 hàm trong LifeCycle updation
    08:26
  • Bài 26
    Sử dụng các hàm Update cho Props trong LifeCycle - phần 1
    07:37
  • Bài 27
    Sử dụng các hàm Update cho Props trong LifeCycle - phần 2
    11:25
Phần 10 - Học về React Router và thực hành tạo giao diện
  • Bài 28
    Giới thiệu React Router
    08:05
  • Bài 29
    Tạo giao diện trang chủ
    11:21
  • Bài 30
    Tạo giao diện chức năng tin tức
    12:30
  • Bài 31
    Tạo giao diện trang liên hệ
    07:36
Phần 11 - Chuyển đổi từ giao diện thành React Component
  • Bài 32
    Tạo component Home, Footer, Nav
    12:59
  • Bài 33
    Chuyển 4 trang HTML thành 6 Component React js
    14:13
Phần 12 - Tích hợp React Router để thao tác không cần load lại trang
  • Bài 34
    Cài đặt React Router và sử dụng điều hướng cơ bản
    11:19
  • Bài 35
    Xử lý điều hướng bằng Router không cần load lại trang
    09:27
  • Bài 36
    Đặt trạng thái cho thanh điều hướng như Gmail bằng activeClassName
    04:48
Phần 13 - Tạo dữ liệu và load dữ liệu Json trong React JS
  • Bài 37
    Tạo file dữ liệu Json chuẩn bị cho xử lý URL
    11:15
  • Bài 38
    Load dữ liệu và tạo NewsItem
    06:56
Phần 14 - Ánh xạ dữ liệu vào Component và tạo đường dẫn SEO
  • Bài 39
    Mapping dữ liệu vào component
    11:44
  • Bài 40
    Tạo đường dẫn thân thiện với SEO trong React JS
    11:24
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
  • Bài 41
    Cách nhận tham số truyền vào thông qua URL Parameter
    05:15
  • Bài 42
    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
  • Bài 43
    Xử lý phần NewsRelated component
    14:35
  • Bài 44
    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
  • Bài 45
    Bắt đầu xử lý form gửi nhận dữ liệu với Redirect
    10:33
  • Bài 46
    Cách nhận dữ liệu dưới dạng mảng trong react js form
    12:51
  • Bài 47
    Tối ưu hoá code React JS
    07:56
  • Bài 48
    Xử lý phần thẻ select trong React form
    05:15
  • Bài 49
    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
  • Bài 50
    Giới thiệu Project làm giao diện backend quản lý User bằng React js
    04:55
  • Bài 51
    Download giao diện Bootstrap Admin
    07:17
Phần 19 - Thiết kế UX và cắt HTML CSS
  • Bài 52
    Thiết kế giao diện UX demo chức năng trước khi code
    19:32
  • Bài 53
    Code HTML phần giao diện quản lý theo thiết kế phác thảo
    12:39
  • Bài 54
    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
  • Bài 55
    Tạo project
    05:49
  • Bài 56
    Chuyển đổi giao diện thành 4 component
    10:31
  • Bài 57
    Thanh lọc các warning cho project
    02:29
Phần 21 - Xử lý các tương tác cơ bản
  • Bài 58
    Xử lý các tương tác cơ bản trên Frontend bằng React Js
    07:38
  • Bài 59
    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
  • Bài 60
    Cách kết nối từ component con sang component bố trong React Js
    11:48
  • Bài 61
    Cách kết nối giữa hai component ngang cấp
    08:18
  • Bài 62
    Hoàn thiện phần thực hành thao tác giữa các component ngang cấp
    03:59
Phần 23 - Tạo dữ liệu cho project và đẩy dữ liệu ra giao diện
  • Bài 63
    Tạo dữ liệu cho project và in test
    08:10
  • Bài 64
    Đẩy dữ liệu ra bảng sử dụng Map
    15:21
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
  • Bài 65
    Tự động co dãn giao diện sử dụng col
    02:56
  • Bài 66
    Kết nối component bố và con thông qua props
    10:11
  • Bài 67
    Lấy text tìm kiếm trong Search Component đẩy về App Component
    07:57
  • Bài 68
    Quá trình tìm dữ liệu sử dụng indexOf
    12:10
  • Bài 69
    Đẩy kết quả tìm kiếm về giao diện
    04:39
Phần 25 - Lập trình chức năng thêm mới thành viên bằng React JS
  • Bài 70
    Logic các bước thực hiện chức năng thêm mới thành viên
    02:51
  • Bài 71
    Lấy dữ liệu thành viên được thêm mới bằng sự kiện onChange
    06:43
  • Bài 72
    Đẩy dữ liệu vào state
    07:05
  • Bài 73
    Lấy nội dung gửi lên App và đóng gói đối tượng
    04:42
  • Bài 74
    Cập nhật thông tin thành viên mới vào dữ liệu Json
    04:42
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
  • Bài 75
    Xoá trắng nội dung sau khi thêm mới
    03:26
  • Bài 76
    Tự tạo id không trùng lặp bằng UUID
    04:25
Phần 27 - Phân tích logic thực hiện chức năng sửa thông tin
  • Bài 77
    Chức năng sửa thông tin thành viên
    04:33
  • Bài 78
    Kết nối component để truyền dữ liệu
    05:49
  • Bài 79
    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
  • Bài 80
    Tạo form sửa thông tin của người dùng
    10:03
  • Bài 81
    Tạo hàm thay đổi trạng thái hiển thị của form
    08:03
  • Bài 82
    Load nội dung cần sửa vào form
    07:22
Phần 29 - Hoàn thiện chức năng sửa thông tin thành viên
  • Bài 83
    Sử dụng state lưu trữ thông tin trong quá trình sửa thông tin
    09:28
  • Bài 84
    Chuyển dữ liệu đã sửa lên Component App
    12:35
  • Bài 85
    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
  • Bài 86
    Gửi dữ liệu xoá lên component cha
    07:52
  • Bài 87
    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
  • Bài 88
    Bộ 3 hàm thao tác với localStorage - set - get - remove
    06:53
  • Bài 89
    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
  • Bài 90
    Đóng gói ứng dụng chạy trên server với npm run build
    04:06
  • Bài 91
    Cách chạy ứng dụng react app trên Xamp
    10:19
  • Bài 92
    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
  • Bài 93
    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
  • Bài 94
    Cách tạo tài khoản, tạo repo, upload lên github
    09:50
  • Bài 95
    Cách tải code và chạy code
    06:42
Phần 34 - Bắt đầu với Redux - what - why
  • Bài 96
    Giới thiệu Redux
    06:05
  • Bài 97
    Sử dụng toán tử 3 chấm
    06:49
  • Bài 98
    Cách viết tắt ghi đè và thêm mới với toán tử 3 chấm
    06:49
Phần 35 - Phân tích cấu trúc một ứng dụng Redux
  • Bài 99
    Cấu trúc của một store Redux
    05:00
  • Bài 100
    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
  • Bài 101
    Thực hành với Redux Store
    07:55
  • Bài 102
    Thực hành với Redux Store với chỉ thị xoá bằng filter
    06:22
  • Bài 103
    Hàm Subscribe trong store
    04:25
Phần 37 - Tạo ứng dụng kết hợp React - Redux
  • Bài 104
    Cài đặt plugin React-redux ES6 snippet
    04:11
  • Bài 105
    Tạo ứng dụng kết hợp React - Redux
    08:14
Phần 38 - Cách sử dụng hàm MapDispatchToProps
  • Bài 106
    Truy xuất dữ liệu trong store từ component con
    09:31
  • Bài 107
    Cách chia tách Reducer thành từng file
    12:40
  • Bài 108
    Cách gọi hàm trong Store từ component con
    07:15
  • Bài 109
    Hàm mapDispatchToProps
    04:30
Phần 39 - Giới thiệu Project mới với Redux và Firebase
  • Bài 110
    Tổng kết phần cơ bản về cách viết code với redux
    04:13
  • Bài 111
    Bước 1 - Tạo giao diện ứng dụng trong 5 phút
    15:22
Phần 40 - Học cách sử dụng Firebase trong 30 phút
  • Bài 112
    Học nhanh cách sử dụng cơ sở dữ liệu FireBase
    08:57
  • Bài 113
    Thực hành thao tác dữ liệu với Firebase
    06:24
Phần 41 - Thực hành thêm sửa xóa dữ liệu Firebase từ React JS
  • Bài 114
    Kết nối React js - Firebase
    08:57
  • Bài 115
    Lấy dữ liệu của bảng dữ liệu thông qua DataSnapshot
    08:22
  • Bài 116
    Sửa dữ liệu trong Firebase
    03:55
  • Bài 117
    Thêm dữ liệu vào Firebase bằng 2 cách
    06:44
Phần 42 - Cài đặt redux - khởi tạo store - khởi tạo reducer
  • Bài 118
    Bắt đầu xử lý dữ liệu cho ứng dụng quản lý ghi chú
    05:12
  • Bài 119
    Bước số 2 - click vào nút lấy được dữ liệu
    07:07
  • Bài 120
    Bước 3 - Đẩy dữ liệu lên firebase sử dụng React js thuần
    07:27
  • Bài 121
    Cài đặt redux - khởi tạo store - khởi tạo reducer
    07:27
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
  • Bài 122
    Ba bước cơ bản kết nối store và component
    11:15
  • Bài 123
    Truyền tham số vào xử lý trong Store
    09:09
Phần 44 - Chức năng in dữ liệu ra danh sách
  • Bài 124
    Ba bước cơ bản kết nối store và component
    11:15
  • Bài 125
    Truyền tham số vào xử lý trong Store
    09:09
  • Bài 126
    Hoàn thiện chức năng thêm mới dữ liệu vào firebase với redux
    03:59
  • Bài 127
    Xử lý gọi dữ liệu ra danh sách bằng redux - bước 1
    11:18
  • Bài 128
    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
  • Bài 129
    Kết nối App với Store
    07:37
  • Bài 130
    Kết nối NoteItem với Store
    05:28
Phần 46 - Chức năng sửa dữ liệu
  • Bài 131
    Thực hành chức năng sửa ghi chú với redux
    05:28
  • Bài 132
    Đẩy dữ liệu cần sửa lên trên Store và theo dõi với hàm subscribe
    08:52
  • Bài 133
    Đẩy dữ liệu cần sửa hiện thị lên Form
    07:37
  • Bài 134
    Lấy dữ liệu ban đầu bằng cách áp dụng React lifeCycle
    08:47
  • Bài 135
    Đẩy dữ liệu lên trên store khi click vào nút _Lưu_
    08:34
  • Bài 136
    Hoàn thiện chức năng sửa ghi chú của ứng dụng
    04:19
Phần 47 - Chức năng xoá dữ liệu
  • Bài 137
    Hoàn thiện chức năng xoá ghi chú
    07:48
Phần 48 - Xử lý điều hướng sử dụng Store
  • Bài 138
    Xử lý điều hướng sử dụng Store
    05:04
  • Bài 139
    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
  • Bài 140
    Luyện tập Redux Store qua trường hợp tuỳ biến tiêu đề theo chức năng
    07:38
  • Bài 141
    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
  • Bài 142
    Định nghĩa state trong Store qui định việc hiển thị của thông báo
    04:41
  • Bài 143
    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
  • Bài 144
    Xử lý tắt thông báo bằng hai cách
    06:24
Phần 51 - Tổng kết
  • Bài 145
    Truyền tham số nội dung vào thông báo thông qua state
    05:12
  • Bài 146
    Hoàn thiện chức năng thông báo, bài tập và tổng kết
    07:32
Phần 52 - Cài đặt và tạo cơ sở dữ liệu PostgreSQL
  • Bài 147
    Giới thiệu phần Node JS kết hợp với React JS
    09:48
  • Bài 148
    Cài đặt cơ sở dữ liệu PostgreSQL version 10
    03:29
  • Bài 149
    Thực hành tạo cơ sở dữ liệu - Tạo bảng - Insert dữ liệu với PostgreSQL
    04:54
Phần 53 - Khởi tạo project
  • Bài 150
    Cài đặt các phần mềm cần sử dụng - Khởi tạo project
    11:09
  • Bài 151
    Khởi tạo frontend React Js
    04:51
Phần 54 - Kết nối Node js và PostgreSql
  • Bài 152
    Đổi cổng kết nối của node js
    01:26
  • Bài 153
    Kết nối Node js và cơ sở dữ liệu
    05:41
Phần 55 - Phân tích logic của một ứng dụng
  • Bài 154
    Lấy dữ liệu từ postgreSql thông qua Node js
    06:04
  • Bài 155
    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
  • Bài 156
    Tạo giao diện frontend sử dụng bootstrap 4
    06:35
  • Bài 157
    Sử dụng React JS làm frontend
    10:14
  • Bài 158
    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
  • Bài 159
    Kết nối Node JS và React JS thông qua axios
    11:01
  • Bài 160
    Cách hứng dữ liệu từ NoteJS trong React JS
    06:04
Phần 58 - Giao tiếp dữ liệu từ React js sang Node JS
  • Bài 161
    Gửi dữ liệu từ React JS lên Node JS
    04:51
  • Bài 162
    Xử lý thêm dữ liệu trong Node JS
    07:07
  • Bài 163
    Hoàn thiện thao tác thêm dữ liệu trong React JS
    08:37
  • Bài 164
    Tạo form nhập liệu với React JS
    04:31
  • Bài 165
    Lấy dữ liệu trong React JS
    07:07
  • Bài 166
    Chuyển dữ liệu từ React JS về Node JS
    10:14
  • Bài 167
    Setup proxy cho kết nối riêng của backend và frontend
    06:24
  • Bài 168
    Tự động update nội dung khi thêm mới - phần 1
    06:24
  • Bài 169
    Tự động update nội dung khi thêm mới - phần 2
    10:14
Phần 59 - Tổng kết ứng dụng
  • Bài 170
    Cách quản lý code bằng github - download và chạy file project
    16:33
  • Bài 171
    Tổng kết ứng dụng Node React
    01:41
Giá khóa học 249.000đ
  • Chủ đề Tin học văn phòng
  • Số bài học 171
  • Thời lượng video 22:15:38
Thêm vào giỏ hàng
Mua 1 lần
học trọn đời
Học mọi lúc
mọi nơi
Dễ hiểu
dễ áp dụng
Kiến thức
sâu rộng
Nguyễn Đức Việt
Giảng viên Thiết kế web tại FPT - Arena
9
Học viên
92
Bài giảng
0
Đánh giá
Tốt nghiệp đại học Bách Khoa Hà Nội, khóa 49, khoa Công nghệ phần mềm. Giảng viên Thiết kế web tại FPT - Arena. Với 5 năm kinh nghiệm giảng dạy và làm việc trong lĩnh vực thiết kế web, anh đã đào tạo hàng nghìn học viên đã tốt nghiệp và làm việc trong lĩnh vực thiết kế, đặc biệt là thiết kế web chuyên nghiệp. Tham gia rất nhiều dự án web cho FPT và các dự án về thiết kế web dựa trên ngôn ngữ lập trình mã nguồn mở.
  • Hướng dẫn thanh toán