Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "Applying Flow" Lesson is part of the full, Complete Intro to React, v3 (feat. Redux, Router & Flow) course featured in this preview video. Here's what you'd learn in this lesson:

With Flow set up, Brian updates Search.jsx by adding a type for the incoming parameter, which is a synthetic (React) keyboard event. Then Brian gets Flow to be set up in ShowCard.jsx to be typed.

Get Unlimited Access Now

Transcript from the "Applying Flow" Lesson

[00:00:00]
>> Brian Holt: Let's go actually start typing our project. The thing that you're gonna find with any type system that you slowly introduce to your project is that up front it's a lot more burden than it is helpful, right? If you're only type-checking one file, it's basically accepting a bunch of what we're gonna call anytypes and I'll explain to you momentarily what that stands, what that means.

[00:00:20] But as we slowly expand and more files are being typed, you're gonna find that once everything is typed then it's a huge productivity boon for you. It's just up front you're gonna have to pay a pretty steep cost, to be totally honest. So let's go to search JSX and actually do some typing.

[00:00:45]
>> Brian Holt: So the way that you opt in a file to be checked with flow is //@flow. It has, you can see already, my editor is already complains, hey, you told me to check flow, now you got screwed up a bunch of stuff. Actually it's only one thing which is nice.

[00:01:05] But you can see here it says, hey, this isn't working yet.
>> Brian Holt: And that's because flow wants to have type annotations for parameters,
>> Brian Holt: Which is what we're gonna do. And then the other thing is that, so we're gonna be doing more invalid JavaScript, right? Adding type annotations to your code is not valid JavaScript because there's no type annotations in JavaScript.

[00:01:37] So you would need a babble plugin to transform your code from code that has flow annotations to normal JavaScript. Luckily for us, we're including the React preset for babble. And that includes the flow annotation removing code. So if you're not including that, you have to include that now but since we included that preset, in fact, I'll show you real quick.

[00:02:00] Babel rc, this right here, this line makes it so that our code is already able to remove those flow type annotations.
>> Brian Holt: Okay, sorry, going back to Search.jsx. So now we wanna type this event, right? Because, otherwise, if you go here to run flow, it's gonna say, hey, you need an annotation here.

[00:02:29] I don't know what this is, right? The other thing to note is notice this ran really fast, right? As opposed to last time, it took a bit to start up. Before it was starting up that process. But now it's just running constantly in the background. So now it's really fast.

[00:02:46] Okay, so we need to add a type annotation to this. What is this? And you're gonna find yourself asking that question a lot when you're adding types to something. But what this is it's a really positive thing, not just for your future self and getting the flow type and all stuff like that.

[00:03:06] But it's useful for you to think through what your code actually does, right? And you'll find here that you'll start refactoring things to be more concise, because you're more aware of what's going in the functions that what's coming out of them. That becomes very important when you're doing types.

[00:03:24]
>> Brian Holt: Okay? So this is a keyboard event.
>> Brian Holt: What's nice about specifically flow is it has all of this browser stuff already typed for you. You don't have to do anything. Keyboard event already exists. And if you want to look at them, go to flowtype.org. Another place that if you're gonna do flow typing, you gotta spend a lot of time in the documentations.

[00:03:53] And there's the type system, there's library definitions, configurations, all that kind of stuff.
>> Brian Holt: And I would also recommend that you put this into your editor, like I have. So again, I'm gonna show you for sublime, we're gonna say install package, I'm gonna show you a list cuz I already have it installed.

[00:04:19] And then if you go down here, remember that I installed the sublime linter, right? For the ESLinting, there's another one called SublimeLinter-flow and I'm gonna get all those flow errors directly into my editor. It already exists for Atom as well, I can't remember the name of the package off the top of my head but I know this one called Nuclide, that Facebook puts out.

[00:04:45] I'd have very little experience with Nuclide but Nuclide was specifically built by Facebook with flow in mind. Okay, so this is a keyboard event that iss actually not even 100% true because this is a React synthetic keyboard event. Again, luckily, since this is built by Facebook, they already provided for this, so this is actually a synthetic KeyboardEvent, we'll stick with KeyboardEvent for just the second.

[00:05:20]
>> Brian Holt: Now what this is gonna complain about is it's still saying right here that event.target.value is not guaranteed to be there. That's because when you have a keyboard event, it is possible for the browser to admit to keyboard event with no target. Don't ask me how that happens but it is possible, and so flow is gonna make you say I want you to acknowledge that this is going to be there.

