Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Đăng nhập
Xem tất cả kết quả
Menu
Đăng nhập Đăng ký miễn phí

Node with React: Fullstack Web Development

Node với React: Phát triển Web Fullstack

Node với React: Phát triển Web Fullstack

Xây dựng và triển khai ứng dụng web fullstack với NodeJS, React, Redux, Express và MongoDB.

4.4
(14,994 đánh giá)
90,572 học viên
Giảng viên
Stephen Grider
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 1.999.000đ -97%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
25.5 giờ video
231 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 18/03/2026
#Fullstack Development #Node Js #React #Web Development

Bạn sẽ học được gì

Tạo dự án mẫu khởi đầu với React, Redux, Express và MongoDB
Hiểu các công nghệ web phổ biến và mẫu thiết kế để kết nối chúng với nhau
Thành thạo kỹ thuật triển khai giữa môi trường sản xuất và phát triển
Tạo ứng dụng có xác thực Google OAuth
Học cách tạo và gửi email hiệu quả từ máy chủ backend
Chấp nhận và xử lý thanh toán thẻ tín dụng từ người dùng

Yêu cầu

Hiểu biết cơ bản về Javascript, React và Redux
Máy tính chạy Mac, Windows hoặc Linux

Đối tượng phù hợp

Dành cho bất kỳ ai muốn học cách xây dựng ứng dụng fullstack với công nghệ web mới nhất

Nội dung khóa học

