This course has been updated! We now recommend you take the TypeScript Fundamentals, v3 course.
Transcript from the "Stateless Functional Components" Lesson
[00:00:00]
>> Mike North: So the next topic we're going to jump into is using React with TypeScript. This is really cool, and this is why we're going to sort of get away from the slides and into practical demos, so you should make sure you've pulled in the latest changes from master into your code.
[00:00:18] There's some new stuff I've pushed last night. We're gonna look at that exercise that is underscore first. So we have some react component in that in there. And the first thing I wanted to say is react works well with JSX reasonably well. There are some things just because those angle brackets are used, there some things that tend to crash with JSX, but there are workarounds such as casting with the as keyword that allow us to kind of get by.
[00:00:51] So the first thing I want us to look at is a state list functional component. So this, you may recognize this as like the flavor of React component that is not a class right, this does not have any state. And you'll see we have a variable Like const my component, the type of this variable is React.SFC that's stateless functional component.
[00:01:19] And these are the kinds of components that basically consist of only the render function. The type we're passing in here is the structure of allowed props on this react component. This is really, really cool. The interface here is what we're using to describe the props. And so when we're consuming this component, I'll just get rid of the interface here temporarily.
[00:01:45] When we're consuming our component, say, in our app, which is a component where we're, so if that the root component for our app, if we were missing that name attribute, we would get a complaint from the typescript compiler. It would say, look when you use this you have to provide me with the information that I need.
[00:02:07] So this is where the idea of required and optional parameters like that. That is really, really powerful here in terms of having some enforcement on the API surface of a react component. I'm sure I'm not the only one that has repeatedly lost track of exactly what you're supposed to pass into these things.
[00:02:30] Just because it's sort of, you kind of have to look through like where are all of my props being consumed throughout the implementation of this component. You kind of have to search around and here the developer is encouraged to define that up front as a structure and give it some degree of formality.
[00:02:52] And what that means is now, we know what the rules are, and thus, we can play by these rules.