So let me show you what we're going to do. Let's go to bootstrap.js in our source folder and right here we have this browser router object.

Let's go ahead and let's set up some ROUTES. So let's go ahead and go up here to import BrowserRouter. And let's put a comma and say Route and I think that's all we need, let me think. It should be all we need and one more thing actually we need switch.

bootstrap.js

import { BrowerRouter, Route, Switch } from 'react-router-dom'.

Now let's go ahead and get rid of our app right here on line 19. And let's just say switch and let's say route and let's say path is equal to slash and let's just leave it like that and let's say component is equal to and let's say Signin and we haven't built this component yet.

bootstrap.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowerRouter, route, Switch } from 'react-router-dom';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

import 'bootstrap/dist/css/bootstrap.css';
import './style/main.scss';

function main() {
  ReactDOM.render(
    <Provider store={createStoreWtihMiddleware(reducers)}>
      <BrowserRouter>
        <Switch>
          <Route path='/' component={Signin}/>
        </Switch>
      </BrowserRouter>
    </Provider>
    , document.querySelector('app-wrapper'));
}

document.addEventListener('DOMContentLoaded', main);

And let's go ahead and just get rid of our app.js, let's delete our app.js.

Let's get rid of our import to app and let's create a new file in our components directory. All right let's go to components and create a new file called Signin.js and let's go ahead and type in import React component from react and I'm going to say class Signin extends Component.

Signin.js

import React, { Component } from 'react';

class Signin extends Component {

}

Now I want to make note of something in vs code that is probably new, I mean it seems new. I haven't seen it before. But basically you'll see it says React in gray and class Signin in gray okay, and component's not.

If we get rid of the extended component here, you'll see component goes to grey and this is all agree. So basically what it means when something is gray is we're not using it, so I just wanted to clarify that.

Lets type in render and let's say return in parentheses let's say div and let's just say class name is equal to sign-in. Okay cool let's go ahead and say export and notice the class sign in it's going to be colored once we export it, so let's say export default Signin, then in the divs I just want to say ...signin.

Signin.js

import React, { Component } from 'react';

class Signin extends Component {
  render() {
    return (
      <div className='sign-in'>
        ...signin
      </div>
    )
  }
}

export default Signin;

and let's go ahead and create the sign up component as well. So I'm going to copy everything in here, create a new file in components and say Signup.js paste it all in and rename it accordingly.

Signup.js

import React, { Component } from 'react';

class Signup extends Component {
  render() {
    return (
      <div className='sign-up'>
        ...signup
      </div>
    )
  }
}

export default Signup;

Ok so I'm just going to highlight over in and just hit command + d and then just type in up, so it's all sign up now. Let's go ahead and go to our bootstrap.js file and include some routes to get to these. Okay we have sign in, let's copy that and let's replace this sign in with sign up and you'll see I have this auto import statement.

I'm going to hit return and you'll see it auto imported sign up. OK go ahead and copy this import signup and import signin.

bootstrap.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowerRouter, route, Switch } from 'react-router-dom';

import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

import 'bootstrap/dist/css/bootstrap.css';
import './style/main.scss';

import Signup from './components/Signup';
import Signin from './components/Signin';

funtion main() {
  ReactDOM.render(
    <Provider store={createStoreWtihMiddleware(reducers)}>
      <BrowserRouter>
        <Switch>
        <Route path='/' component={Signin}/>
        <Route path='/' component={Signup}/>
        </Switch>
      </BrowserRouter>
    </Provider>
    , document.querySelector('app-wrapper'));
}

document.addEventListener('DOMContentLoaded', main);

Now what we want to do is basically what I want to actually do is not have these files start with capital so I'm gonna get rid of the S and I'm going to rename these files to have lowercase s's.

Okay, I'm going to head back to my bootstrap and that should be good guys. So just make sure these don't have capitals and neither do these.

Now what I want to do is change this path to signup and change the sign in path to say exact. Now the reason we're doing exact is because technically sign up includes this / route. So it's going to render signin instead of signup. So just making clear that that needs to be exact.

Okay cool, that should give us some routes. Let's go ahead and go to our localhost. You'll see we're brought to signin initially which is what we want and then if you go to localhost:3000/signup your brought to sign up so that works. Let's go ahead and create a component to give us this header view now.

Now we're going to be using some redux to handle this and it's going to be a different approach. I'm not sure if I would use it this often but I think it's good to show you that it's a possibility so we're going to be creating it a specific way.