14 phần • 217 bài giảng
1 Tài nguyên khóa học
2 Tổng quan ứng dụng
3 Hướng dẫn luồng người dùng trong ứng dụng
4 Công nghệ sử dụng
5 Bản phác thảo ứng dụng
1 Kiến trúc ứng dụng
2 Mối quan hệ giữa Node và Express
3 Tạo ứng dụng Express
4 Bộ xử lý tuyến đường (Route Handlers) trong Express
5 Thông tin quan trọng về Heroku và triển khai
6 Danh sách kiểm tra triển khai
7 [Render] Thiết lập Git và GitHub
8 [Render] Đăng ký, Tạo dịch vụ và Triển khai
9 [Heroku] Cài đặt Heroku CLI
10 [Heroku] Xác minh triển khai
11 [Heroku] Triển khai tiếp theo
1 Giới thiệu về Google OAuth
2 Luồng hoạt động của OAuth
3 Tổng quan về Passport JS
4 Thiết lập Passport
5 Google OAuth API
6 Thiết lập dự án Google và kích hoạt Google OAuth API
7 Bảo mật khóa API
8 Tùy chọn Google Strategy
9 Kiểm tra OAuth
10 URI chuyển hướng được ủy quyền
11 Callback OAuth
12 Access Token và Refresh Token
13 Thiết lập Nodemon
1 Tái cấu trúc cấu trúc máy chủ
2 Lý thuyết về xác thực
3 Đăng nhập người dùng với OAuth
4 Giới thiệu về MongoDB
5 MongoDB từ xa so với MongoDB cục bộ
6 Thiết lập và cấu hình MongoDB Atlas
7 Kết nối Mongoose với MongoDB
8 Nghỉ giải lao và ôn tập
9 Lớp Model Mongoose
10 Lưu các thể hiện Model
11 TokenError: Bad Request
12 Truy vấn Mongoose
13 Callback Passport
14 Mã hóa người dùng
15 Giải mã người dùng
16 Bật Cookies
17 Kiểm tra xác thực
18 Đăng xuất người dùng
19 [Tùy chọn] Tìm hiểu sâu hơn
1 Khóa Phát triển vs Khóa Sản xuất
2 Thiết lập và cấu hình MongoDB Atlas cho sản xuất
3 Tạo tài nguyên sản xuất
4 Xác định môi trường
5 Sơ đồ kiểm soát phiên bản
6 [Render] Biến môi trường sản xuất
7 [Heroku] Biến môi trường sản xuất
8 Sửa lỗi Proxy
1 Mẫu ứng dụng React bắt buộc
2 Máy chủ Front End riêng biệt
3 Chạy Client và Server
4 Cập nhật quan trọng về Proxy của Create React App
5 Trở ngại về định tuyến (Routing)
6 Ưu điểm của Proxy trong Create React App
7 [Tùy chọn] Tại sao lại dùng kiến trúc này?
1 Cú pháp Async/Await
2 Tái cấu trúc với Async/Await
3 Lưu ý quan trọng về Proxy
4 Công nghệ Front End
5 Thiết lập React cho Client
6 Cảnh báo ReactDOM với React v18
7 Cài đặt các module gốc
8 Xử lý sự cố NPM
9 createStore bị gạch ngang trong trình soạn thảo
10 Ôn tập và thiết lập Redux
11 Auth Reducer
12 Hoàn thiện thiết lập Reducer
13 Tại sao chúng ta quan tâm đến xác thực
14 Thiết lập React Router
15 Cấu hình Route
16 Khớp Route với Exact
17 Các thành phần luôn hiển thị
18 Materialize CSS
19 Webpack với CSS
20 Thiết kế Header
21 API người dùng hiện tại
22 Quy tắc Proxy bổ sung
23 Kiến thức cơ bản về Redux Thunk
24 Tái cấu trúc ứng dụng
25 Kiểm tra FetchUser
26 Tái cấu trúc sang Async/Await
27 Giá trị trả về của AuthReducer
28 Truy cập State trong Header
29 Nội dung Header
30 Chuyển hướng người dùng khi xác thực
31 Chuyển hướng khi đăng xuất
32 Thành phần Landing
33 Thẻ Link
1 Thanh toán phía Client
2 Cân nhắc về thanh toán
3 Quy trình thanh toán Stripe
4 Khám phá Stripe API
5 Khóa API Stripe
6 Biến môi trường với React
7 Thành phần Payments
8 Token Stripe
9 Sửa lỗi thanh toán
10 Tái sử dụng Action Types
11 Gửi Token Stripe
12 Bộ xử lý Post Request
13 Tạo giao dịch thanh toán (Charges)
14 Middleware BodyParser
15 Tạo đối tượng Charge
16 Hoàn tất giao dịch thanh toán
17 Thêm Credits cho người dùng
18 Yêu cầu xác thực
19 Middleware cụ thể cho Route
20 Hiển thị số lượng Credits
21 Cập nhật Credits
1 Express với Create-React-App trong sản xuất
2 Định tuyến trong sản xuất
3 Tùy chọn triển khai
4 Thêm bước Build
5 [Render] Postbuild và Triển khai
6 Sửa lỗi cho bản build Heroku thất bại
7 Kiểm tra triển khai
1 Tổng quan về Khảo sát
2 Route của máy chủ
3 Model Khảo sát
4 Nhược điểm của Model
5 Hạn chế của Bộ sưu tập Subdocument
6 Thiết lập SubDocs
7 Trường quan hệ
8 Bộ xử lý Route tạo Khảo sát
9 Xác minh Credits tối thiểu
10 Tạo Khảo sát
11 Tạo bộ sưu tập Subdoc
12 Oops! Một chút điều chỉnh
13 Tạo Mailers
14 Xác định người dùng duy nhất
15 Cập nhật kích hoạt Sendgrid
16 Thiết lập Sendgrid
17 Thiết lập Mailer
18 Cập nhật cài đặt "from_email"
19 Sử dụng Mailer
20 Hàm tạo Mailer
21 Mẫu để gửi Email
22 Thêm thuộc tính Mailer
23 Gửi Email bằng SendGrid
24 Kiểm tra gửi Email
25 Cải thiện mẫu Email
26 Hoàn thiện trong Route Handler
27 Xác minh Sendgrid Click Tracking
28 Phản hồi cho phản hồi người dùng
1 Tạo Khảo sát phía Client
2 Material Icons
3 Điều hướng với thẻ Link
4 Form SurveyNew
5 Mục đích của Redux Form
6 Lưu ý quan trọng về cài đặt Redux Form
7 Thiết lập Redux Form
8 Trợ giúp ReduxForm
9 Redux Form trong thực tế
10 Thành phần Field tùy chỉnh
11 Kết nối các Field tùy chỉnh
12 Làm gọn các Field (DRY)
13 Field từ Cấu hình
14 Tạo kiểu cho Form
15 Xác thực Form
16 Hiển thị lỗi xác thực
17 Tổng quát hóa xác thực Field
18 Xác thực Email
19 Hiển thị Email không hợp lệ
20 Bật/tắt hiển thị?
21 Chuyển tiếp từ SurveyForm
22 Quay lại Form
23 Duy trì giá trị Form
24 Tái cấu trúc Form Fields
25 Hoàn thiện các trường Review
26 Công việc Form còn tồn đọng
27 Truyền giá trị từ biểu mẫu
28 Sửa tên thuộc tính
29 Gửi dữ liệu đến khảo sát
30 Chuyển hướng sau khi gửi
1 Phản hồi bằng Webhooks
2 Webhooks trong môi trường phát triển
3 Lưu ý nhanh trước bài tiếp theo...
4 Thiết lập LocalTunnel
5 Thiết lập Ngrok thay thế LocalTunnel
6 Kiểm tra Webhooks
7 Hoàn thiện thiết lập Webhook
8 Mã hóa dữ liệu khảo sát
9 Dữ liệu không sạch từ Webhooks
10 Quy trình xử lý
11 Phân tích tuyến đường
12 Lỗi "TypeError: Path is not a constructor"
13 Dọn dẹp mã nguồn
14 Sự kiện duy nhất
15 Công cụ hỗ trợ Lodash Chain
16 Truy vấn Mongoose không hợp lệ
17 Tìm khảo sát chính xác
18 Cập nhật bản ghi
19 Thực thi truy vấn
20 Kiểm tra truy vấn
21 Các vấn đề nhỏ xung quanh khảo sát
22 Mẹo sử dụng Mongoose
1 Lấy danh sách khảo sát
2 Chỉ định trường mô hình
3 Kiểm tra điểm cuối khảo sát
4 Kết nối Khảo sát với Redux
5 Kết nối React với Redux
6 Hiển thị danh sách khảo sát
7 Đảo ngược danh sách khảo sát
8 Mở rộng ứng dụng
9 [Render] Ghi chú triển khai từ bài cuối
10 [Heroku] Ghi chú triển khai từ bài cuối
11 Thay thế Sendgrid bằng Mailgun
12 Cập nhật dự án hoàn chỉnh với phiên bản và thư viện mới nhất
1 Phần thưởng đặc biệt!

