inflearn logo

Ứng dụng TodoList với React + TypeScript - Nhập môn dự án TypeScript thực tế

Đây là khóa học tập trung vào dự án, nơi bạn sẽ trực tiếp xây dựng "Ứng dụng quản lý công việc (ToDo List)" bằng React + TypeScript với tư duy thực tế. Không chỉ dừng lại ở việc học cú pháp đơn thuần, bạn sẽ được rèn luyện kỹ năng sử dụng TypeScript thông qua việc hoàn thiện một dịch vụ thực tế theo quy trình: Thiết kế cấu trúc component → Quản lý trạng thái → Áp dụng Type → Triển khai tính năng → Liên kết Local Storage → Triển khai (Deploy).

(5.0) 1 đánh giá

14 học viên

Độ khó Cơ bản

Thời gian Không giới hạn

HTML/CSS
HTML/CSS
JavaScript
JavaScript
React
React
TypeScript
TypeScript
HTML/CSS
HTML/CSS
JavaScript
JavaScript
React
React
TypeScript
TypeScript

Bạn sẽ nhận được điều này sau khi học.

  • Thiết lập môi trường phát triển React + TypeScript

  • Thiết kế cấu trúc thành phần UI và cơ bản về quản lý trạng thái

  • Thực hiện tính năng thêm / hoàn thành / xóa công việc cần làm

  • Tối ưu hóa logic sử dụng TypeScript

  • Thiết kế cấu trúc mã nguồn mạnh mẽ cho việc tái cấu trúc và bảo trì

"Không nhận bây giờ là lỗ! Chỉ cần đăng ký kênh YouTube, học phí sẽ giảm một nửa"

Sự kiện Đăng ký & Thích & Bình luận

Hoàn thành nhiệm vụ đơn giản và nhận ngay mã giảm giá 50%. Đừng bỏ lỡ ưu đãi lớn nhất từ trước đến nay chỉ có trong thời gian có hạn!

Tham gia sự kiện tại: https://forms.gle/wcD2wRVeaG7B7fSj7

🧩 React + TypeScript TodoList App - Nhập môn dự án TypeScript

  • React + TypeScript là một khóa học tập trung vào dự án để trực tiếp tạo ra "Ứng dụng quản lý công việc (ToDo List)"React + TypeScript

  • Thiết kế cấu trúc component → Quản lý trạng thái → Áp dụng Type → Triển khai tính năng → Liên kết Local Storage → Triển khai (Deploy)

  • Áp dụng trực tiếp các cú pháp cơ bản vào việc phát triển ứng dụng và được cấu trúc để bạn có thể tiếp thu TS một cách tự nhiên trong môi trường thực tế của React.


Hãy trực tiếp kiểm tra bản hoàn thiện đã được triển khai cuối cùng.

https://web-todo-ts.vercel.app/

  • Nhập tiêu đề công việc, chọn ngày hết hạn hoàn thành và nhấp vào nút thêm.

  • Hãy thử nhấp vào tiêu đề công việc để chuyển sang trạng thái hoàn thành.

  • Hãy nhấp vào nút chỉnh sửa và thử sửa tiêu đề công việc.

  • Hãy thử xóa công việc bằng cách nhấp vào nút xóa.


Hiển thị danh sách việc cần làm


Chỉnh sửa công việc cần làm

Dành cho những người như thế này

Những người đã học TypeScript nhưng chưa có cơ hội áp dụng vào dự án thực tế

Những người đã từng làm các ứng dụng đơn giản bằng React nhưng cảm thấy bất an với mã nguồn thiếu tính an toàn về kiểu dữ liệu (type safety)

Những người muốn hoàn thành mini project React + TypeScript để làm portfolio

Sau khi hoàn thành khóa học

  • Học cách áp dụng TypeScript vào dự án React một cách tự nhiên.

  • Bạn sẽ lĩnh hội được cảm giác vừa đảm bảo tính an toàn của kiểu dữ liệu, vừa nâng cao năng suất cho mã nguồn.

  • Hiểu rõ về việc tách biệt component và luồng trạng thái, vốn là nền tảng của thiết kế ứng dụng trong thực tế.

  • Bạn có thể sử dụng ngay ứng dụng TodoList đã hoàn thiện vào hồ sơ năng lực (portfolio) của mình.

Bạn sẽ học được những nội dung này

Cấu hình môi trường phát triển React + TypeScript

So sánh vite, parcel, rsbuild và tạo ứng dụng, thiết lập kiểu dữ liệu chung

Thiết kế cấu trúc thành phần UI và cơ bản về quản lý trạng thái

Cấu trúc form nhập liệu, danh sách công việc, chỉ định kiểu dữ liệu cho props và state

Thiết kế cấu trúc thành phần UI và cơ bản về quản lý trạng thái

Cấu trúc form nhập liệu, component danh sách việc cần làm, chỉ định kiểu dữ liệu cho props và state

Tối ưu hóa logic sử dụng TypeScript

Sử dụng các kiểu dữ liệu thực tế như Interface, Union Type, Optional Property, v.v.

Triển khai ứng dụng web

