강의

멘토링

로드맵

NEW
Programming

/

Web Development

React + TypeScript TodoList App - Practical TypeScript Project Introduction

This is a project-centered course that builds a "To-Do List Management App" with practical skills using React + TypeScript. Rather than just learning syntax, you can develop a sense for TypeScript application by completing it as an actual service through component structure design → state management → type application → feature implementation → local storage integration → deployment.

4 learners are taking this course

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

What you will learn!

  • React + TypeScript Development Environment Setup

  • UI Component Structure Design and State Management Fundamentals

  • Add / Complete / Delete task functionality implementation

  • TypeScript Logic Optimization Techniques

  • Designing Code Structure for Strong Refactoring and Maintainability

🧩 React + TypeScript TodoList App - Introduction to TypeScript Projects

  • React + TypeScript project-based course where you'll build a "To-Do List app" from scratch using hands-on projects

  • Component structure design → State management → Type application → Feature implementation → Local storage integration → Deployment

  • Apply basic grammar directly to app development and naturally master TS in a real React work environment.


Please check the final deployed completed version directly.

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

  • Enter the title of the task and select the due date for when it should be completed, then click the add button.

  • Click on the task title to mark it as complete.

  • Click the edit button and try modifying the task title.

  • Click the delete button to delete the task.


Print to-do list


Edit To-Do

I recommend this for people like this

Someone who has learned TypeScript but hasn't applied it to actual projects yet

Someone who has built a simple app with React but feels uneasy about code without type safety

Those who want to complete a React + TypeScript mini project for their portfolio

After taking the course

  • Learn how to naturally apply TypeScript to React projects.

  • You will develop a sense of ensuring both type safety and productivity in code simultaneously.

  • You will clearly understand component separation and state flow, which are the fundamentals of practical app design.

  • You can immediately use the completed TodoList App in your portfolio.

You'll learn this kind of content

React + TypeScript Development Environment Setup

vite, parcel, rsbuild comparison and app creation, common type configuration

UI Component Structure Design and State Management Fundamentals

Input form, to-do list component composition, props and state type specification

UI Component Structure Design and State Management Fundamentals

Input form, to-do list component configuration, props and state type specification

TypeScript Logic Optimization Utilization

Interface, union types, optional properties, and other practical type applications

Web App Deployment

Deploy the completed project using GitHub and Vercel services.

Deployment using GitHub and Vercel

Pre-enrollment Reference Information

Prerequisites and Important Notes

  • This course is a program that even beginners learning React and TypeScript for the first time can take.
    If you know the basic syntax of HTML, CSS, and JavaScript, you can follow along sufficiently,
    and if you have a simple understanding of React's basic syntax (components, props, useState), you can proceed even more smoothly.
    Since it proceeds with a code-focused approach, it aims for hands-on practice classes where you learn by building directly rather than theory.

  • Since this is a code-focused lecture, we recommend following along by typing together in an IDE (Visual Studio Code) environment.

  • All materials in this course, including videos, code examples, images, and lecture notes, are copyrighted by ezweb.
    However, students may freely use the example code for personal learning and portfolio purposes.
    All examples covered in the course are educational practice code, and separate permission is required for commercial use.

Recommended for
these people

Who is this course right for?

  • Someone who has learned TypeScript but hasn't applied it to actual projects yet

  • Someone who has built a simple app with React but feels uneasy about code lacking type safety

  • Those who want to complete a React + TypeScript mini project for their portfolio

  • Frontend beginners who want to build a solid foundation in component-based design and state management required in real-world practice

Need to know before starting?

  • html/css

  • javascript

  • TypeScript

Hello
This is

2,553

Learners

50

Reviews

3

Answers

4.9

Rating

10

Courses

■ [현재] 그린컴퓨터아트학원 웹퍼블리싱, 프론트엔드 강의
■ [현재] 웹 퍼블리싱 유튜브 채널 '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 그린 컴퓨터아카데미 신촌 지점 - 우수강사 

 

 

 

Curriculum

All

14 lectures ∙ (3hr 23min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

Limited time deal

$9,900.00

70%

$26.40

ezweb's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!