Building a React.js App - ES6 Refactor: propTypes in ES6
In this video, we’ll refactor our Repos and UserProfile components and along the way we’ll learn how to utilize propTypes in React with JavaScript classes.
This video is going to be very similar to the last video. Let's go ahead and refactor our repos JS file, and our userProfile JS file, in order to use more ES6-type syntax. First thing as always, we are going to import React from React, and delete this line.
Let's go ahead and create our UserProfiles class, which extends React component. Once we do that, let's go ahead and export default UserProfiles. Once we've done that, let's go ahead and add our render method in here, which is going to return this UI.
Lastly, we'll need to go and add propTypes onto our class. UserProfiles.propTypes equals that Object. This looks good. Let's go ahead and modify Repos now. We are going to import React from React, create our Repos class, which extends React component.
Let's go ahead and throw our render method in here as well. Beautiful, and next, let's go ahead and add our profile, or add our propTypes to our Repos class. Now, let's go ahead, and let's move our mapping function inside of our components.
Going to drop this right here, and indent this, change that to be an arrow function. Works great, so, now let's go ahead, and find where all of these are being imported, or these two files are being imported.
I believe, it's just in Our Profile JS. Here, we are going to import Repos, from gibbed/repos, and then, we'll also import UserProfile from gibbed/UserProfile. Let's see if this's working. There we go.
You can also add the propTypes as a static property on the class using the babel-preset-stage-0. For example:
static propTypes = {
username: React.PropTypes.string.isRequired,
notes: React.PropTypes.array.isRequired,
addNote: React.PropTypes.func.isRequired
};
Why didn't we change the this references on the render methods to this.something().bind(this)? I thought that this didn't work using the class syntax when trying to reference things inside the Class from what you said on other videos.
The lesson video has been updated!