Typescript with React classes - quick start - Jest testing

Focused View

Alex Horea

4:42:38

84 View

1 - Introduction

1 - Course overview.mp4

01:46

2 - Tools we will need.mp4

02:19

2 - First steps with React and Typescript

3 - Section intro.mp4

01:43

4 - Create react app and git.mp4

03:53

4 - code changes in this lecture.zip

5 - Initial project structure.mp4

05:21

5 - code changes in this lecture.zip

6 - Understanding state and props child and parent.mp4

06:39

7 - Class components.mp4

09:28

7 - code changes in this lecture.zip

8 - Child components.mp4

08:25

8 - code changes in this lecture.zip

9 - Handling events.mp4

08:53

9 - code changes in this lecture.zip

10 - Conditional rendering.mp4

03:35

10 - code changes in this lecture.zip

3 - Advanced project features

11 - Section intro.mp4

01:46

12 - Data from child component to parent component.mp4

06:11

12 - code changes in this lecture.zip

13 - Routing part 1 Navbar.mp4

06:21

13 - code changes in this lecture.zip

14 - Routing part 2 Router and history.mp4

10:09

14 - code changes in this lecture.zip

15 - Small css.mp4

03:56

15 - code changes in this lecture.zip

15 - index.zip

16 - State of the application.mp4

03:20

16 - code changes in this lecture.zip

17 - Rendering async table setup.mp4

07:52

17 - code changes in this lecture.zip

18 - Rendering async table adding rows.mp4

09:28

18 - code changes in this lecture.zip

4 - Extendig app functionality

19 - Section intro.mp4

01:31

20 - Space component and data service.mp4

09:32

20 - code changes in this lecture.zip

21 - Spaces component.mp4

11:26

21 - code changes in this lecture.zip

22 - Routing and Stiling spaces.mp4

08:53

22 - code changes in this lecture.zip

22 - code changes in this lecture 2.zip

23 - Modal component.mp4

06:33

23 - code changes in this lecture 1.zip

23 - confrommodalcomponentprops.zip

24 - Display modal.mp4

09:56

24 - code changes in this lecture.zip

5 - React testing introduction

25 - Section intro.mp4

02:22

26 - Fancy unit testing presentation.mp4

06:10

27 - Beware the bugs.html

28 - Testing setup with Jest.mp4

10:04

28 - code changes in this lecture.zip

29 - Test hooks and mocks.mp4

11:26

29 - code changes in this lecture.zip

30 - Basic queries and assertions.mp4

06:55

30 - code changes in this lecture.zip

31 - Test coverage.mp4

07:13

31 - code changes in this lecture.zip

32 - Testing user interaction.mp4

06:07

32 - code changes in this lecture.zip

33 - Mocking services.mp4

10:20

33 - code changes in this lecture.zip

34 - Debugging tests.mp4

07:46

34 - code changes in this lecture.zip

6 - Advanced React Typescript testing

35 - Section intro.mp4

01:34

36 - Testing links.mp4

08:40

36 - code changes in this lecture.zip

37 - Data test queries.mp4

07:41

37 - code changes in this lecture.zip

38 - Module names mapper.mp4

07:47

38 - code changes in this lecture.zip

39 - Testing Multiple Suites.mp4

11:41

39 - code changes in this lecture.zip

40 - Finishing tests.mp4

05:10

40 - code changes in this lecture.zip

40 - space-finder-frontend.zip

7 - Appendix

41 - Section intro.mp4

01:03

42 - Snapshot testing.mp4

07:11

42 - code changes in this lecture.zip

43 - Project setup from scratch.mp4

08:51

44 - Development environment.mp4

04:39

8 - Conclussion

45 - Course resume and closing words.mp4

01:02

46 - Bonus.html

Description

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

Who is this for?

Students who like Typescript and React and want to use them together

Students who want to learn Jest testing

More details

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 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

User Reviews

Rating

average 0

Total votes0

Focused display

Hi! I'm Alex and I am pleased to meet you!I have a master's degree in Internet Technologies and I'm an active senior web and Cloud developer. In the last years I worked designing and implementing user interfaces and cloud solutions for various clients ranging from automotive to e-commerce. I firmly believe that knowing is never enough. Knowledge must be put to practice, that is why I want to focus my teaching on concrete, real world programs.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.