This course has been updated! We now recommend you take the React and TypeScript, v2 course.

Check out a free preview of the full React and TypeScript course:
The "Introduction" Lesson is part of the full, React and TypeScript course featured in this preview video. Here's what you'd learn in this lesson:

Steve Kinney introduces the course, shares some personal history with React and TypeScript, and discusses advantages and disadvantages of TypeScript. Course materials and a brief course overview are also provided in this segment.

Get Unlimited Access Now

Transcript from the "Introduction" Lesson

>> Hello everyone? My name is Steve Kenny. I am the front end architect at a company called Twilio, kind of our bread and butter is sending text messages and emails. Also building a UI around making emails and building programmable call centers and stuff along those lines. And we pretty much use react and TypeScript pretty much exclusively across all of our front end applications.

[00:00:24] And I think a really interesting part about that is, these days that is, kind of a conscious decision of how we choose to build new applications. But it was one of those decisions that actually came out pretty easily. The company itself has acquired other companies over the course of the last few years, I used to work at a company called Sendgrid, which was acquired by Twilio.

[00:00:48] And we kind of came across using React and TypeScript. And I wanna say 2018 and had been using it ever since. At Twilio around the same time, that same idea of a lot of the teams are using react and started to move to TypeScript for reasons that we will kind of cover in this course.

[00:01:05] And other companies have acquired and teams that we brought on, all just happen to use this very similar technology stack. And so nowadays it is the kind of the deliberate decision to use types for new projects. But I think that the interesting part is both it was a conscious choice as well as a natural progression, we'll kind of get into why.

[00:01:26] And then we'll also kind of talk about trying to get a like full understanding around how TypeScript and React work together. So on front end masters, we have courses on react. We have courses on TypeScript, right? And I would be remiss in saying that a full course on TypeScript and React, if you wanna get really into the details of TypeScript, right?

[00:01:51] There's two full courses on it, you should definitely also watch. But this is talking about the kind of intersection in between the two, right? So the prerequisites here is I don't actually expect that you have any familiarity with TypeScript whatsoever. We're gonna start from the ground up, we're gonna learn it in the context of building a series of simple React components, right?

[00:02:11] So we'll kind of learn by doing, right, if you wanna get to every possible kind of edge case. And definitely, I said, there's two full course on TypeScript should definitely watch after this one. But we're gonna kind of do it in the context of these React components. And the other cool thing is we'll build some components, and then I'm gonna turn into a liar.

[00:02:33] And we will actually talk about some actual TypeScript concepts in order to get to more advanced component pattern. So we're gonna start out with the simplest component we can imagine. And we're gonna work all the way to some of the patterns you might see if you were building a component library or building like reusable abstractions that you want to use in a large code base.

[00:02:52] And kind of along the way, things will like they will escalate as we go through, all right. So if we're gonna spend the next few hours together, building React components in TypeScript, we should probably talk a little bit about why one would do that. It's one of those things like having objects that have the properties that you expect, or do the things that you want them to do is pretty important for writing code that works.

[00:03:23] The big question is like, are you gonna find out at runtime? Or would you like to find out before your customers find out? Right, would you like to go with hey, I'm ready to build. Here's all the places where this could break. And it'll address it for you.

[00:03:35] And then you can go like kind of figure out how to navigate those individual situations, right? The other part is, you get a better development experience. So your code less buggy, you get a better development experience, because all of a sudden, auto-complete works. It's like okay, I'm gonna use this object.

[00:03:51] It's like, I know all the properties on that and I know their properties, so on and so forth. So auto-complete is a lot more helpful. And then I think in code basis, towards the end of this workshop, we're gonna see is, there are things that you can do in the components that you build.

[00:04:04] And the abstractions that you make that make other people who use your code know roughly well, how you intended for it to be used. Which enlarge code bases or if you building reusable code like a component system, or shared library or your company, whatever. Some of these patterns are super helpful to make sure that like everything is used the way you kind of intended it.

[00:04:23] So there's a lot of advantages and if we're gonna be just honest about disadvantages like okay, there it is more than just JavaScript, right, as a super set of features on top of it. But I'm gonna argue that as we get into learn some of the concepts, TypeScript can be incredibly lightweight.

[00:04:42] One of the things that we're gonna kind of see as we go through this is TypeScript tries its hardest to stay out of your way and not really get involved. A lot of times your TypeScript might just look like JavaScript. It'll get out of your way and then only in the cases where it needs a little bit of help from you, to help you is where we kind of have to step in.

[00:05:02] And give it a little bit more information about what we wanna do, what the intent of our code is, so on and so forth? It's basically one of those like helped me help you kind of situations. Those are times we need to deal with TypeScript directly. But as we go see this very first component we look at, you won't even notice that it was TypeScript at first.