Typescript with React classes – quick start – Jest testing

Typescript with React classes - quick start - Jest testing

Typescript with React classes – quick start – Jest testing

Quickly stack using Typescript with React and build great apps! Don’t stop here and write awesome tests with Jest!

Language: english

Note: 4.3/5 (331 notes) 74,733 students

Instructor(s): Alex Horea

Last update: 2021-11-09

What you’ll learn

  • Integrate Typescript with React apps
  • React props and state using Typescript interfaces
  • Build a small app with Typescript
  • React Router and history
  • React conditional rendering
  • Handling parent and child components with Typescript
  • Test React with Jest and React testing library
  • Jest hooks, mocks and test suites
  • Use interface, user interaction and async code testing



  • Basic Typescript understanding
  • Basic NodeJS and npm
  • Basic usage of VSCode and the terminal
  • Nice to have: basic React and Jest understanding




Typescript is becoming more and more popular! And the beloved React framework has embraced it! But often making them work together can be tricky. Here it will work from the first try.

React means act in response to something; respond in a particular way. This is the way you will make your UI behave.

In this short course you will learn how you can use them together, by building a small project:

  • Learn how to use Typescript interfaces and React properties and state

  • Learn how to configure React components as parent or child

  • Learn to pass data between components

  • Understand the React rendering process

  • Use Typescript classes and inheritance to make the React code more robust

  • Learn how to render React tables with async data.

  • Learn how to handle events and build your own event types with Typescript

  • Learn about React conditional rendering

In the second part of the course you will learn how to test your app with Jest:

  • Jest testing setup

  • Learn about jest coverage

  • Test with React testing library

  • Advanced jest testing techniques

Course structure:

  • Initial setup with Create React app

  • Extensive presentation on how to use components

  • Build app features like React forms, navbar, Router, history

Practice with the following tools:

  • NodeJs

  • NPM and NPM commands

  • Visual Studio Code

  • Jest

Course advantages:

  • Short and concise: your time is precious

  • Knowledgeable and programming active instructor

  • Big font, dark background

  • GitHub code diffs

At the end of the course you will be ready to use these two awesome technologies together and test them with Jest!

Are you ready to use Typescript alongside React? Get your Typescript editor ready and start coding your next app with your favorite language and framework!

Enroll now!


Who this course is for

  • Students who like Typescript and React and want to use them together
  • Students who want to learn Jest testing


Course content

  • Introduction
    • Course overview
    • Tools we will need
  • First steps with React and Typescript
    • Section intro
    • Create react app and git
    • Initial project structure
    • Understanding state and props, child and parent
    • Class components
    • Child components
    • Handling events
    • Conditional rendering
  • Advanced project features
    • Section intro
    • Data from child component to parent component
    • Routing part 1: Navbar
    • Routing part 2: Router and history
    • Small css
    • State of the application
    • Rendering async table: setup
    • Rendering async table: adding rows
  • Extendig app functionality
    • Section intro
    • Space component and data service
    • Spaces component
    • Routing and Stiling spaces
    • Modal component
    • Display modal
  • React testing introduction
    • Section intro
    • Fancy unit testing presentation
    • Beware the bugs
    • Testing setup with Jest
    • Test hooks and mocks
    • Basic queries and assertions
    • Test coverage
    • Testing user interaction
    • Mocking services
    • Debugging tests
  • Advanced React Typescript testing
    • Section intro
    • Testing links
    • Data test queries
    • Module names mapper
    • Testing Multiple Suites
    • Finishing tests
  • Appendix
    • Section intro
    • Snapshot testing
    • Project setup from scratch
    • Development environment
  • Conclussion
    • Course resume and closing words
    • Bonus


Time remaining or 996 enrolls left


Don’t miss any coupons by joining our Telegram group 

Udemy Coupon Code 100% off | Udemy Free Course | Udemy offer | Course with certificate