Building a React.js App - ES6 Refactor: Routing without Mixins

We only have four more components left until our entire app has been ES6-ified, so what we're going to do real quick is take care of this Home component since it's really small.

Import React from React, and then let's go ahead and create a class home which extends react.component, so just the same stuff we've been doing. Have a render method which returns this object, and then let's go ahead and export default home, so nothing new yet.

Now let's head over to the main.js file. Now, like usual, let's import react from react. Now let's create our main class, which extends react component, and then we're going to export default main. Once we do that, let's add our render method, which is going to return us the UI for this component.

The last component we're going to modify in this video is the search GitHub component, so same thing. We're going to do this. You should be very used to this by now. We're going to create a class of search GitHub, which extends react.component, and then we're going to export default search GitHub.

Let's bring these three functions up here. Let's get rid of the function, and let's get rid of these commas.

If you'll remember, functions inside of classes with react don't get auto-bounded, or this keyword doesn't get auto-bound. What we're going to have to do is make these arrow functions, which then invoke the specific function on the instance, and with GitRef, we're going to pass it ref.

This looks really good. Let's change this to const really quick. Perfect.

Now what you'll notice is everything is good except for this guy right here. If you remember correctly, what the router.history mixin is doing is it's taking our instance and it's mixing a few methods onto it. One of those methods is history, so we can call this .history.pushdate.

Because we no longer have that mixin, this .history's going to be undefined. We need to find another way to get history into this search GitHub component.

If you check out our routes, what React Router does is if you have a component that's being handled by the router, that component will receive certain properties and certain methods from the router. The problem is search GitHub isn't being handled by the router.

But we know that main is, and main is rendering search GitHub, so what if we do this? What if we say history is going to be this .props.history because React Router is going to pass main a history method?

Then what we can do is in search GitHub, let's add some prop types of history, which is going to be react.proptypes.object, and it's going to be required. Then all we need to do is change this .history to this .props.pushdate, so let's see if this works, and it does.

To recap, because we can't use mixins with react, we have to figure out another way to get history into this component. We do that by passing history from the main component into search GitHub as props, and the reason that the main component has access to this .props.history is because the main component is being controlled by the router.