Giới thiệu khóa học

Note: This course assumes you've got the basics of React and Redux down.  Check out my course 'Modern React with Redux', its the perfect preparation!

Go beyond the basics of React and Redux!  This course will teach you to combine the ultra-popular React, Redux, Express, and MongoDB technologies to build a fullstack web application.

Advanced Deployment? You will learn it.  Billing/Payments? Included.  Handling Email? Of course!

------------------------------

What Will You Build?

All of my courses are 'learn-by-doing': no boring endless lectures with Powerpoints, only live, interactive coding examples.  In this course we'll build one massive web application that profiles the advanced features of React, Redux, Express, and Mongo.  By putting each concept into a real app, you'll get a better idea of when to use each unique and powerful feature.

Build a large feedback-collection app. This mega app will include the full gamut of features, including everything from authentication to email handling.  You'll learn how to build an app that can be used to send mass emails to a big list of users for the purpose of collecting feedback.  It's my goal to ensure you understand each feature we build into this app so you can apply them to your own personal or professional projects in the future.

------------------------------

Here's what we'll learn:

  • Learn the architectural considerations of building a full stack app
  • Connect a front-end Create-React-App server to a NodeJS and Express backend
  • Communicate data from your Mongo database to your React application
  • Understand how to route user requests on the front end with React Router and on the backend with Express
  • Build reusable user inputs with Redux Form, complete with navigation
  • Handle credit cards and receive payments from your users with Stripe
  • Engage your users with automated emails
  • Enhance authentication flows in your app with Google OAuth authentication
  • Separate production and development resources with advanced API key handling techniques
  • Educate your users on how to use your app with custom build landing pages

I've built the course that I would have wanted to take when I was learning to build fullstack apps. A course that explains the concepts and how they're implemented in the best order for you to learn and deeply understand them.

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Fullstack Development
Hiển thị tất cả khoá học Node Js
Hiển thị tất cả khoá học React
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