So in Components,
let's create a new file.
Let's call this Header.jsx
And I'm going to open it up by typing Header=React.createClass
open up that up as usual.
And in the render function here,
I'm just going to return a bit of boot strap
and so,
div class, actually, I'm just going to wrap up that in the div first.
So in this render function you can't
just type div class= you know whatever, because
class is use to java script so we actually need to type class name.
And then we can get the class so I'm just going to call it Navbar
Navbar-default and close that.
And I'm just going to div class
name=container
put up a boot strap container in there
and then
div className=navbar-brand.
Actually this shouldn't be an A element.
And it's just going to say
My Site Name, like that.
So if we save that, the header is now created.
So now, I'm going to create the Footer.
And the same thing would go for the Footer.
But I'm not going to put anything in here.
I'm just going to have a return a div, so,
Footer=React.createClass
I'm going to open that up.
Going to open the render function and return div.
Like that.
So now we need to create the Home component.
And the reason why is we've referenced Home,
header and footer we've got footer and header created
we still need this component which we're passing in as Home.
So we need to create the Home component.
So I'm going to create a new directory here
to keep things organized, I'm going to call it Home.
And in that directory I'm going to create a file called Home.jsx
And I'm going to do the same thing I'm going to name the component
Home=React.createClass
Right now, I'm just going to render return
div, actually h1
I'm just going to say Hello World
and hit Save.
So to come back here and refresh this page
we're going to start to see it take shape.
Because we've created all the components that we're referencing.
And so, the first thing I'd like to draw your attention to
is that it... we open this up.
So in the, where was it, the main layout,
I console.log(this.props.LogThis)
which I passed into this class as a property.
So that's basically what's happening we're passing in components
to the main layout components.
So, I would reference header,
content and footer in the very same way.
Except,
what we could do is if you want to
render the content of a property,
you put it in single curly brackets.
So it's like blaze except you're not using two
curly brackets, you're just using one and you just type it.
So let's type this.props.header
this.props. home or content rather
we're referencing that here,
we're setting it,
the property is content, so we're going to reference it like that.
And then the footer is
so, this,props.footer
We're going to save this
and this is our main layout.
So the header, if I
for instance made a route
called
FlowRouter.route/page
and open up curly brackets here,
let's name it a Page
and the action
is going to be renderView
and let's say I had a component named
ThisPage
I would do that and it would render
that component
into the main layout
with the header
that component and then the footer enrolls in passing
this just as a proof content.
We're not going to do that.
So now,
we've got this.
But boot strap does not appear to be working and I think maybe
maybe, I've forgotten
to add boot strap here.
I don't think I got added.
Maybe in the last video I know I added it.
Maybe I canceled that a bit for some reason, so.
Let's go ahead and get that added, so, control C here,
meteor add twbs:bootstrap
and hit Enter.
Alright.
I'm going to run Meteor again.
And the page refreshes automatically because it's Meteor.