Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "Introducing 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:

Brain introduces Flow, a static type checker for JavaScript code.

Get Unlimited Access Now

Transcript from the "Introducing Flow" Lesson

[00:00:00]
>> Brian Holt: This next one is a topic near and dear to my heart. I actually really, really enjoy this part, some people really don't. I debated a lot whether or not I was gonna add Flow to this course, should I add it, should I not add it? Inevitably, I was going to bring up, I knew for a fact that someone was gonna say, well, what about TypeScript?

[00:00:15] Because always someone says, what about TypeScript? So that was one part of it. Another part of it is it makes development go a little bit slower, makes it a little bit more difficult, right? But let me defend why I added Flow. First of all, I already showed you how to use React, right?

[00:00:31] I showed you every piece of React that you need to know about without Flow. That's why we did the first half of the course with no Flow at all. And that's why we added it part way in. One, I wanted to show you how to migrate a code base to Flow.

[00:00:43] And secondly, I wanted you to be able to write React with no Flow whatsoever. Secondly, what I'm showing you how to write here is the best scalable architecture for React that I know how to write. If I was gonna start a project today, no questions asked, I would definitely include Flow and it would definitely make it a better code base.

[00:01:04] Like down the road I'll be much happier having written that Flow code base than if I had not included it. So this is definitely going to help you a lot in that respect. If you're gonna start a new project with this it's gonna make your code better and more maintainable, and it's going to last longer for sure.

[00:01:22] Lastly, even if you choose not to go forward with Flow or TypeScript, you're gonna see a lot of stuff, like when you're reading documentation and going on Stack Overflow, that just include all these things. So now you're gonna know how to read these things, whether or not you're actually going to actually use them.

[00:01:39] Nonetheless, everything that I've shown you how, all you have to go back and do is delete the type annotations and it's just gonna work as plain JavaScript, right? So #notsorry, [LAUGH]. So that's my defense of Flow. Again, you are totally welcome to not use it, but I think it's important that you understand how to use it.

[00:02:00] And then lastly, there's version 1 and version 2 of this course out there online already that you can watch that do not have Flow in it at all. They're pure just JavaScript. So all those things are up to you. The kind of React that we're writing now is fine.

[00:02:16] You can totally write huge scalable apps. In fact I would say the way that we wrote React at Netflix is pretty similar to the way that we have been writing it so far. So, in other words, the tool that I'm about to introduce to you is not necessary to write large apps with React.

[00:02:35] I prefer it, you'll find many people do prefer it. But it's not necessary, you don't have to. So we're gonna be doing types now. We're gonna be talking about Flow, and TypeScript is an amazing piece of technology, I'm just choosing Flow because it's the one that I know.

[00:02:53] But TypeScript is equally awesome, does equally cool things for you. So I'm a huge fan of either piece of technology. So what is Flow? Well, JavaScript is a dynamic language, right? So it's really fast to write because you don't have to be constantly typing everything you typing in a sense of like adding types, annotations to whatever you writing.

[00:03:18] However, if you do write types, you can be more assured that you're gonna not have run time errors, right? Because you can have a static type checker go through and it's like, hey, you're passing a string from here to here to here, and then you're trying to call something that's not on the string prototype here.

[00:03:34] That's gonna cause a runtime error, right? So it's gonna force you to think through and change your code in such a way that you are depending on types. And by doing that and having that assurance, you're going to have less errors. So the thing that I promised you is that you are going to spend more time writing code because you have to think through it.

[00:03:54] But you're going to end up writing better code that has less errors. And that's something I feel pretty comfortable in asserting and promising. So that's what we're gonna start with today. I do not feel offended at all if you continue following this course and do not write the types part of it, and that's totally okay as well.

[00:04:16]
>> Brian Holt: So let's talk about how this is gonna work. So let's talk about what types are first of all. Cuz it's not a given that if you're writing JavaScript that you're familiar with types and all. And that's okay, you can write JavaScript and be more or less not caring what the types are underneath.

[00:04:34] So right here when I have this, this is an empty string, right? Or if I put things in here, now it's not an empty string. But that's what we call it, it's called a string in terms of JavaScript, right?
>> Brian Holt: It's just a type of thing that you're dealing with, right?

[00:04:52] That's why they're called types. If I come in here and have version, and it's like 5, this here is called the number, as this is called isDone: false. This is called the boolean, right? We also have objects, we have a radius. And then we have a bunch of other things that we, like as what the developers have made up, like events and dom notes.

[00:05:22] Like these are all things that are typed for us.