Introduction
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
Lesson Transcript
[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.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
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. 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. Then we'll create our components. You will see how to use TypeScript to specify the type of the props. 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. 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. Our application will store the state on the backend. So we'll also discuss how to use the fetch function using TypeScript. 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.