Typescript with modern React (i.e. hooks, context, suspense)

Adding typescript to a modern react project with hooks (useState, useContext, useEffect) and code splitting with lazy.

4.55 (1852 reviews)
Udemy
platform
English
language
Web Development
category
Typescript with modern React (i.e. hooks, context, suspense)
33,767
students
3.5 hours
content
Mar 2019
last update
$39.99
regular price

What you will learn

How to use Typescript with their modern React project

Understand how to set up typescript with create-react-app as well as babel and webpack

Feel comfortable using hooks for state and lifecycle

Why take this course?

In this course you will learn how to add typescript to a create-react-app project as well as adding it to a react project from scratch with webpack and babel. You will learn a bit about react hooks, (useState, useContext, useReducer and useEffect), in a react typescript project as well as using suspense to lazy load a component. We will also attempt to recreate redux, (or the redux principles) with useReducer and Context.

This course is at an intermediate/advance level and assumes you have used React and Redux before, however you don't need to know any typescript for this.

Content

Introduction

Introduction Video
Course Overview
Tools and plugins used (optional)

Getting set up with Typescript in React

What is typescript and why use it
Adding typescript to create-react-app
Adding typescript to react with babel and webpack
Adding typescript to react with babel and webpack part 2
Quick look into a type definition file (optional)

Project 1: Simple todo list

The useState hook and the type alias
The difference between and type and interface
Removing todos and finishing off our app
Cheeky plug

Project 2: Favourite Rick and Morty episode picker

A run-through of react context (optional)
Introduction to the Redux principles
The useReducer hook (optional)
Creating our reducer
Before the next video
Creating an action
Showing our store data
Adding a favourites button
Removing favourites
Lazy loading our episodes
Routing with Reach Router
Creating a file for our actions
Final bits of polish

Final words

Thanks and good luck

Screenshots

Typescript with modern React (i.e. hooks, context, suspense) - Screenshot_01Typescript with modern React (i.e. hooks, context, suspense) - Screenshot_02Typescript with modern React (i.e. hooks, context, suspense) - Screenshot_03Typescript with modern React (i.e. hooks, context, suspense) - Screenshot_04

Our review

--- ### Overview of the Course Rating and Reception The global course rating stands at an impressive **4.55 out of 5 stars**, based on recent reviews from students who have completed the course. The majority of the feedback is positive, highlighting the course's effectiveness in teaching React with TypeScript, and its value as a free resource. --- ### Pros - **Highly Recommended for Beginners**: Many students found the course **amazing** for getting started with React, TypeScript, and even built a Ricky and Morty app, which they enjoyed. - **Solid Content**: The content was solid and provided a good introduction to Typescript within React, according to several reviews. - **Free Resource**: The fact that the course is offered **for free** was a significant plus point and was greatly appreciated by the students. - **Real-world Application**: Students appreciated the practical applications of TypeScript in real-world scenarios, as well as learning about useContext hooks and Redux. - **Encouragement to Practice**: The instructor encouraged students to pause and try solving problems themselves before viewing the solution, which many found beneficial. - **Diverse Learning Opportunities**: The course covered a range of topics from modern React concepts to advanced state management with Redux using useReducer hook, satisfying learners at different levels of expertise. - **Community Engagement**: Some students reported being inspired to subscribe to the instructor's YouTube channel and engage with the community, indicating a positive learning experience. ### Cons - **Clarity Concerns**: A few reviews mentioned that the **explanations were not always crystal clear**, and sometimes the code was not according to best practices (e.g., lack of ES6 syntax usage). - **Structural Issues**: There were concerns about the course's structure, with some suggesting that topics like Redux should be explained more thoroughly from the beginning rather than assuming prior knowledge. - **Sound Quality and Fluency**: Some students experienced **sound quality issues** and suggested that the instructor could be more energetic or fluent to enhance understanding. - **Pacing Issues**: A couple of reviews mentioned that the course moved too quickly, which could make it difficult for beginners to keep up. - **Outdated Content**: A few students encountered **outdated content** and code issues, which they had to resolve independently to complete the course. - **Attention to Detail**: There were reports of spelling mistakes, types errors, and instances where the instructor used `any` instead of properly typing out variables in examples. - **Lack of Advanced Topics**: Some reviews indicated that while the course was good for novice coders, it lacked more advanced explanations, particularly regarding Lazy and Suspense, as well as standard React routing. ### Additional Notes - It is recommended that the instructor reviews the course content to correct errors and potentially re-record some videos for clarity. - The course could benefit from updates to ensure the content remains relevant and functional. - While the course is appreciated for being free, there is a suggestion to improve the quality of explanations to match the high value offered by the course content. ### Final Verdict Overall, this **free course** is a valuable resource for learners who want to understand how TypeScript complements modern React development. With a few improvements in clarity and structural guidance, it has the potential to be even more effective for a wide range of skill levels. Students are encouraged to review the course content critically and update or supplement as necessary to ensure the best learning experience.

Charts

Price

Typescript with modern React (i.e. hooks, context, suspense) - Price chart

Rating

Typescript with modern React (i.e. hooks, context, suspense) - Ratings chart

Enrollment distribution

Typescript with modern React (i.e. hooks, context, suspense) - Distribution chart
2211838
udemy ID
2/11/2019
course created date
6/15/2019
course indexed date
Bot
course submited by