Click here to subscribe for more videos like this!
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 as 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.
