강의

멘토링

로드맵

NEW
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 học viên đang tham gia khóa học này

  • ezweb
프론트엔드개발자#취업준비생
웹개발
typescript
react
HTML/CSS
JavaScript
React
TypeScript

Dịch cái này sang tiếng Việt

  • 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,554

Học viên

50

Đánh giá

3

Trả lời

4.9

Xếp hạng

10

Các khóa học

■ [현재] 그린컴퓨터아트학원 웹퍼블리싱, 프론트엔드 강의
■ [현재] 웹 퍼블리싱 유튜브 채널 'Rock's Easyweb' 운영
■ 더조은 컴퓨터아카데미 웹 퍼블리싱 강사
■ 한빛 컴퓨터아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의


[ 도서 ]
2021.07.19 출간 / 웹디자인 & 웹퍼블리싱을 위한 피그마 완벽 활용서 / 비제이퍼블릭

2022.08.25 출간  / 코딩을 처음이라 with 웹 퍼블리싱  / 영진출판사

2023.10 출간 /2024 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획

2024.11 재판 /2025 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획

 

[ 수상경력 ]
2022.08 그린컴퓨터 아트 학원 종로지점 - 우수강사 2021.06 그린컴퓨터 아트 학원 종로지점 - 우수강사 2018.06 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2017.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2016.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2015.10 그린 컴퓨터아카데미 신촌 지점 - 우수강사 

 

 

 

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á

Chưa có đủ đánh giá.
Hãy trở thành tác giả của một đánh giá giúp mọi người!

Ưu đãi có thời hạn

9.900 ₫

70%

716.101 ₫

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!