⚠️ This lesson is retired and might contain outdated information.

Building a React.js App - ES6 Refactor: propTypes in ES6

Tyler McGinnis
InstructorTyler McGinnis
Share this video with your friends

Social Share Links

Send Tweet
Published 9 years ago
Updated 7 years ago

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.