Click here to subscribe for more videos like this!
Alright guys, this is getting closer to done. We now have a new working way to insert posts and also, view the posts here. One thing you’ll notice is that we’ve got posts by two different people. So, how Meteor should handle this in React and Flow Router. We’re going to modify our home component a little bit to be able to use a different route, so I’m going to go on my router file here FlowRouter and let’s name the route posts-by and then user. So, the colon here basically means that while post is going to be the name of a variable, and we can use that variable by accessing params. So, what I’m going to do is name the route Posts and the action we’re going to pass Params to the action is going to be renderView I’m going to reuse the home component here, but I’m also going to pass it in with user property and that’s going to be equal to params.user and so now, I’m going to close this component and end that with semi colon. I actually need to that there It got a little displaced there. Silly issue. When we create new routes, we need to type Flow Router.route Alright. What we need to do now is we need to make this conditional if we’re on basically in the router, we’re passing a user property here, but we’re not here so we can use this to identify if we’re on this route. So, what we’re going to do here is when we get post method I’m going to say if this.props.user we’re going to return Posts.find where the user is equal to this.props.user we’re going to fetch those else, we’re just going to return all the posts. So, if I go back here, and refresh this, I’m going to see when I view posts by Nick, that these are the only results I get, and when I view posts by Pete, these are the only posts I get. And still accessing the home page I will get all of the posts. And you can see how you can really reuse components here to be able to serve conditional data. Now, that’s basically, all Meteor is. It’s very simple and straightforward. I use it with React and Flow Router, I really recommend it. It’s much faster, it’s basically quicker to do everything. It’s quicker to develop, It’s quicker to browse. It makes your app faster in general. I hope you guys found this tutorial informative. I know it’s a bit longer than the other ones. And so hopefully, you know, the next few videos will be shorter, I think they will. And I’m going to actually provide this code to you guys. through GitHub, so right now, we’re going to be combining a bit of what we’ve been doing. So, I’m going to GitHub.com I’m going to create a new repository here, and I’m going to call it Meteor React Tutorial. And let’s initialize it with a Readme file, and then all the usual stuff. So, right in the directory here git init, git remote, add origin, I need to paste that URL here. I’m going to close WebStorm, so that we can get rid of the .idea directory. So, we can just use the regular rm -rf .idea, there. And then we’re going to run git -ignore/* git add -A git commit -m the message is going to be Example meteor react stuff and git push origin master. Here we go, if I refresh this, we should see, here is the entire Meteor project that we just created. You can find it a GitHub.com/nickgermaine/meteor-react-tutorial Thanks for watching this video, I hope you guys found it informative, if a bit long, hopefully, the next set of videos should be a bit shorter.
