Tag: development

Posted on by

Continuing with our Meteor/React Project

Click here to subscribe for more videos like this!

So in Components, let’s create a new file. Let’s call this Header.jsx and I’m going to open it up by typing Header=React.createClass open up that up as usual. And in the render function here, I’m just going to return a bit of bootstrap and so, div class, actually, I’m just going to wrap up that in the div first. So in this render function you can’t just type div class= you know whatever, because class is use to java script so we actually need to type class name. And then we can get the class so I’m just going to call it Navbar Navbar-default and close that. And I’m just going to div class name=container put up a bootstrap container in there and then div className=navbar-brand. Actually this shouldn’t be an A element. And it’s just going to say My Site Name, like that. So if we save that, the header is now created. So now, I’m going to create the Footer. And the same thing would go for the Footer. But I’m not going to put anything in here. I’m just going to have a return a div, so, Footer=React.createClass I’m going to open that up. Going to open the render function and return div. Like that. So now we need to create the Home component. And the reason why is we’ve referenced Home, header and footer we’ve got footer and header created we still need this component which we’re passing in as Home. So we need to create the Home component. So I’m going to create a new directory here to keep things organized, I’m going to call it Home. And in that directory I’m going to create a file called Home.jsx snd I’m going to do the same thing I’m going to name the component Home=React.createClass Right now, I’m just going to render return div, actually h1 I’m just going to say Hello World and hit Save. So to come back here and refresh this page we’re going to start to see it take shape. Because we’ve created all the components that we’re referencing. And so, the first thing I’d like to draw your attention to is that it…we open this up. So in the, where was it, the main layout, I console.log(this.props.LogThis) which I passed into this class as a property. So that’s basically what’s happening we’re passing in components to the main layout components. So, I would reference header, content and footer in the very same way. Except, what we could do is if you want to render the content of a property, you put it in single curly brackets. So it’s like blaze except you’re not using two curly brackets, you’re just using one and you just type it. So let’s type this.props.header this.props. home or content rather we’re referencing that here, we’re setting it, the property is content, so we’re going to reference it like that. And then the footer is so, this,props.footer We’re going to save thisand this is our main layout. So the header, if I for instance made a route called FlowRouter.route/page and open up curly brackets here, let’s name it a Page and the action is going to be renderView and let’s say I had a component named ThisPage I would do that and it would render that component into the main layout with the header that component and then the footer enrolls in passing this just as a proof content. We’re not going to do that. So now, we’ve got this. But bootstrap does not appear to be working and I think maybe, I’ve forgotten to add bootstrap here. I don’t think I got added. Maybe in the last video I know I added it. Maybe I canceled that a bit for some reason, so. Let’s go ahead and get that added, so, control C here, meteor add twbs:bootstrap and hit Enter. Alright. I’m going to run Meteor again. And the page refreshes automatically because it’s Meteor.

Posted on by

How to use FlowRouter in your next Meteor Project

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.

Posted on by

How to use React with your next Meteor Project

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.

Posted on by

Meteor.js Installation/Setup & Where to Find Packages

Click here to subscribe for more videos like this!

Hey guys, I want to touch briefly on Meteor.js, today in this video, and a little bit about how to use it. First thing you’re going to do is in a Google search just type “install meteor.” It’s going to give us the location of the Meteor installer to download. If you’re on OSX or Linux, just copy this command “curl https://install.meteor.com/ | sh“ open up Terminal, clear it out, and then paste it in here. If you get this error, it means that you don’t have curl installed so you need to install it. So sudo apt-get install curl” and once curl is setup you can run the previous command again. And it’s going to download Meteor and install it. I already have Meteor installed and so it’s removing my existing meteor installation, and it’s going to download a new one. So, when Meteor is done installing it gives you a notice here, how to get started. So, let’s just create an app, do I have a projects directory already, I do. So, I want to change directory to projects and I’m going to type, Meteor, create to do and it’s going to create project and a project directory in my current directory called “to do”. So, I’m going to change directory, and then if I list the directory Meteor has created the three files to get you started. So I can type “meteor” and it’s going to launch the program on port 3000, there we go. So, once again, this message means the app has been launched, so you can go to local hosts on port 3000 and this is our Meteor app. It’s got an event handler here for the click me button, which counts the times it’s been pressed, but that doesn’t really look to great. So I’m going to close this here, show you how you add packages to Meteor. So you type “meteor add” and then the package name. So you can browse Meteor packages by going to Atmospherejs.com, and if I were looking for say, bootstrap, I would…there is a lot here. However, the official bootstrap module or package is “add twbs:” stands for twitter bootstrap and then “bootstrap”. So, when I add that to my project like this, and let me go into the filemanager here, into projects, and to do, and you’ll going to see these three files that it created for us. But if you hit Control+H you’re going to also see a hidden directory entitled Meteor, and this is where it stores the packages that we add, and some internal Meteor stuff as well. So, I’m not going into that. These are the files that you’ll be working in with Meteor so you can open for instance, the HTML file with the “gedit” here we go. And you’ll see, this is the mark up. So, Meteor works with templates a lot. This isn’t an in depth tutorial, but more about how to get started. Meteor has a pretty awesome tutorial on their website. Just go to meteor.com and you can access the documentation, reference points, and the tutorial to get you started. So, that’s the basic usage of Meteor in the command line. Typically, it’s just Meteor create in the App name, and once you’re on the app directory just run Meteor to run the application, and you can use the Meteor add or Meteor remove, if you want to remove a package, add to add a package and then the package name. So, thanks for reading this and I hope you guys found it informative and a good place to start with Meteor. A selling point for Meteor is the fact that realtime interactions are built into its core. So, you no longer have to fake it, with Javascript, Ajax calls to PHP scripts, everything is done in Javascript, it’s all realtime. So, It’s awesome to work with and it makes things easy as well. So, check that out, if you’re into web application development at all.