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
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 video 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.