React with TypeScript

5
4 reviews

last updated 4 months ago

This course is up to date, guaranteed

So you want to learn React with TypeScript?

Here are some common approaches

Random Blogs

It's not that blog posts are bad, it's that finding and piecing together unrelated yet up to date posts that form a linear, cohesive path to learning complex technical topics is hard.

Conferences

Things conferences are great for - networking, travelling on your company's dime, free swag, finding other companies to join. Things conferences are not great for - learning in depth technical topics that you will remember and put into practice literally 3 days later when you’re back at the office, quality wifi.

Youtube Videos

It's happened to all of us, one moment you're using Youtube to learn about React's useEffect Hook and the next you're watching a "KIDS REACT TO PAYPHONES" video. Finding a high-quality, up-to-date YouTube video that effectively answers all of your questions on a JavaScript topic might actually be more difficult than finding a needle in a haystack. With so many videos and zero quality control, it’s easy to get sucked down the YouTube rabbit hole for hours without getting much learning out of it.

All-In-One Subscriptions

These are the larger companies that offer courses on seemingly every technology under the sun. We won’t name them, but chances are your company has a business subscription to at least one of them and chances are that you don’t use it much. Their courses are made by a wide assortment of third-party contractors and optimized for production quality, not educational value.

Live Workshops

You know what they say, the best learning happens sitting in a classroom for 8 hours at a time listening to dry lectures and working through practice problems that only serve to make you feel comfortable so you’ll feel like you learned something. Oh wait, no. No one says that.

The better approach?

All our courses follow the same proven structure, optimized for knowledge, not the illusion of learning.

Effort

We're obsessed with making the most effective developer education content on the planet. On average, it takes us around 1,900 hours to create a new course. While others prioritize quantity, we optimize for quality.

Non-Contextual Practice

Similar to the non-contextual analysis, context is everything. The first time you're hands-on with a new topic, any extra contextual information you have to process only serves as a distraction. This is why we first have you work through small, focused practice problems before you ever see the new topic in the context of a larger project.

Non-Contextual Analysis

The first time you're introduced to a topic, any extra contextual information you have to process only serves as a distraction. Although it takes more time, our non-contextual analysis comes in two forms, video and text. This way, no matter how you prefer to learn, there's an option for you.

Contextual Practice

You've probably experienced it before, you feel like you're learning so much going through a tutorial only to hit a wall once it's time to actually apply that knowledge outside of the context of the tutorial. All the non-contextual practice in the world is useless if you're not then able to take that knoweldge and apply it towards a (contextual) production level codebase.

Quiz

Nothing fancy here. After learning about the topic you'll receive a quiz to make sure you have a solid conceptual understanding before moving on to the hands-on practice.

The result?

React with TypeScript Mastery

The ability to take what you learn and apply it towards a production codebase

This Course

  • 13 Topics
  • 120 Minutes of Video
  • 10,775 Words of Text
  • 11 Quizzes
  • 3 Exercises
  • 2 Projects

