How to setup a meteor app for react

Photo by Carlos Muza on Unsplash

Meteor ships by default with the blaze template engine. I use react so I will explain how to quickly setup a new meteor app using react. The official guide and tutorials gloss over a few details and do not make it as dead simple as it could be — that’s what this post is for.

These are the minimum changes required to use react in meteor. I also use the file structure recommended by The Meteor Guide. It is a minimalist setup and only includes the bare essentials.

Create a new meteor app and run it

From the command line run:

meteor create --bare newapp
cd newapp
meteor

Add the required react packages

Again from the command line:

meteor npm install --save react react-dom

Create the main App component

This is the main component and entry point for the app. Create it at imports/ui/App.jsx

import React from 'react'
export default class App extends React.Component {
render() {
return (
<h1>Main App Component</h1>
)
}
}

Set the startup component

We will keep most of our app code in the imports folder and use imports at the meteor entry point files to reference the code we need.

Create client/main.js and paste in the following:

import '../imports/startup/client'

This imports the file index.js from the /imports/startup/client folder. Now we will create that file.

Create the file imports/startup/client/index.js and paste:

import React from 'react'
import { Meteor } from 'meteor/meteor'
import { render } from 'react-dom'
import App from '../../ui/App'
Meteor.startup(() => {
render(<App />, document.getElementById('app'))
})

Notice in the above code we render the App component to an element with the id of app. Let’s set that tag in the body tag of client/main.html.

Create the file client/main.html and paste:

<head>
<title>NewApp</title>
</head>
<body>
<div id="app"></div>
</body>

You should now have a running meteor app which uses react for the UI.

Remove the packages we don’t need

From the command line run:

meteor remove blaze-html-templates

Since the above command will remove the templating package, we need to add the static-html package to render the needed html in our app.

meteor add static-html

All done

You now have a minimalist meteor app with react for the UI. Your file structure should look like this:

Minimal meteor and react folder structure

You can find the full project code here:
https://github.com/scoozza/meteor-react-minimalist

Thanks for reading.

If you enjoyed this story then please hit the ♡ button. Follow me for more JavaScript, web and mobile app development posts.