So let's go ahead and go to our components and create a new file and let's call it headerWrapper.js. Now before we do anything in here what I want to do is basically put the sign in and sign up components into their own folder.

So in components I'm going to create a new folder and say auth and then I'm going to drag both the signin.js and signup.js and it's going to say do you want to move it? I'm gonna hit do not ask me again to move it. Now it's going to say automatically update imports from moved files sign in.

Now the reason it's asking this is because we're importing it into bootstrap.js I'm going to say yes always update imports and then you'll see bootstrap is now not saved because it's changing this to /auth/signin instead of just /signin.

Now I'm going to move signup into auth and now you know kind of how that works with the auto imports. I'm going to say bootstrap and that should keep our app up and running and it should be good. Now I may or may not update the paths later on to something like /auth/signup but I don't think I'm going to, maybe though i'm not sure yet.

We have our auth folder and then we have a headerWrapper.js let's go ahead and paste in what we have in our sign up component into our headerWrapper so let's copy this and head over to headerWrapper and lets just paste that. All right, so basically the idea of this component is to render whatever we have inside of our headerWrapper into here okay.

So let's just change all these and I'll explain a little bit more what I'm trying to say, headerWrapper export default headerWrapper. And let's just say ...HeaderWrapper. And then right here lets say class name is header-wrapper okay cool. All right so that completes that component for now.

Let's go ahead and say in some brackets let's say this.props.children and that will render our children when we wrap anything with this component.

headerWrapper.js

import React, { Component } from 'react';

class HeaderWrapper extends Component {
  render() {
    return (
      <div className='header-wrapper'>
        ...HeaderWrapper
        {this.props.children}
      </div>
    )
  }
}

export default HeaderWrapper;

So let me show you what I mean, let's head over to our browser. And right now all we have is sign up right or sign in. What we want is to display this header regardless of which one we're at. You'll see if we're at login in the design if I hit not a member we're brought to the new user, except we also have the same header.

All right so let's just add in a couple of h1's here or something. Let's get rid of that ..headerWrapper and let's say h1 welcome to HOA manager! and a p tag of Please login to continue.

headerWrapper.js

import React, { Component } from 'react';

class HeaderWrapper extends Component {
  render() {
    return (
      <div className='header-wrapper'>
        <h1>Welcome to HOA Manager!</h1>
        <p>Please login to continue</p>
        {this.props.children}
      </div>
    )
  }
}

export default HeaderWrapper;

Now what I want to do is head to bootstrap.js and let's wrap all of our components with this. So what we're going to want to do is go to bootstrap.js and import our headerWrapper. Okay so right here above our sign ups, let's just say import HeaderWrapper from ./components/headerWrapper awesome now lets use it.

Let's head down here into our switch and let's basically take both of these routes and hit command X to keep them on a clipboard because we're going to paste them back in. Let's now type in header wrapper and close off like this kind of like we do with the switch, BrowserRouter, and Provider, and with divs whenever we do divs and stuff like.

Let's paste these routes back in and now you'll see that we're wrapping these. So we're still going to render either one of these components based on a route, except for now in our headerWrapper it's going to render that component as a child. So it's going to take signin or signup and put it in here in the {this.props.children}.

bootstrap.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowerRouter, route, Switch } from 'react-router-dom';

import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

import 'bootstrap/dist/css/bootstrap.css';
import './style/main.scss';

import Signup from './components/Signup';
import Signin from './components/Signin';

funtion main() {
  ReactDOM.render(
    <Provider store={createStoreWtihMiddleware(reducers)}>
      <BrowserRouter>
        <Switch (alias) class Route<T extends RouteProps = RouteProps>
          <HeaderWrapper>
            <Route path='/' component={Signin}/>
            <Route path='/' component={Signup}/>
          </HeaderWrapper>
        </Switch>
      </BrowserRouter>
    </Provider>
    , document.querySelector('app-wrapper'));
}

document.addEventListener('DOMContentLoaded', main);

So I just wrapped it with a HeaderWrapper. Let's go ahead and try it in browser. You'll see we have welcome and please login and then we have signin.

If we navigate to sign up you'll see we have sign up now.

Ok cool, so that's kind of an introduction to the HeaderWrapper component.

Let's go ahead and commit our code.

terminal

git status
git add .
git commit -m "setup auth routes and headerwrapper component"

Okay, I'll see you in the next video.

Resources

Source code