How to setup a meteor app for react

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
meteorAdd the required react packages
Again from the command line:
meteor npm install --save react react-domCreate 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-templatesSince 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-htmlAll done
You now have a minimalist meteor app with react for the UI. Your file structure should look like this:

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.
