• Meteor
  • Tutorial

Using React With Meteor

In this tutorial, I'd like to show you how you can set up your Meteor projects to use React. We'll start by creating a Meteor app just like we always do. And then change into that Meteor directory, and we'll upgrade it to use the latest version or the latest release candidate of Meteor.

I want to take advantage age of the latest React features which are available in version 1.2 of Meteor. But since that hasn't been released yet, at the time of this video we need to use release candidate 11. So you'll use the update command with a release flag to provide this release. And as soon as 1.2 is released you don't have to do this anymore. You can just create a new project, and it will be the latest version of Meteor automatically.

Once that process is complete, we're going to add the ECMAscript package, which will give us the ability to write [INAUDIBLE]. Then we'll add the React package so that we can get access to the JSX and React runtime packages to write our views in React. Next up, we can just blow away the standard files they come with Meteor, because we're going to create our own. So to do that, I can use the rm, or remove, command. And we remove anything that starts with app.

Next, I'll create a few folders. Now, you have some flexibility here. You can create the folder structure the way that you would like. So I'm to propose a structure and just take it as advice.

So let's make a few directories. One of them will be Client. This is where we'll put all our browser code, and Server for all the server code. I'm going to create a new folder called Views for the React templates and another one for our CSS.

So if we look at our folder now, you should see the four new folders that we just created. Now, you might be wondering why the Views folder is not inside of the client directory.

The reason that I have a preference for this is because Views really don't need to only be rendered in the browser. They could also be rendered on their server at some point. It's just not easily supported at the moment. But I still like to put Views as its own folder in the root of the project directory for that reason.

Go ahead and start up the Meteor server and open up the project in your favorite editor. The first thing I'd like to do is to create a layout component. So I'm going to create a new View under the Views folder. And I'll just name it Layout. And notice I'm going to give it the extension JSX.

The layout will be the master layout for the entire application. So each page that we go to will reuse this layout again and again. To create it, I'll create a global variable called Layout. And we'll assign it to the result of calling the create class method of the React namespace.

Now, all React classes require that you define a render method like this. And that render method can return some JSX tags. Let's start off by just rendering "hello, world" to the screen like this.

When I save the file, it's not going to render to the page quite yet, because we need to tell React to render the component ourselves. Inside of the client folder, create another file called app.JSX. I'm going to give it the JSX extension, because we'll be writing JSX tags directly in this JavaScript file.

We're putting the app.JSX in the client folder because Meteor doesn't support server-side rendering quite yet. So inside of a Meteor start up callback we'll tell React to render the component to the page by calling the render method of react. And what that requires is a component. So we can use the JSX tag like this and just name the component and then where on the page we want to render it to.

In this case, we're going to render the layout to the document body. And we know the document body is available because we put this code inside of this startup callback. And so Meteor guarantees us that the HTML document is ready at this time.

When I save that file the Hello, world H1 tag is rendered to the page. So far this layout isn't very useful, because we can't render other views into it, which is really what a layout is supposed to be. So instead of hard coding hello, world, I can tell it to render out a child template. And the way to do that is to say this.props.children. So children is a special property on React components that will include all the children components that should be part of this rendering.

Let's create another view now called Home. I'll give it the JSX extension, just like before. And I'll give it a global variable assignment to the variable named home. Just like before, we'll define a render method, which will return some JSX tags. Inside of here, I'll put the H3 tag, along with "hello, world." And generally with components, you have a root div tag, because React requires that there be at least one root tag for your component. We could've made it an H3 tag, but in general I'll make it a div tag.

Now we need to tell React to render this home component inside of our layout. So go back to the client app.JSX file. See how we have the layout tag inside of the render method? This time I'm going to create a variable called app, just to make this easier to read.

And inside of the layout template I'm going to render the home template. And I'll use the words template and component interchangeably, since we're working with Meteor and React together.

Then inside of the render call, the first parameter, instead of being this tag, will be the app. Now you see hello, world render to the page again. And if you click Inspect Elements and take a look at the elements on the page, notice we have our body tag, and then the layout, which corresponds to this JSX tag here. And inside the layout we have our div and the H3 tag for hello, world. That corresponds to this component here.

So we're rendering a hierarchy of nodes using JSX syntax. So far, were only rendering one layout and one React component into the page. But if you have a multi-page app, this isn't going to be very useful. But hopefully you can see that it's very easy to render React components into the page, regardless of whether you're using routing or not, simply by calling the render method of React.

Let's add Iron Router. And I'll show you how to do this. I'll add Iron Router. And then we'll go back and create a route for this home page.

I'll add another folder now called Lib so that we can add a file called routes.JSX. And this is where we'll create our routes. And I put it inside the Lib directory so that the routes are available on the client and on the server, in case we want to have server-side rendering or server-side routes as well.

To save some time, I went ahead and pasted in some code to create a route for the home page. And notice I'm using the fat arrow syntax of ES6, and inside of this route function, creating the page using a JSX markup, and then rendering it to the document body-- very similar to what we had inside of our startup callback in the app.JX file. Finally, since we're not using the app.JX to render this page anymore, we can go ahead and get rid of the startup callback here. When we say that, if everything is working correctly, you should still see hello, world printed to the page or rendered to the page.

Now if you're using Iron Router, you can put this code inside of the action function for the route, if you're using controllers. Hopefully, you can also see that if you're using any other kind of routing solution, it should be quite simple to integrate react. Now, with Iron Router, you can see that we're not using this.render, which is normally how we render inside of our action function. Hopefully, this shows you that it would be quite simple to integrate that into Iron Router. And even if it doesn't get integrated completely, you can still do it yourself, simply by using the render method of the React name space yourself.

I hope this gave you a good sense of how you can integrate React into your Meteor applications.