React & TypeScript - Course for Beginners

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Embark on a comprehensive course designed to teach you how to build React applications using TypeScript. Begin with the fundamentals of TypeScript before diving into its integration with React through an engaging project. Master the use of TypeScript with React Hooks like useState, useRef, and useReducers. Learn to effectively pass props between components by defining prop types, and explore advanced concepts such as drag-and-drop functionality. Through hands-on coding exercises, gain practical experience in creating a feature-rich todo application, covering everything from basic UI creation to implementing complex state management and user interactions. By the end of this 1-2 hour learning journey, you'll have a solid foundation in React and TypeScript development, equipped with the skills to build robust, type-safe applications.

Syllabus

) Intro.
) 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.