강의

멘토링

커뮤니티

Programming

/

Web Development

React + TypeScript TodoList App - Dự án TypeScript thực tế cho người mới bắt đầu

Đây là khóa học tập trung vào dự án, sử dụng React + TypeScript để tạo ra "Ứng dụng quản lý công việc (ToDo List)" với cảm giác thực tế trong công việc. Không chỉ dừng lại ở việc học cú pháp, mà còn hoàn thành dưới dạng dịch vụ thực tế từ thiết kế cấu trúc component → quản lý state → áp dụng type → triển khai tính năng → kết nối local storage → deploy, giúp bạn có thể rèn luyện cảm giác ứng dụng TypeScript.

(5.0) 1 đánh giá

14 học viên

Độ khó Cơ bản

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

  • ezweb
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 quản lý trạng thái

  • Triển khai chức năng thêm / hoàn thành / xóa công việc

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

  • Thiết kế cấu trúc code mạnh mẽ cho refactoring và bảo trì

🧩 React + TypeScript TodoList App - Dự án nhập môn TypeScript

  • Khóa học tập trung vào dự án tự tay xây dựng "ứng dụng quản lý công việc (ToDo List)" sử dụng React + TypeScript

  • Thiết kế cấu trúc component → Quản lý state → Áp dụng type → Triển khai tính năng → Tích hợp local storage → Triển khai

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


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

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

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

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

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

  • Nhấp vào nút xóa để xóa công việc cần làm.


In danh sách công việc cần làm


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

Chúng tôi khuyên dùng cho những người như thế này

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

Những người đã tạo ứng dụng đơn giản bằng React nhưng cảm thấy lo lắng về code không có tính an toàn về kiểu dữ liệu

Những người muốn hoàn thành dự án mini React + TypeScript cho portfolio

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

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

  • Nắm bắt cảm giác đảm bảo đồng thời tính an toàn kiểu và năng suất của code.

  • Hiểu rõ phân tách component và luồng trạng thái - những kiến thức cơ bản trong thiết kế ứng dụng thực tế.

  • Ứng dụng TodoList hoàn thành có thể được sử dụng ngay trong portfolio của bạn.

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

Thiết lập 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 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 thành component form nhập liệu, danh sách công việc, chỉ định kiểu 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 thành component form nhập liệu, danh sách công việc, chỉ định kiểu props và state

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

Giao diện, kiểu union, thuộc tính tùy chọn và các ứng dụng kiểu thực tế khác

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 sử dụng github và vercel

Những lưu ý trước khi học

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

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

  • Đây là khóa học tập trung vào code nên khuyến khích các bạn cùng thực hành trên môi trường IDE(Visual Studio Code).

  • Tất cả tài liệu của khóa học này bao gồm video, ví dụ code, hình ảnh, giáo án đều thuộc bản quyền của ezweb.
    Tuy nhiên, học viên có thể tự do sử dụng code ví dụ cho mục đích học tập cá nhân và portfolio.
    Tất cả các ví dụ được đề cập trong khóa học là code thực hành phục vụ mục đích giáo dục, cần có sự cho phép riêng khi 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 áp dụng vào dự án thực tế

  • Những người đã tạo ứng dụng đơn giản bằng React nhưng cảm thấy bất an với code thiếu tính ổn định về kiểu dữ liệu

  • Những người muốn hoàn thành dự án mini React + TypeScript cho portfolio

  • Người mới bắt đầu frontend muốn củng cố nền tảng cơ bản về thiết kế dựa trên component và quản lý state được yêu cầu trong thực tế

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

  • html/css

  • javascript

  • TypeScript

Xin chào
Đây là

2,706

Học viên

58

Đánh giá

4

Trả lời

4.9

Xếp hạng

11

Các khóa học

■ [Hiện tại] Giảng viên Web Publishing, Front-end tại Học viện Nghệ thuật Máy tính Green
■ [Hiện tại] 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
■ Front-end Publisher, Giảng viên chuyên nghiệp về Front-end Publishing
■ Giảng viên hướng dẫn 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 /2024 Sổ tay gia sư thực hành Kỹ thuật viên Thiết kế Web SD Edu Yu-seon-bae / Sidae Gosi Planning

Tái bản 11.2024 /2025 Sách hướng dẫn thực hành Thiết kế đồ họa Web SD Edu / 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 chi nhánh Sinchon - Giảng viên xuất sắc 05.2017 Học viện Green Computer chi nhánh Sinchon - Giảng viên xuất sắc 05.2016 Học viện Green Computer chi nhánh Sinchon - Giảng viên xuất sắc 10.2015 Học viện Green Computer chi nhánh Sinchon - Giảng viên xuất sắc

 

 

 

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á 3

    Đánh giá trung bình 5.0

    5

    64% đã tham gia

    704.667 ₫

    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!