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!
Top comments (0)