Creating a Stateless Functional Component in React

[00:00] A common way to build components in React is to extend off of the React.Component subclass. In our case, I have this component called app that's rendering a component called title, and passing in a prop called value.

[00:17] Title is just a component that returns an H1 tag, and just passes in the value prop in as its content. This whole thing is being rendered using React DOM's render method. We're just going to pass in that app component that I had defined up above.

[00:34] We're going to target the ID of root that's just in my HTML document. One thing we might notice after we write out more and more React components is that most of our components will actually be stateless.

[00:48] This just means that we'll have a lot more components that might look like this title component up above, where it will take in some kind of props, and then the component will choose how it wants to be displayed.

[01:00] React introduced a simpler syntax for these kinds of components, calling them stateless functional components. That functional bit means that our components are defined as just a function. In our case, we can change this title component now, and turn it into an arrow function expression.

[01:25] This function is just going to take in props as an argument. We can actually have it return the same thing in the return statement in our original title render method. We can just go and have the H1 tag. Instead of doing this.props.value, now we'll do props.value, and we're good.

[01:50] Let's go and change the value here for the value prop, run the example, and we can see that it works exactly the same as that original title component. The stateless bit now in that whole stateless functional components phrase just means that we lose access now to all of the life cycle methods that we're used to using while extending off of the React.Component subclass.

[02:16] The most important one is that we no longer can use this.setstate. As a result of this, our components are now just this result of the input props that we actually provide them. However, we still have access to things like prop type validation, and also default props, but specifying the members on the title function itself.

[02:42] Here, I can just add title.proptypes, and we can go and validate the value prop type the same way we would in a typical React class component. We can do the same thing now with default props by doing title.defaultprops, and then giving a default value now for the value prop.

[03:05] Now we have a complete example of a stateless functional component in React.