Introduction
In this part of the course, we will create our first React + TypeScript application.
We will bootstrap the file structure using the create-react-app Command Line Interface (CLI). If you've worked with React before, you might be familiar with it. If you haven't heard about it yet - no worries, I will talk about it in more detail further in this part.
I will show you the file structure it generates and then I'll explain the purpose of each file there.
Then we'll create our components. You'll see how to use TypeScript to specify the props. We'll briefly discuss the difference between types and interfaces.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass with a single-time purchase.
[00:00 - 00:06] Alright, in this part of the course we will build our first React TypeScript application. We will bootstrap the file structure using create React App CLI.
[00:07 - 00:15] If you haven't heard about it yet, no worries, I will explain everything you need to know. I will show you the file structure it generates and then go through each file and explain the purpose and why is it created.
[00:16 - 00:20] Then we'll create our components. You will see how to use TypeScript to specify the type of the props.
[00:21 - 00:27] We'll briefly discuss the difference between types and interfaces. We'll mostly work with the functional components because this is the most popular approach right now.
[00:28 - 00:36] We'll also discuss using JavaScript libraries in TypeScript projects. Some of them have types, type definitions provided by default, and some of them will require installing some additional packages.
[00:37 - 00:41] Our application will store the state on the backend. So we'll also discuss how to use the fetch function using TypeScript.
[00:42 - 00:53] So in this chapter, we'll cover creating components, defining props, using state, handling events, working with refs, styling components, using external libraries, and making network requests. That's quite a lot, so let's hurry up.