YoVDO

React & TypeScript - Course for Beginners

Offered By: freeCodeCamp

Tags

React Courses Web Development Courses Typescript Courses

Course Description

Overview

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.


Taught by

freeCodeCamp.org

Related Courses

Introduction to ReactJS
Microsoft via edX
Front-End Web Development with React
The Hong Kong University of Science and Technology via Coursera
Multiplatform Mobile App Development with React Native
The Hong Kong University of Science and Technology via Coursera
Client-based Web Applications development: ReactJS & Angular
Universidad Politécnica de Madrid via Miríadax
React
Udacity