Triển khai dự án đã hoàn thành bằng cách sử dụng dịch vụ GitHub và Vercel.

Triển khai dự án sử dụng github và vercel

Lưu ý trước khi khóa học bắt đầu

Kiến thức tiên quyết và lưu ý

  • Khóa học này là lộ trình mà ngay cả những người mới bắt đầu học React và TypeScript cũng có thể tham gia.
    Nếu bạn đã nắm vững cú pháp cơ bản của HTML, CSS và JavaScript thì hoàn toàn có thể theo kịp,
    và sẽ thuận lợi hơn nữa nếu bạn có hiểu biết cơ bản về React (component, props, useState).
    Vì khóa học tập trung vào viết mã nên chúng tôi hướng tới phương pháp học thực hành, vừa làm vừa làm quen thay vì chỉ học lý thuyết.

  • Vì đây là bài giảng tập trung vào mã nguồn, tôi khuyến khích bạn nên cùng thực hành gõ mã trong môi trường IDE (Visual Studio Code).

  • Tất cả các tài liệu như video, ví dụ mã nguồn, hình ảnh, giáo án của bài giảng này đều thuộc bản quyền của ezweb.
    Tuy nhiên, học viên có thể tự do sử dụng mã nguồn ví dụ cho mục đích học tập cá nhân và xây dựng hồ sơ năng lực (portfolio).
    Tất cả các ví dụ trong bài giảng đều là mã nguồn thực hành cho mục đích giáo dục, do đó cần có sự cho phép riêng nếu sử dụng cho mục đích thương mại.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Những người đã học TypeScript nhưng chưa có cơ hội áp dụng vào dự án thực tế

  • Những người đã thử tạo các ứng dụng đơn giản bằng React nhưng cảm thấy bất an với mã nguồn thiếu tính an toàn về kiểu dữ liệu (type safety)

  • Những ai muốn hoàn thành dự án nhỏ bằng React + TypeScript để đưa vào hồ sơ năng lực (portfolio)

  • Người mới bắt đầu học front-end muốn củng cố kiến thức cơ bản về quản lý trạng thái và thiết kế dựa trên component theo yêu cầu thực tế.

Cần biết trước khi bắt đầu?

  • html/css

  • javascript

  • TypeScript

Xin chào
Đây là ezweb

2,802

Học viên

63

Đánh giá

4

Trả lời

4.9

Xếp hạng

14

Các khóa học

■ [Hiện tại] Giảng viên Front-end tại ESTSOFT KDT
■ Giảng dạy Web Publishing, Front-end tại Học viện Nghệ thuật Máy tính Green
■ Vận hành kênh YouTube về Web Publishing 'Rock's Easyweb'
■ Giảng viên Web Publishing tại Học viện Máy tính The Joeun
■ Giảng viên Web Publishing tại Học viện Máy tính Hanbit
■ Chuyên gia Front-end Publisher, Giảng viên chuyên nghiệp về Front-end Publishing
■ Giảng dạy Portfolio Thiết kế Web UI/UX


[ Sách ]
Xuất bản 19.07.2021 / Sách hướng dẫn sử dụng Figma hoàn hảo cho Thiết kế Web & Web Publishing / BJ Public

Xuất bản ngày 25.08.2022 / Lần đầu học Coding với Web Publishing / Nhà xuất bản Youngjin

Xuất bản 10.2023 /Sổ tay gia sư thực hành Kỹ thuật viên Thiết kế Web 2024 SD Edu Yu-seon-bae / Sidae Gosi Planning

Tái bản 11/2024 /Sổ tay hướng dẫn thực hành Kỹ thuật viên Thiết kế Web 2025 SD Edu của Tiền bối Yoo / Sidae Gosi Planning

Tái bản 11.2025 /2026 Sổ tay gia sư thực hành Kỹ thuật viên Thiết kế Web SD Edu của Tiền bối Yoo / Sidae Gosi Planning

 

[ Giải thưởng ]
08.2022 Học viện Green Computer Art chi nhánh Jongno - Giảng viên xuất sắc 06.2021 Học viện Green Computer Art chi nhánh Jongno - Giảng viên xuất sắc 06.2018 Học viện Green Computer Art chi nhánh Sinchon - Giảng viên xuất sắc 05.2017 Học viện Green Computer Art chi nhánh Sinchon - Giảng viên xuất sắc 05.2016 Học viện Green Computer Art chi nhánh Sinchon - Giảng viên xuất sắc 10.2015 Học viện Green Computer Art chi nhánh Sinchon - Giảng viên xuất sắc

 

 

 

Thêm

Chương trình giảng dạy

Tất cả

14 bài giảng ∙ (3giờ 23phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

1 đánh giá

5.0

1 đánh giá

  • pan5158a1332님의 프로필 이미지
    pan5158a1332

    Đánh giá 4

    Đánh giá trung bình 5.0

    5

    64% đã tham gia

    Khóa học khác của ezweb

    Hãy khám phá các khóa học khác của giảng viên!

    Khóa học tương tự

    Khám phá các khóa học khác trong cùng lĩnh vực!

    715.544 ₫