inflearn logo

React + TypeScript in Practice - Learn TypeScript Through a TodoList Project

If you’ve learned React, it’s time to apply TypeScript to a real-world project. Build a TodoList app from scratch, applying types to components and state, and gain practical React + TypeScript development skills by implementing CRUD functionality, storing data in LocalStorage, and deploying the app.

(5.0) 1 reviews

18 learners

Level Basic

Course period Unlimited

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

What you will gain after the course

  • Setting Up a React + TypeScript Development Environment

  • UI Component Structure Design and State Management Basics

  • Implement add / complete / delete task functionality

  • Logic optimization using TypeScript

  • Designing a Code Structure That Supports Refactoring and Maintenance

"You’ll miss out if you don’t claim it now! Just subscribe to YouTube and pay half the course fee"

Subscribe & Like & Comment Event

Complete a simple mission and get a 50% discount coupon instantly. Don’t miss this incredible limited-time offer—claim it now!

Participate in the event: https://forms.gle/wcD2wRVeaG7B7fSj7

React + TypeScript—don’t just study the syntax; build something yourself!

A practical TypeScript project where you learn by building your own Todo app

Have you studied TypeScript but felt unsure about how to use it in an actual React project?

This course is a project-based course where you use React and TypeScript to build a fully functional **Todo List App** from scratch.

From project creation and type definitions to component composition, state management, feature implementation, and final deployment, you’ll follow along with a single project and experience how TypeScript is used in real-world development.

Rather than complex theory, this course focuses on hands-on practice through building things yourself.


🚀 First, try out the project you’ll complete!

After completing the entire course, you will build the following Todo app yourself.

Experience the Completed Todo App Yourself


Try it yourself to see what features you’ll be implementing.

  • Add a task: Enter a title and due date to add a new task.

  • Completion status management: Change whether a task is complete using a checkbox.

  • Edit to-dos: Modify the title and due date of a registered to-do.

  • Delete tasks: Remove unnecessary tasks from the list.

  • Data storage: Manage data using the browser's local storage.

You will experience the process of deploying a self-built web app to the internet using GitHub and Vercel.

🎯 Recommended for those who:


1. Those who want to transition from JavaScript to TypeScript

This is suitable for those who know the basics of JavaScript syntax but are unsure how to use TypeScript in a project.

2. Those who have studied React but lack real-world project experience

You can learn the development process by directly applying React’s component and state management concepts to a simple Todo app.

3. Those who are still unfamiliar with TypeScript type definitions

You can practice using interfaces, union types, optional properties, and more in actual project code.

4. Those who want to complete a small project from start to finish

Recommended for those who want to complete a project from UI implementation and data management to developing key features and deployment.

💡 What will you learn in this course?


STEP 01. Setting Up the React + TypeScript Development Environment

Create a React and TypeScript project and set up the development environment needed for the exercises.

  • Project Creation and Development Environment Setup

  • Understanding Common Type Definitions and Project Structure

  • How to use TypeScript in real-world projects

Comparison of vite, parcel, and rsbuild, app creation, and shared type configuration

STEP 02. React Components and State Management

Build the Todo app interface while using React components and TypeScript together.

  • Implement the to-do input form and list UI

  • Understanding Component Structure

  • Applying Types to Props and State

  • Set up the basic structure for managing to-do data

Configuring the input form and to-do list components, and specifying types for props and state

STEP 03. Implementing the Core Features of a Todo App with TypeScript

Learn how to define and use TypeScript types while implementing the features needed to manage tasks.

  • Add and display a to-do list

  • Toggle between completed and incomplete status

  • Edit and delete tasks

  • Using Interfaces and Utility Types

  • Data Management Using Local Storage

STEP 04. Deploying the Completed Web App

Review the implemented code and make the completed project available on the internet.

  • Full Code Review

  • Project Management Using GitHub

  • Deploying a Web App Using Vercel

Deployment using GitHub and Vercel

✅ After completing the course, you will be able to do the following.

  • You can set up a React + TypeScript development environment yourself.

  • You can define and use types according to the data structure.

  • You can implement components by applying types to Props and State.

  • You can implement features for adding, editing, deleting, and managing the completion status of tasks.

  • You can understand how to manage data using local storage.

  • You can deploy the completed project using GitHub and Vercel.

Based on what you’ve learned in this course, you can also take on other React mini-projects, such as a notepad or schedule manager.

Notes Before Taking the Course

Prerequisite Knowledge and Important Notes

  • This course is designed for beginners who are learning React and TypeScript for the first time.
    If you know the basic syntax of HTML, CSS, and JavaScript, you will be able to follow along 충분히, and
    having a basic understanding of React fundamentals (components, props, and useState) will make the course even easier to follow.
    Because the course is code-focused, it emphasizes a hands-on learning experience where you learn by building things yourself rather than focusing on theory.

  • As this is a code-focused course, we recommend following along and typing the code in an IDE (Visual Studio Code) environment.

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

Recommended for
these people

Who is this course right for?

  • Those who have learned TypeScript but have not had the opportunity to apply it to a real-world project

  • Those who have built a simple app with React but feel uneasy about code that lacks type safety

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

  • A frontend beginner who wants to build a solid foundation in component-based design and state management as required in practice

Need to know before starting?

  • html/css

  • javascript

  • typescript

Hello
This is ezweb

Career Verified

3,023

Learners

79

Reviews

4

Answers

4.9

Rating

16

Courses

I am a frontend instructor specializing in teaching everything from web publishing to practical JavaScript and React, as well as AI-assisted development.

I have taught non-majors, beginners, and job seekers at ESTSOFT KDT and Green Computer Academy, among others. I break down complex concepts into small hands-on exercises and focus on project-based classes in which learners complete the final product themselves.

Key Areas of Education

  • HTML/CSS Web Publishing

  • JavaScript Fundamentals and Web Interactions

  • React-based frontend development

  • Implementing web services using Firebase

  • Figma UI Design and Development Integration

  • Web Development with Generative AI

  • Web Design Technician Practical Exam

Corporate & Institutional Training

We provide training for corporate practitioners, KDT programs, and special lectures at universities and academies.

We structure the curriculum and hands-on projects according to the target audience’s prior knowledge, instructional hours, and desired outcomes. We offer in-person classes, live online instruction, and recorded educational content production.

Online Educational Content Production

We carry out the following online educational content production tasks.

  • Lecture curriculum and learning objective design

  • Creation of course materials and presentations

  • Organizing step-by-step practice code and example projects

  • Writing lecture scripts for filming

  • Lecture filming and content delivery

Key Activities

  • ESTSOFT KDT Front-End Course

  • Green Computer Academy Web Publishing and Front-End Course

  • Operates the web publishing YouTube channel ‘ezweb’

  • Authored books in web publishing and web design

Books Authored

We accept inquiries about delivering lectures at companies and institutions, as well as producing online educational content.

Inquiries: ezwebpub@gmail.com

More
Published: 
Last updated: 

Reviews

All

1 reviews

5.0

1 reviews

  • pan5158a1332님의 프로필 이미지
    pan5158a1332

    Reviews 4

    ∙

    Average Rating 5.0

    5

    64% enrolled

    ezweb's other courses

    Check out other courses by the instructor!

    Similar courses

    Explore other courses in the same field!

    Limited time deal

    $24,750.00

    25%

    $26.40