Click here to subscribe for more videos like this!
Hey guys, welcome back! So, I’m going to be showing you guys how to use Meteor with React and Flow Router, and I find that there’s not too much information out there on this combination of tools and so it makes sense to give you guys that information. If you’re following along this course anyway you know, I think it’s quite reasonable to assume that some of you will at least are going to need this information. And even if you didn’t know you needed it, maybe you can go ahead and use Meteor in your next project. So in the last video, we created a project through terminal from Meteor. So what I’m going to do now is I’m going to open up a terminal, and I’m going to change directory to Projects, and into todo. And so, Meteor automatically creates a few files for you first. So let’s go ahead and open this up in Webstorm. I’m going to click Open, and down into Projects, to todo, hit okay, and Webstorm is going to open up the Project. And we’ve got the Project View on the left hand side. So the first thing we’re going to do is delete these files because we don’t need them. Now we’re going to start creating some directories because in Meteor, projects can get fairly large because you’re going to be working with a lot of files, and so organization is a huge benefit here. Let’s right click and create a directory called Client. I’m going to create another directory called Lib, and one more for Server. Now the Client’s directory is going to contain everything that is going to be available to the client. So this is where your templates and stuff are going to go. So in Client, I’m going to create a new directory called Components, and this is where we are going to store the React components. Now in Lib what I’m going to do is create a file called Router.jsx, and in the Router file, we’re going to be defining routes for Flow Router. So before we get to that, we actually need to add some Packages Project. So in the Directory here in terminal, just type “meteor add react kadira:react-layout and kadira:flow-router” and hit enter. There we go, so we’ve got everything added in here. I was having an issue with Jet Brains IDEs and basically it was a conflict with open JDK, and so in order to resolve those, I’ve installed Oracle Java. And basically what was happening was, when you start typing something, this auto suggestion box pops up and that was causing the program to hang. And so to resolve that, what I had to do was, add a repository to my system, and I’m just going to search “webupd8 java”, and you’re going to go to the launchpad.net page, and in here just copy this archive url there ppa:webupd8team/java, and in terminal you can run “sudo add-apt-repository and then the repository name. And you can actually start connecting multiple commands together. So sudo-apt-get update, and the way you connect commands together is by using two ampersands “&&” between the commands. Now it basically says run command one and when that’s done if it’s successful run command two, and if that’s done, run the next command, which is going to be “sudo apt-get install oracle-java8-installer”. And so you are going to run that and that should resolve the issues with Jet Brains IDEs if you’re having the same as I was. So let’s get back to in here. So let’s start making some routes.
