So first thing I want to do is go to components and create a new file and call it results.js and in here we just need our basic React code I'll just type it out really quick this time. So I'm gonna say import React, { Component } from 'react';. And here I want to say class Results extends Component and type the render function and say render and return just a div for now. And while we're at it we might as well include our logo so we can talk about how that works.

So export default results now let's import our logo component. important logo from ./logo and let's just throw it in here. First let's just say results we'll get rid of this H1 later but we just need to have some hard clarification that we are in this component so results and logo.

Okay save this.

results.js

import React, { Component } from 'react';
import Logo from './logo';

class Results extends Component {
  render() {
    return (
      <div>
        <h1>Results</h1>
        <Logo/>
      </div>
    )
  }
}
export default Results;

Let's go ahead and go to our bootstrap.js and replace home here on the results path with our component and what's important. Let's say em4 results from flash components flash results. Okay now let's just go ahead and replace home with Results, save that.

Let's head to our application in the browser, and let's try and perform a search, rails hit return and nothing happens because we're not pushing to this component, we're not doing anything except for logging the query when we are searching. So what we have to do is tell our app somehow that we want to go to that component.

So we'll go ahead and we will do that in the next guide. Let's go ahead and commit our code. git status, git add ., git commit -m and let's say 'set up results component' and I'll catch you the next guide where we will find out how we can actually navigate to that.

Really quick, we might as well just see what it looks like when we go to /results, so I'll say /results. And as you can see we're rendering all of our stuff. And the reason that's happening is because we need to specify that this is an exact we need to specify that if we go to this we only want to render home if it's exactly this path.

If we don't it's going to recognize that we have that same path in results and it's going to render both components. So we just need to say exact here

and then we can go to our app here. You'll notice all that says is results

and if we go back to localhost 3000 it's our home component.

So let's go ahead and hop into the next guide right now.

Resources

Source code