React is one of the most popular front-end JavaScript libraries for building user interfaces. Using TypeScript for your React projects can lead to a more robust codebase with less errors.
We just published a full course on the freeCodeCamp.org YouTube channel that will teach you how to use React with TypeScript.
Roadside Coder developed this course. He is a popular instructor who has created programming courses on a variety of frameworks and topics.
In this course you will first learn the basics of TypeScript. Then you will 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 learn how to pass props from one component to another by defining the prop types of the component. And you will learn much more!
Here are the topics covered in this course:
- Typescript vs Javascript
- Project Overview
- Setup React Typescript Project
- Basic Types in Typescript
- Object Type
- Optional Field in Objects
- Array of Object Type
- Union Type
- Function Types
- Any Type
- unknown and never Type
- Aliases ( type and interface )
- Extending types
- Extending interface
- Extending Classes
- Extending type with interface ( and vice versa )
- React with Typescript
- Functional Component type
- Creating Input UI
- useState Hook with Typescript
- PropTypes - Passing props to component
- Reusable todo interface
- Passing function as props
- Event Type in Typescript
- Create Todo Logic
- useRef Hook with Typescript
- TodoList Component
- Passing props to SingleTodo
- SingleTodo Component
- Todo Complete Functionality
- Delete Todo Functionality
- Edit Todo Functionality
- Edit Bug Fix
- useReducer Hook with Typescript
- Homework for you
- Building App UI for Drag and Drop
- React Beautiful DnD Installation
- completedTodos State
- DragDropContext
- Droppable Tag
- Draggable Tag
- onDragEnd Logic
- Drag and Drop Styling
- Outro
Watch the full course below or on the freeCodeCamp.org YouTube channel (1.5 hour watch).