Name: Type Check React Components With Flow
Uploaded: 2017-12-29T18:39:05-06:00
Description: In this lesson we are going to add types throughout our basic todo list component. This includes type checking the component props, local state, and property methods.

In this lesson we are going to add types throughout our basic todo list component. This includes type checking the component props, local state, and property methods. 

https://app.egghead.io/api/v1/lessons/react-type-check-react-components-with-flow/subtitles

Type Check React Components With Flow

Instructor: [00:00] The first thing we want to do in our application is install flow-bin and babel-preset-flow. While it's installing, let's make sure we have our presets, set up our babel.rc. Then set up our package.json. We're going to add this Flow script.

[00:14] Once this has installed, we need to do one more thing, and that's npm run flow-init. This is going to make a flow config file. Now, we should be able to do npm run flow, and it'll parse our files, and let us know of any initial Flow errors.

[00:33] We don't. Now, let's go ahead and add flow to our to-do list, where we run our server. Instead of our to-do list, we can add to-dos by typing in the input box, and clicking the click me button. Then to remove them, we simply just need to click on them.

[00:54] We do this by using local state. We have our to-dos in an array, and the current input from the input box, and as a string. We have three methods, adding a to-do, removing a to-do, and handling the input change. We simply just map over our state to-dos to print to the page.

[01:14] Now, to integrate Flow inside this file, we need to go to our top line here, and do an @flow, comment it out. Now, back inside of our terminal, let's rerun our npm run flow script again. We can see that we get a bunch of errors at the get-go.

[01:30] This is because Flow infers types. Let's work through these errors. React components take two type arguments, props and state. The second type argument, state, is optional. By default, it is undefined. However, we are using state, so we do need to create a state type.

[01:49] We are also receiving one prop here called title, so we'll need to make a props type to reflect this. We'll make a state type, and have two properties, input, which is a string, and to-dos, which is an array of strings, as well as a props type that has title as a string.

[02:10] Now, let's head back to our terminal, and see how many errors we have left. It looks like we've got two errors left. We have a couple methods that have missing annotations for their parameters. We'll go to removeToDo, and give this I a number type, and this handleInputChange is going to be a synthetic keyboard event with an HTML input element type.

[02:32] We've defined I with the number type. This is because it's the index location of the click to-do inside of the to-dos array. Then we added this synthetic keyboard event type, because this is what's passed to the handleInputChange each time the function is called.

[02:51] React uses its own event system, so it's important to use synthetic event types, instead of the DOM types, such as event or keyboard event. The synthetic event types all take a single type argument, the type of the HTML element the event handler was placed on.

[03:10] The Flow docs go more in-depth on these types that React provides, and the DOM event they are related to. Now, finally, back inside of our terminal, we can run our Flow script again. You can see that we don't have any errors.

[03:25] However, there are some things that we can still to do our code to make it even stronger. Let's add two more types up here at the top. The first one will be index as a number, and input as a string. You might have noticed that we initially defined input as a string, and to-dos as an array of strings.

[03:45] What we really want to define is our to-dos array should be an array of inputs. As our app grows, we can make sure that our to-dos and input types stay consistent. The same goes with index. We define it as a number, so let's replace its usage within removeToDo.

[04:06] Again, as our application grows, and we potentially use a to-do index elsewhere, we can make sure the type stays consistent throughout. Let's check our terminal one last time, and make sure everything is still good. Perfect.

Type Check React Components With Flow

Share this video with your friends