So the first thing we need to do is
set up the router to be able to actually
route to a certain files and routes.
So to do this, we're going to create a first route,
which we're going to type FlowRouter.route
This is the path
that we are creating a route for in a new
pass as a second
parameter an object.
And that with semi-colon.
And you can name the route, since it's going to be named Home.
Then put a comma
and the action function.
Take params as its argument
and we open that up. And I'm going to reference
here a function that we haven't yet
actually created but we're about to.
So, the function name is going to be renderView.
And then in here, I'm going to create the objects.
So this is going to be Home
and this is the React component that we are going to create.
So, basically we have a function here that we need to create
called renderView and we pass that at a component.
So, here we are going to create
function_renderView
and we are going to reference that object here as component.
And then we open it up.
Basically, all you have to do is type
React.
sorry ReactLayout.render
MainLayout and
we are going to pass it a few parameters, so.
Header is going to be
header component that we need to create.
Content is going to be
the component were passing into it.
And then footer is going to be
a footer component
that we need to create.
And then hit Save.
And this is all we need to do.
This betacode is going to render a header, a component and a footer.
So let's get started with the
the main layout.
So we're telling it here to render
this React component.
And pass these as parameters so we can actually reference
these components inside the main layout component
by typing this .props.
header, content, and footer. And we'll see these
in action here in just a moment.
So in Client, I'm going to in components,
I'm going to create a new React class
called MainLayout.jsx
And here,
basically we are going to get started with how to create
React components. So, the first thing you need to do
is name the component.
Mine is going to be called MainLayout
and we see that's equal to React.createClass
and we open that up with brackets and curly brackets.
So, all we really need here is to render function
and that's all we are going to do at this point, so.
Type in render
and then in the render function,
you're going to put return.
And you're going to open up just regular brackets.
And this is a bit odd, I know,
but this is how it's done, so. Here we can actually
print html
and it's going to,
it's going to render what we tell it to.
So we always need wrap
all elements under a parent container.
So I wouldn't be able to say return two divs like this,
two siblings, it wouldn't work. So we do need to wrap it.
So here, we are going to
to reference the props that came in, land so
As an example, I'm going to add another prop here called
LogThis
and it's just going to be a string.
This is a property and I'm going to save that.
So in the render function, you can access that
by typing console.log
and then this.props.logThis
and
save that.
And I'm going to go the app here and I'm going to refresh it.
And you are going to see two things happening.
The First, is that Home is not defined.
And that's because
we haven't created a component yet.
So we still need to do a little bit of work.
In order for this to work.