Course introduction

[00:00 - 00:10] Hello everyone, my name is Maxim Ivanov, I'm the author of this course and I'm a firm believer that the best way of learning is by doing. This is why in this course we'll focus on building real React and TypeScript applications.

[00:11 - 00:23] We'll build six. Each of them is designed to teach you specific concepts and aspects of using React with TypeScript and let's go through them and see what you will learn. The first application is going to be a Trello board. Here you will be able to create new columns.

[00:24 - 00:32] Let's add a new one in review. You can add new cards, follow the course instructions, you can drag the columns and the cards.

[00:33 - 00:38] Don't let your iStrict you, it might look simple but you will actually learn a lot. First of all, you will learn all the basics.

[00:39 - 00:55] Creating React and TypeScript applications, defining components, typing props, specifying types for the state, using refs, using higher order components, using hooks, client server communication, providing styles for your components, using external libraries and even implementing drag and drop. But wait, there is more, there are still five applications to cover.

[00:56 - 01:04] In our second chapter we'll learn how to test React and TypeScript applications . We'll use this goblin store as an example. Here you can put products into the card, let's add a bunch of weapons.

[01:05 - 01:16] In the card you can review the products, remove some of them, review the total price and price of each element, then you can go to checkout and buy the items. The form has validations so it will show errors if you provide wrong values.

[01:17 - 01:23] If you look at the application source code, you will also learn how to normal ize values. Let's pick the expiration date, CVV and place the order.

[01:24 - 01:27] Here you can review what you've bought and go back to the main page. Here you will learn all about testing.

[01:28 - 01:37] You will learn how to create your own test helpers. You will learn how to test components, hooks, how to make testing your components easier, how to test context, everything you need to know to test React and TypeScript applications.

[01:38 - 01:43] The third app we're going to build is the piano. And the best part is that you can actually play on it like in a real piano.

[01:44 - 01:53] [Music] This is where you will learn about React patterns, specifically render props and hooks. And also general patterns like adapter.

[01:54 - 02:04] We will implement our own adapter pattern that will load instruments and provide different sound sets for our application. You might already know that higher order components or hooks are quite hard to type properly.

[02:05 - 02:11] And in this chapter you will learn how to implement a bunch of different varieties of hooks. So it's a great practice if you want to learn them better.

[02:12 - 02:16] The fourth application is a drawing app. Here you will learn how to create an app where you can draw something.

[02:17 - 02:20] Let's draw a little house. One, two, three.

[02:21 - 02:26] Let's draw the roof. And now if we don't like it we can undo and redo the strokes.

[02:27 - 02:30] Maybe add a little bit of color. Let's draw a tree.

[02:31 - 02:33] Let's add a trunk. And it looks good enough.

[02:34 - 02:35] Let's export our drawing. Great.

[02:36 - 02:37] Image. Save.

[02:38 - 02:40] We can also save it as a project. House.

[02:41 - 02:43] Save. And then we'll be able to load it and continue from where we left it.

[02:44 - 02:53] By building this application you will learn how to use Redux. You will learn how to update the data in immutable way, how to use Redux tool kit that's the modern and actually recommended way to use Redux nowadays.

[02:54 - 02:58] How to use Redux DevTools and Reduxlogger. Then you will learn how to use the next JS framework.

[02:59 - 03:08] We will build a new website where we'll learn to use static site generation and server site rendering. We will also learn how to work with dynamic content by implementing the comments section.

[03:09 - 03:20] In this part not only we will implement the application but we'll also deploy it to Vercel. So if you're new to a development then after this part you will know how to create, build and deploy websites using React and TypeScript.

[03:21 - 03:29] For the last application I decided to spice it up a little bit and instead of creating a browser based up like all the others we'll create a console based application. It's going to be a GitHub manager.

[03:30 - 03:37] You will be able to work with issues, repositories and pull requests. For each of the entities you'll be able to create a new one or list the existing ones.

[03:38 - 03:45] I think it's fun and unusual project to put on your resume. Anyway, I hope you will enjoy working through those exercises as much as I enjoy designing them.