I'm going to navigate to my desktop and put it there this time and I'm going to type in js-generate, I'm going to select react-redux-router, and say ecom.

I'm going to cd into ecom. First, let's just open it up in our editor. If you don't I'm a built-in terminal in your editor, then keep this terminal window open and use it. I have a built-in terminal obviously, in VS Code, so I'm going to use that.

Now, what I'm going to do is I'm just going to hit command + j to go to my terminal. There's another command to just go straight to the terminal, but I forgot it. Let's type in npm install and then before we hit return let's go to .gitignore.example and let's take the .example off.

If you hit return already, it doesn't matter. You might have to refresh source control to get that 5K away. Go ahead and run npm install and let that run. Now, while that's running, let's just go change a few things.

Let's go to src, let's go into components, and then let's go into app.js. What I want to do here is rename this component. I don't want it to be called app. Let's call it something like BaseGrid. We want a grid for all of our components. Let's call it Layout.

We want to do all this, except for we want to render our children components. So let's say:

app.js

import React, { Component } from 'react';

export default Layout extends Component {
  render() {
    return (
      <div>
        <h1>DevCamp React Starter</h1>
        {...this.props.children}
      </div>
    );
  }
}

Let's leave this here for now. Let's change it to ecom, but let's leave the H1, even though we will get rid of it. We just want to verify that things are working. I'm going to move this export to the bottom here. So I'm going to say:

app.js

import React, { Component } from 'react';

class Layout extends Component {
  render() {
    return (
      <div>
        <h1>ecom</h1>
        {...this.props.children}
      </div>
    );
  }
}

export default Layout;

Then I'm going to rename the file and changeup that component a bit. Let's go to app.js and rename it to layout.js. Let's go to bootstrap.js, and let's change the import App to import Layout from components/layout. Now, I want to do is move this layout component down here.

The next thing I want to do is rename this App right here in our BrowserRouter tags. Let's name it to Layout. That should be good.

It's still not done. That's weird. I just have a slow internet right now. If that's done for you just run npm start and look at it in the browser. I was going to import a couple of things, but it's about done. Run npm run start. If you are getting these warnings. Don't worry about it.

If this was a production application, you might want to look at that, but not for learning. Right now, we're learning React. That's running now. Make sure it's up and running. If it's not you might have another project running on 3000, or you might have made an error with our naming. It looks like I did.

It says You may need an appropriate loader to handle this file type. It looks like I didn't provide children, so that's what happened. Let's got to layout.js and I'm going to comment out this line. Now, we've compiled successfully.

I'm going to go to my browser and run localhost:3000, and we have it here. Basically, that's how we set it up a bit. Nothing really new here.

Let's go back to VS Code, close the terminal, and let's get this back in here. Obviously, this is going to generate an error but not if we go into our bootstrap.js and provide it with children. Let's go to this Layout component, and instead of closing it off like that, let's close it off like that.

bootstrap.js

function main() {
  ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}>
      <BrowserRouter>
        <Layout>
          <Route path="/" exact component={Home}></Route>
        </Layout>
      </BrowserRouter>
    </Provider>
    , document.querySelector('.app-wrapper'));
}

Like what we're doing with BrowserRouter and what we always do with divs. This way we can put children in here. So I'm going to say:

bootstrap.js

function main() {
  ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}>
      <BrowserRouter>
        <Layout>
          <p>hey this is a child component</p>
          <h2>Hey there</h2>
        </Layout>
      </BrowserRouter>
    </Provider>
    , document.querySelector('.app-wrapper'));
}

Let's try this out. I want to go to Chrome and it looks like we have an error. Let's go back to VS Code, and let's go to layout.js and let's get rid of the ... before this.props.children. Let's go back to our application here, and they're loading there properly.

That's how you set that up. Let's go ahead and go to our code real quick. Let's get rid of this H1 because we know that's working. Let's go to our bootstrap.js and let's get rid of this p and H2 tag. That's the basic setup.

bootstrap.js

function main() {
  ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}>
      <BrowserRouter>
        <Layout>

        </Layout>
      </BrowserRouter>
    </Provider>
    , document.querySelector('.app-wrapper'));
}

In the next video, let's get into creating our header here and our navigation bar. You'll notice that we use it throughout our application. You'll see that it's basically everywhere in the app. We'll talk about that in the next video.

Let's go to our code and let's commit it.

Terminal

git init
git status
git add .
git commit -m "setup project"

I'll let you handle GitHub and pushing all of that. You should I'm getting that by now. I shouldn't need to be walk you through it. The same goes for Heroku. Let's go ahead and hop into the next video, where we will develop those navigation and header components. See you then.

Resources

• Source Code