Chia Sẻ Khóa Học Xây Dựng Một Notion Clone Với React & TypeScript [Update Tháng 11/2025] [Khóa 5625 A]
Nâng cao kỹ năng kỹ thuật React và TypeScript của bạn và xây dựng một ứng dụng xứng đáng với portfolio để demo cho nhà tuyển dụng thấy khả năng tạo ra các ứng dụng phức tạp, full-stack. Ngoài ra, bạn sẽ học cách sử dụng Vite để xây dựng hệ thống project hiệu quả và Supabase cho database management & authentication.
Những gì bạn sẽ học được:
- ✓ Tìm hiểu cách tạo một ứng dụng React với TypeScript.
- ✓ Hiểu được lợi ích của các ứng dụng React TypeScript.
- ✓ Xây dựng một portfolio project toàn diện, nổi bật sẽ gây ấn tượng với các nhà tuyển dụng.
- ✓ Cách test các ứng dụng React TypeScript.
- ✓ Các kỹ thuật UI nâng cao, chẳng hạn như drag and drop, để tạo các giao diện hấp dẫn.
- ✓ Các kỹ năng type-safe programming cho code đáng tin cậy và dễ bảo trì hơn.
Tại sao Project React TypeScript này lại tuyệt vời?
Bởi vì đây là cơ hội hoàn hảo để học cách sử dụng React với TypeScript trong khi xây dựng một portfolio project!
Đây là sân chơi để bạn khám phá, học hỏi và tạo ra những điều thực sự ấn tượng. Bạn không chỉ được nâng cao kỹ năng chuyên môn mà còn được tạo ra một ứng dụng xứng tầm portfolio, thể hiện rõ ràng rằng: "Tôi có thể xây dựng các ứng dụng phức tạp, full-stack, không chút khó khăn!"
Sau đây là những gì bạn sẽ học được trong Project React TypeScript này:
1. Đầu tiên, chúng ta có React.js. Nó là cốt lõi của phát triển web ngày nay. Chúng tôi sẽ giúp bạn nhanh chóng nắm bắt cách tạo các component, làm quen với các DOM node, xử lý events một pro và quản lý state cả cục bộ lẫn toàn cục. Tất cả đều hướng đến việc làm cho ứng dụng của bạn phản hồi và tương tác, đảm bảo người dùng có trải nghiệm mượt mà. Đừng quên React Router DOM để điều hướng thông qua ứng dụng của bạn. Chúng tôi sẽ giải quyết vấn đề triển khai các private route, đảm bảo một số phần nhất định của ứng dụng chỉ có thể truy cập được bởi người dùng đã xác thực. Đây là kiến thức bắt buộc đối với bất kỳ web developer nào.
2. Tiếp theo là DNDKit. Ai mà chẳng thích kéo thả chứ? Chúng tôi sẽ hướng dẫn bạn cách làm cho các element trên trang web của bạn có thể di chuyển chỉ bằng một cú kéo chuột. Bạn sẽ học cách thiết lập các drag target tùy chỉnh và sắp xếp lại các element một cách liền mạch. Đây là một kỹ năng sẽ giúp các project của bạn thêm phần tinh tế.
3. Tất nhiên, chúng ta không thể quên TypeScript. Nó giúp code của bạn trở nên "bá đạo", phát hiện lỗi sớm và giúp quy trình phát triển của bạn mượt mà hơn. Chúng ta sẽ tìm hiểu cách sử dụng TypeScript với React, định nghĩa các kiểu dữ liệu mới và tận dụng các kiểu dữ liệu từ các thư viện để làm cho code của bạn gọn gàng và đáng tin cậy hơn.
4. Vite là tấm vé thông hành nhanh chóng giúp bạn khởi động dự án nhanh chóng. Đây là một build tool tập trung vào tốc độ, cho phép bạn khởi động, xây dựng và vận hành các project nhanh hơn bao giờ hết. Bạn sẽ yêu thích hiệu quả mà nó mang lại cho quy trình làm việc của mình.
5. Supabase là nơi lưu trữ dữ liệu ứng dụng của bạn. Từ việc quản lý database của bạn đến lưu trữ hình ảnh và xử lý xác thực người dùng, Supabase sẽ hỗ trợ bạn. Đây là một công cụ mạnh mẽ giúp đơn giản hóa công việc backend, cho phép bạn tập trung hơn vào việc tạo ra những trải nghiệm người dùng tuyệt vời.
6. Cuối cùng, CSS Modules sẽ là lựa chọn hoàn hảo cho bạn về mặt styling. Hãy tạm biệt những xung đột style và chào đón CSS dạng module, có thể tái sử dụng, giúp ứng dụng của bạn trông thật ấn tượng.
Nếu bạn đã sẵn sàng để hiện thực hóa ý tưởng project React fullstack tuyệt vời (và bổ ích) này, hãy bắt đầu thôi!
Đợi đã... Project là gì?
Một trong những câu hỏi phổ biến nhất mà chúng tôi nghe từ học viên là: "Em muốn xây dựng nhiều project hơn!"
Chúng tôi rất vui khi nghe điều đó, bởi vì xây dựng các project thực sự là cách học tốt nhất. Và những project độc đáo, đầy thử thách thực sự có thể giúp portfolio của bạn nổi bật trước các nhà tuyển dụng tiềm năng.
Nhưng cũng vì vậy...bạn sẽ cảm thấy rất tuyệt khi thực sự xây dựng được thứ gì đó thực sự!
Chương trình học:
- ✓ 01. Giới thiệu.
- ✓ 02. Giới thiệu về React TypeScript!
- ✓ 03. Tạo các ứng dụng React TypeScript.
- ✓ 04. Notion Clone: Tạo Project.
- ✓ 05. Giới thiệu về TypeScript.
- ✓ 06. Sử dụng React với TypeScript.
- ✓ 07. Notion Clone: Triển khai cơ bản.
- ✓ 08. Notion Clone: Move State Management sang Context.
- ✓ 09. Notion Clone: Add nhiều loại Node.
- ✓ 10. Notion Clone: Kéo các Node.
- ✓ 11. React TypeScript Cookbook.
- ✓ 12. Notion Clone: Triển khai Authentication.
- ✓ 13. Notion Clone: Save Data ở Backend.
- ✓ 14. Testing các ứng dụng React TypeScript.
- ✓ 15. Di chuyển các ứng dụng React hiện có sang TypeScript.
- ✓ 16. Làm gì tiếp theo đây?