React & TypeScript – Course for Beginners

Ecommerce Empire Academy

Learn how to build React apps using TypeScript. First, learn the basics of TypeScript. Then, learn how to integrate TypeScript in a React app by building an awesome project. You will learn how to use TypeScript with React Hooks such as useState, useRef, and useReducers. You will also learn how to pass props from one component to another by defining prop types of the component. And you will learn much more!

✏️ Course created by Roadside Coder. Check out his channel:

💻 Code:

🔗 Live Site:

🔗 Typescript Docs:
🔗 useReducer Tutorial:

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:00:31) Typescript vs Javascript
⌨️ (0:00:57) Project Overview
⌨️ (0:02:27) Setup React Typescript Project
⌨️ (0:04:57) Basic Types in Typescript
⌨️ (0:07:30) Object Type
⌨️ (0:09:03) Optional Field in Objects
⌨️ (0:09:20) Array of Object Type
⌨️ (0:09:55) Union Type
⌨️ (0:10:25) Function Types
⌨️ (0:12:06) Any Type
⌨️ (0:12:35) unknown and never Type
⌨️ (0:12:52) Aliases ( type and interface )
⌨️ (0:14:36) Extending types
⌨️ (0:15:53) Extending interface
⌨️ (0:16:28) Extending Classes
⌨️ (0:16:45) Extending type with interface ( and vice versa )
⌨️ (0:17:22) React with Typescript
⌨️ (0:18:22) Functional Component type
⌨️ (0:19:19) Creating Input UI
⌨️ (0:26:22) useState Hook with Typescript
⌨️ (0:27:39) PropTypes – Passing props to component
⌨️ (0:30:34) Reusable todo interface
⌨️ (0:33:01) Passing function as props
⌨️ (0:34:14) Event Type in Typescript
⌨️ (0:35:20) Create Todo Logic
⌨️ (0:37:54) useRef Hook with Typescript
⌨️ (0:40:41) TodoList Component
⌨️ (0:45:27) Passing props to SingleTodo
⌨️ (0:47:14) SingleTodo Component
⌨️ (0:52:23) Todo Complete Functionality
⌨️ (0:54:56) Delete Todo Functionality
⌨️ (0:55:55) Edit Todo Functionality
⌨️ (1:02:05) Edit Bug Fix
⌨️ (1:03:23) useReducer Hook with Typescript
⌨️ (1:07:11) Homework for you
⌨️ (1:07:26) Building App UI for Drag and Drop
⌨️ (1:13:13) React Beautiful DnD Installation
⌨️ (1:14:00) completedTodos State
⌨️ (1:15:21) DragDropContext
⌨️ (1:16:42) Droppable Tag
⌨️ (1:20:46) Draggable Tag
⌨️ (1:23:21) onDragEnd Logic
⌨️ (1:30:05) Drag and Drop Styling
⌨️ (1:32:36) Outro

🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

36 thoughts on “React & TypeScript – Course for Beginners”

  1. Pablo The Pigeon

    No way! Just as i was starting to build a react project for my bootcamp and learning typescript on the side! heaven sent!

  2. OMG 😱 I’ve been wanting to learn more TS and how to merge it into a React app. I love TS ty

  3. Thanks for featuring my Content 🙏❤️.
    Love making content for this channel.. 🔥🔥
    Hope to bring more such tutorials in future.

    1. Thanks a lot for creating this tutorial I want to know that in which company are you currently working?

  4. fady gamil mahrous masoud

    hello, thank you for all of your efforts, I just want to ask if you can upload some content to design patterns (theoretically) ??

  5. Finished the react course and heard how good Typescript was so this is exactly what I was looking for.

  6. Awesome tutorial!
    one question : In edit todo function, in your ternary you put but where does it come from? thanks a lot

  7. It looks like you may have needed to use a `useContext` to pass the todos and setTodos to multiple children, or do you think it would be overkill? Also, i noticed that you have multiple Props definitions specified, why not using only 1 exported from a file? maybe on models.

  8. Yin Chu Rijnaard

    Great course!!! One issue: I personally cannot hover over my code to see the type like you did, I can’t seem to find how to enable it or how to make this work 🙁 anyone has an idea perhaps?

    1. Hi from Scrimba🙂, maybe if u can’t find settings, try to reinstall vscode

  9. This course is free and that’s cool but there are some issues. There is very little typescript in this course -it’s almost entirely React. Very little is actually explained , it’s very much a case of “just do it like this” without any explanation of why it’s being done that way. There is an infuriating part where the presenter asks the viewer ” why do we have type and interfaces when they aer very similar” and then goes on to continue explaining how similar they are without ever answering the question!
    There are also some bad practices in here – for example passing the entire todos array as a prop to each single Todo component. A single todo element does not need to know about the other todos. instead, the edit, delete, isDone functions should be declared in the TodoList component and passed to the todo components as props. At the end of the day it’s free and I’m grateful for that but the quality is not great.

    1. I don’t know why he passed the useState to every single component. It’s best so handle everything in a reducer in this case, or simply extract the state from the application.

    2. Arjoban Singh

      Yes, and even when we need previous state to make new changes, the best practice is to use functional approach in setState, basically passing callback whose return value would be new state to setState function. And that callback would have previousState as first prameter. So we don’t even need todos state, when we just want to change that. setTodos alone can handle that

    3. not to mention all the typos that are even left unfixed in the provided github repo

  10. Ani Kvikviniia

    Where can I compare the solution and the complete implementation for the useReducer function with Typescript in this project? This is challenging for a beginner (even having watched previous video with useReducer hook).

    1. i agree with u, and i wonder if it was implemented in the project i didnt see any usereducer at the end

  11. Awesome Tutorial on React with TypeScript 🔥
    Thanks a lot ❤️❤️❤️

  12. Dylan Dupasquier

    I’m only half way through this and I’ve already learned a TON. I’m very happy that I stumbled across this tutorial.

  13. Gustavo Prado

    Really nice project to introduce Typescript on React and Drag & Drop was an amazing bonus!! Thanks for sharing this content Piyush and FreeCodeCamp team!!!

  14. Syed Abdur Rehman Kazmi

    16:36 You said that we can give type to a class by using interface by the keyword “extends” but its actually “implements”

  15. If you’re having issues with useState executing twice instead of once (in the console), you need to remove the tags in your index.tsx file.

Comments are closed.