Meteor, React and FlowRouter: Quick setup
Tags: meteor, react
Published: 2017-10-22 18:00:27

---
title: "Meteor, React and FlowRouter: Quick setup"
published: true
description: 
tags: meteor, react
cover_image: https://qph.ec.quoracdn.net/main-qimg-8be9b52bd0b46ede471296514d1703c0
---

## 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 <a href='https://www.meteor.com/install'>page</a>


## 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:

```html
<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:

```javascript
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:

```javascript

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:

```javascript
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:

```javascript
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:

```javascript

// /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!