Outline

  • Introduction

    • Introduction, Philosophy, and Tips
    • Projects (What you'll build)

    We'll start the course off with some housekeeping items. You'll learn about the best strategy for getting the most out of the course as well as what you'll build during the course.

  • Built-In React Types

    • Component and Element Types
    • (Quiz) Component and Element Types
    • (Bonus) Intrinsic Elements

    React's type definitions come with some types that we can use in our code to help us model some of the ways that React components and elements interact.

  • Context

    • Context
    • (Quiz) Context

    Context lets you pass values deep into your app, and TypeScript makes it so the types come with them! In this section, we'll learn how to add those types to our context creator, and how to use context in the most helpful way.

  • Configuring TypeScript for React

    • Configuring TypeScript for React
    • (Quiz) Configuring TypeScript for React

    It doesn't take much to set up TypeScript to work with React. By the end of this section, you'll know everything you need to get started.

  • Hooks

    • useState & useReducer
    • (Quiz) useState & useReducer
    • (Practice) useReducer
    • (Solution) useReducer
    • useEffect, useMemo, useCallback
    • (Quiz) useEffect, useMemo, useCallback

    TypeScript makes it so we always use our React Hooks correctly, so we don't have any surprises. We'll dive into the most common hooks.

  • Refs

    • Refs
    • (Quiz) Refs

    Refs are used to store bits of data, including references to DOM elements. TypeScript helps us use these refs in a type safe way.

  • Annotating Components

    • Class Components
    • (Quiz) Class Components
    • (Practice) Annotating Components
    • (Solution) Annotating Components
    • Function Components
    • (Quiz) Function Components

    Components are the heart and soul of React, so we'll learn how to add annotations to props and state for class components and function components.

  • Typing Props

    • Common Props Patterns
    • (Quiz) Common Props Patterns
    • Event Handlers
    • (Quiz) Event Handlers
    • Advanced Props Patterns
    • (Quiz) Advanced Props Patterns
    • (Bonus) PropTypes
    • (Practice) Props
    • (Solution) Props

    Props are one of the most important parts of using React, and annotating them is as easy as adding types to a function. During this section, we'll learn how to model some of the tricker, more advanced props patterns you might find.

  • Project: TypeScript Conversion

    • (Project) Introduction
    • (Project) TypeScript Configuration
    • (Project) API
    • (Project) Hooks, Context, Tooltip
    • (Project) Battle
    • (Project) Card, Nav, Loading
    • (Project) Popular
    • (Project) Results

    We'll apply what we've learned by converting an entire React Hooks codebase to TypeScript.

  • Hype

    MH
    Matt Henschel

    Loved the course. It was shorter than the other ones but it still covers everything you'd need to know about React + TS.

    AC
    Angela Cabrero

    Was part of the beta group. Really enjoyed this course. It's a solid follow up to the TypeScript course for those who use React.

    RN
    Rishi Narang

    Its's awesome. I got all the doubts cleared in clear and concise manner especially related to useState and useReducer type checking. This coursed has boosted my confidence to use typescript in React.

    Good course. Exactly what I needed.

    Master React with TypeScript today

    FAQ

    What makes these courses different from other online courses?

    Our courses are designed to teach you everything you need to know to confidently write production-ready code. The tradeoff is it will require more work and focus than a course that features a few bite-sized screencasts. Real learning takes time, but you can feel confident that once you've finished a course, you’ll have mastered everything you need to know with minimal knowledge gaps.

    In which order should I take the courses?

    If you're comfortable with JavaScript (including ES6) and want to jump straight to React, go with "React", "React Hooks", then any other course that looks interesting. If you're not comfortable with JavaScript, start with "Modern JavaScript", then "Advanced JavaScript", then any other course you'd like.

    I need an official invoice with certain fields like VAT. Can I get one?

    Once you sign up, as part of the welcome email, you'll be given a link to fill out where you can input all your company's info.

    Do the courses have captions?

    Yes.

    What level of experience is required for getting the most out of these courses?

    A fundamental understanding of JavaScript or familiarity with another programming language. For example, you should be comfortable with functions, arguments, loops, control flow, etc. If you want to jump straight in to the React courses, we recommend having a stronger knowledge of JavaScript, which you can get from our JavaScript courses if you’re unsure.

    What projects will I build throughout the courses

    You can find every project on the /projects page.

    How long should I expect each course to take?

    Naturally, it depends. Considering all our courses are comprised of video, text, quizzes, practice problems, and curriculum - 15-30 hours per course is a safe assumption.

    How does the subscription work?

    Like Netflix. You pay $40 per month or $350 per year for access to all our courses, premium newsletters, and events. Your subscription will be active until you cancel, which you can do at any time in your dashboard.

    5

    4 Reviews

    100%
    0%
    0%
    0%
    0%
    • Albert Vila Calvo
      33 days ago

      Good course. Exactly what I needed.

    • RN
      Rishi Narang
      3 months ago

      Its's awesome. I got all the doubts cleared in clear and concise manner especially related to useState and useReducer type checking. This coursed has boosted my confidence to use typescript in React.

    • MH
      Matt Henschel
      3 months ago

      Loved the course. It was shorter than the other ones but it still covers everything you'd need to know about React + TS.

    • AC
      Angela Cabrero
      3 months ago

      Was part of the beta group. Really enjoyed this course. It's a solid follow up to the TypeScript course for those who use React.