1.2 Thinking in React: Functional Components

[MUSIC] >> The key to success with ReactJS is to write our components the way that they want us to write them. So, in this lesson, we're going to start by writing a very simple but flawed component and then we are going to refactor it to the point of where it's essentially perfect, [LAUGH] as far as the people of React is concerned. So we're going to create a component that is going to display the details of a user. So let's go ahead and create a new file. I'm going to call this user details but we're going to do this in a couple of different ways. So I'm going to call this class because we're going to use a class here to create this component. And our data is going to look like this. We're going to have a user object that has a name property and we're just going to use the name of John Doe and then we are going to know John Doe's city. So let's say that John Doe lives in Dallas, Texas. So this is the data that we are going to take and then display with a React component. So we're going to start by defining a class, and let's just call this UserDetails and we want to extend React.Component. And we don't need a constructor for this but we do need to implement the render method and the HTML is going to be rather simple. We're going to wrap everything with a element. The name is going to be an element and we can go ahead and get that data. So we're going to say props.user.name and that will give us our name of the user, then we will use a element for the city and we will access that data by this props user and city and that is what the resulting HTML is going to be. It's not anything to write home about but it's going to work. So we have our user details class, we have our data. Now we just want to render that in the document. So let's use ReactDOM. We'll call the render method and we are going to use UserDetails and the user is going to be set to user. And then we want to render this within an element in the document, so document.getElementByID and that ID is user details. Now the last thing that we need to do is reference this in the index HTML files. So, we'll just have a script element where the type is text/babel and the source is going to be userdetails-class.js. And then we will go to the browser and we will see this rendered and hopefully everything is going to work as it should. So let's refresh. And there we see John Doe and John Doe's city of Dallas, Texas. So we have this simple component but really we want to separate this into different pieces because it just ultimately makes our code easier to maintain. It means that we have to write more code but the tradeoff there is that it makes it easier to maintain. So really we have two pieces of information here, we have the username and the city. So let's create two new classes, one for the username that's going to render the H1 element, and then we will have a city class that's going to render the city information. So here we're going to have a class, a username, we will extend every React component once again. And the render method is basically going to return what we already have. We do need to modify our property chain there. So we're going to return. We don't want to return a div but we do want to return this h1 element and now we just have this props and name. And so inside of the user details class, we will refer to our username. So we will change this to simply be a Username element and we are going to set the name ={this.props.user.name}. So we have the username factored out, we just need to do the same thing for the city. So let's take what we have for the username, let's copy and paste that, we'll call the class UserCity. And we will return this p element, but once again, we do need to modify our property chain here, we need this props and then city. And so inside of user details, we'll have UserCity, we will set the city property =this.props.user.city and then we can get rid of the old code. So whenever we go back to the browser, everything should still look the same. But the beauty here now is that we have separated all of the concerns, so that one class is responsible for the username, one class is responsible for the city and then we have a class responsible for grouping all of that stuff together. Now this is all well and good, but really this could be better. And the reason why I say that is because we have classes for doing some very simple things. So what is a class? Well, it's there so that we can create objects of that class. And what is an object? It is something that really maintains state. There is some instance data that's being kept track of and we just don't have that here. We have a Username and UserCity and userDetails. There's no instant state or no state here, they simply display the data that's given to them. So instead of using classes, we can refactor this code to be just simple JavaScript functions. In fact, that is what we are meant to do. Because according to the documentation, it says in an ideal world, most of your components would be stateless functions because in the future, we'll be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations. This is the recommended pattern when possible. So if you have a component that has no state, it has no instance data, then don't use a class, write a function. So let's look at what that would look like. I'm going to take the existing class file. I'm going to copy and paste it. I'm going to rename it to user detail function, or user details function I should say. And we are just going to refactor this. Basically, we're going to take these classes and turn them into functions. Now, we need access to the props because these are still going to display information, they're just not going to store that information. So these functions are going to have a props parameter. That is how we get that information so that we can display it. But other than that, it is going to be just a simple normal JavaScript function. So our username goes from being a class to being this simple function. And we just need to do the same thing for user city and user details. We just need to copy and paste the necessary stuff. Now we do need to make sure that whenever we display our information that we remove the this keyword from our property chain there. And then finally, for user details, the same thing and we will get rid of the instances to this and we just need to remove the old class code. So let's do that. And we also need to change the reference in the index HTML file to reference this new file. So user-details-function. Let's go back to the browser and refresh, and we will see the exact same thing. So when writing your React.js applications, remember two important things about your components. One, make them small. Remember the Single Responsibility Principle. Because in doing so, you do write more code but you make your code easier to maintain. And second, if your component doesn't need state, don't use a class. Use a function. Thank you so much for watching. And I will see you next time.