[00:05:44] So what you can say is and target is going to be an HTML input element.
>> Brian Holt: And now that's been typed.
>> Brian Holt: SyntheticKeyboardEvent. Why was that working for me before? All right, react or flow synthetic event.
>> Brian Holt: SyntheticKeyboardEvent.
>> Brian Holt: That's super weird to me. I have no idea why it doesn't like that.

[00:06:48] Okay. Another problem I have with sometimes with flow, sometimes it's just slow on the uptake. Cuz my yarn flow is not complaining, so I'm sure it will eventually go away. Particularly with flow, sometimes it takes awhile for it to kind of say, you know what this is actually okay.

[00:07:14] Take your input from the command line as gospel. Okay, so we're gonna leave that alone for now.
>> Brian Holt: That's what it is. So we have to go make ESLint play okay with Flow as well.
>> Speaker 2: Is running Yarn Flow output put a list of files that it processed as flow files.

[00:07:50] Or at least they count, or something.
>> Brian Holt: There's something you can do. And I would just look at the help. That's what it is. I'm going to come here to my project. We're going to look into the eslint.json. This is what you need, which I don't have in my notes.

[00:08:30]
>> Brian Holt: Yep, that's the one. Come to your eslint.json. We need to let eslint to know, hey we're going to be doing a bunch of stuff with flow. And that's okay so right there you're gonna put plug in flow type recommended. Plug in flow and down there as well, I do, okay?

[00:08:59] Aand then above prettier you're gonna also have to have a flow type plug in This is just saying I have this plugin flow type for the eslint, and I want you to bring in all of their recommended rules. They have more rules as well, but I found they're a little too strict, so I just bring in what they call their recommended rule set.

[00:09:24]
>> Brian Holt: Okay now, so yeah, again, we added two lines, line number 9 right there, and line number 3 right there. And let's go take a look at Search again.
>> Brian Holt: And now it's going to recognize a synthetic keyboard event is actually a flow thing and that's okay. Now the most beautiful part about flow to me is it's pretty good at already knowing what everything is.

[00:09:59] So the only reason that we had to annotate event right here was that there was no way that flow type could figure out what that was eventually going to be, how it was eventually going to be called. So we had to go in and say hey, this is what this is but everything else, right?

[00:10:16] It knows that like search now is a react component and I never have to tell it that because it's already figured that out. So it does a ton of what's called type inference for you, just out of the box for free which is pretty great. It's even going to go as far to read preload and into the json file and see what's coming out of there, and everything like that.

[00:10:40] Which is awesome. So let's go and do some more typing, cuz that's always fun. Let's go to show card. We're going to opt this one into flow typing. As soon as you do that, it's going to say a bunch of stuff.
>> Brian Holt: So the first thing is going to say is styled components required module not found that's a new one well let's keep going with this anyway.

[00:11:23] The thing about flowType is you don't need propTypes anymore, right? Because the type checking that flow is gonna do for you is more robust that anything propTypes would ever do for you. So we're actually just gonna drop the propTypes here. And then down here where it says ShowCard.propTypes We're actually just going to go up and type these props right here, where they are.

[00:11:49] I'm just going to copy this. And then here I'm going to make these prop types up here. But you've got to get rid of all the, is required stuff. So I'm gonna just do this.
>> Brian Holt: What is with yarn flow. What is with that. More is required down there, yeah and drop the propTypes down there, you don't need those anymore.

[00:12:38]
>> Brian Holt: Yarn flow, required module not found
>> Brian Holt: Okay,
>> Brian Holt: That is the issue. So the problem that we've done here is that we ignore south components but we still have to acknowledge that it's there, so this is gonna be style-components, I think. Styled-components, there we go. So, do this came into the flow config where it, we're trying to ignore this directory because it has a bunch of flow inside of it.

[00:13:23] But we still have to acknowledge that it exists otherwise it flow won't acknowledge it exist so libs is just gonna say this is something that I have coming in and just don't type check this that's what it does so come back to show card and now hopefully
>> Brian Holt: It's resolved itself.

[00:13:45] Okay.
>> Brian Holt: Why don't you love me, what is your problem with me?
>> Brian Holt: Well, is what it is right now.
>> Brian Holt: Flow fix me, I think this is what it is
>> Brian Holt: We will come back to this later, but for now if you ever need to ignore a line which I do not suggest you do unless you give me a live workshop in front of hundreds of people, you can use FlowFixMe to say ignore me for now.