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!

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

Requirements

Basic Typescript understanding

Basic NodeJS and npm

Basic usage of VSCode and the terminal

Nice to have: basic React and Jest understanding

Description

THIS COURSE USES REACT CLASSES WITH PROPS AND STATE.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 stateLearn how to configure React components as parent or childLearn to pass data between componentsUnderstand the React rendering processUse Typescript classes and inheritance to make the React code more robustLearn how to render React tables with async data.Learn how to handle events and build your own event types with TypescriptLearn about React conditional renderingIn the second part of the course you will learn how to test your app with Jest:Jest testing setup Learn about jest coverageTest with React testing libraryAdvanced jest testing techniquesCourse structure:Initial setup with Create React appExtensive presentation on how to use componentsBuild app features like React forms, navbar, Router, historyPractice with the following tools:NodeJsNPM and NPM commandsVisual Studio CodeJestCourse advantages:Short and concise: your time is preciousKnowledgeable and programming active instructorBig font, dark backgroundGitHub code diffsAt 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!

Overview

Section 1: Introduction

Lecture 1 Course overview

Lecture 2 Tools we will need

Section 2: First steps with React and Typescript

Lecture 3 Section intro

Lecture 4 Create react app and git

Lecture 5 Initial project structure

Lecture 6 Understanding state and props, child and parent

Lecture 7 Class components

Lecture 8 Child components

Lecture 9 Handling events

Lecture 10 Conditional rendering

Section 3: Advanced project features

Lecture 11 Section intro

Lecture 12 Data from child component to parent component

Lecture 13 Routing part 1: Navbar

Lecture 14 Routing part 2: Router and history

Lecture 15 Small css

Lecture 16 State of the application

Lecture 17 Rendering async table: setup

Lecture 18 Rendering async table: adding rows

Section 4: Extendig app functionality

Lecture 19 Section intro

Lecture 20 Space component and data service

Lecture 21 Spaces component

Lecture 22 Routing and Stiling spaces

Lecture 23 Modal component

Lecture 24 Display modal

Section 5: React testing introduction

Lecture 25 Section intro

Lecture 26 Fancy unit testing presentation

Lecture 27 Beware the bugs

Lecture 28 Testing setup with Jest

Lecture 29 Test hooks and mocks

Lecture 30 Basic queries and assertions

Lecture 31 Test coverage

Lecture 32 Testing user interaction

Lecture 33 Mocking services

Lecture 34 Debugging tests

Section 6: Advanced React Typescript testing

Lecture 35 Section intro

Lecture 36 Testing links

Lecture 37 Data test queries

Lecture 38 Module names mapper

Lecture 39 Testing Multiple Suites

Lecture 40 Finishing tests

Section 7: Appendix

Lecture 41 Section intro

Lecture 42 Snapshot testing

Lecture 43 Project setup from scratch

Lecture 44 Development environment

Section 8: Conclussion

Lecture 45 Course resume and closing words

Lecture 46 Bonus

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