Introduction

Meteor has become the go-to Javascript framework for our team. We use it in combination with React on the front-end. I thought I would write a quick tutorial to get started with Meteor + React. In addition, I'll also touch on FlowRouter for the routing. If you do not have Meteor installed yet, you can follow the instructions from this page

Creating the app

You're back? Good, let's get started. First thing to do is creating an new Meteor application. We do this with the following command:

meteor create <nameOfYourApp>

Once this is done, you have a new Meteor application inside the 'nameOfYourApp' folder.

imports folder

We will create a folder named imports at the top of our new application. imports is a special folder in Meteor. Files inside will only be loaded if an import statement is found to import them.

client/main.js and client/main.html

You will remove everything from those two files located in the client folder. By default, Meteor uses the Blaze templates. We won't need it. Replace the contents of main.html with the following:

<head></head>
<body>
  <div id='root'></div>  
</body>

Nothing fancy here, just preparing for React.

Add react and react-dom

We are going to need those:

meteor npm install --save react react-dom

Note: Inside a Meteor application, when installing new packages, prefix your commands with meteor.

First Component

For clarity, I added a /ui folder inside my /imports folder. I like to separate the client code and the server code. You don't have to do this though. Inside this /ui folder, I created my first component App.jsx:

import React from 'react'

const App = () => {
  return 'Home'
}

export default App

Again, nothing crazy, just returning a simple string.

Updating our client/main.js accordingly

Our html file is ready, we need to write our code to render our component. This is basic React, it goes something like this:


import React from 'react'
import { Meteor } from 'meteor/meteor'
import { render } from 'react-dom'

import App from '/imports/ui/App'

Meteor.startup(() => {
  render( <App />, document.getElementById('root'))
})

The code inside Meteor.startup() will run when our application starts.

You can launch your app with meteor, go to localhost:3000 and see our component properly rendered. Great, now you can use Meteor with React.

Implementing FlowRouter

In this part, we will add a router by using the FlowRouter package. You can install it with:

meteor add kadira:flow-router

Packages inside the Meteor environment are installed by using meteor add. You can remove them with meteor remove.

We will also need the react-mouter package to mount a layout for our routes:

meteor npm install --save react-mounter

Configuring our routes

We will define our routes in the /client folder, in a file called routes.jsx:

import React from 'react'
import { FlowRouter } from 'meteor/kadira:flow-router'
import { mount } from 'react-mounter'

import App from '/imports/ui/App'
import HomePage from '/imports/ui/HomePage'
import AboutPage from '/imports/ui/AboutPage'

FlowRouter.route('/', {
  name: 'Home',
  action(){
    mount( App, {
      content: <HomePage />
    })
  }
})

FlowRouter.route('/about', {
  name: 'About',
  action(){
    mount( App, {
      content: <AboutPage />
    })
  }
})

We define routes with FlowRouter.route(). The first argument is the path of the route. We want '/' and '/about' here. Then, we give it a name and we use the react-mounter mount method inside the action() method. The mount method takes the layout as the first parameter. In my example, the component App that we created earlier will be used for that purpose. It will hold the routes content. Then, we specify which component should be rendered inside that layout. The component HomePage will be rendered if the path is '/', and AboutPage will be rendered at the path '/about'.

What component I am rendering will be accessible in App with this.props.content because I chose the key name 'content'. You are free to choose the name you want.

Adapting our App.jsx component

Our App component now will look like this:

import React from 'react'

const App = props => {
  return props.content
}

export default App

HomePage and AboutPage components

Finally, we need to create our two components AboutPage and HomePage:


// /imports/ui/HomePage.jsx
import React from 'react'

const HomePage = () => {
  return 'This is the homepage'
}

export default HomePage

// /imports/ui/AboutPage.jsx
import React from 'react'

const AboutPage = () => {
  return 'This is the about page'
}

export default AboutPage

And that's it. You now have two routes in your application. Have fun!

Meteor, React and FlowRouter: Quick setup

Introduction

Creating the app

Implementing FlowRouter