Rendering a React component within Blaze


#1

Just to test out a small section:

Will someone please help me on this one? I’m on Meteor 1.3.5.1. I installed:

npm install --save react react-dom
meteor add react-template-helper

This should be all I need to get started right?

Or do I also need these two in order to render the component?

meteor add static-html

or

react-mounter

I created a folder for my react components, and I’m also showing where the target template is located in relation in case it matters somehow with imports:

\app
  \client
    \react
      \components
        hello.jsx
    \views
      \messages
        messages-helpers.js
        messages.html

In my hello.jsx file. In the official Meteor guide, there is no example I could find where it showed the actual component definition that was added to a Blaze template, so I took this from an example further up the page.

import React from 'react';

export default class HelloWorld extends React.Component {
  render() {
    return (
      <h1>Hello World</h1>
    );
  }
}

Relevant code within the Blaze helper. Here, I do not have ANY import in any helpers so far. This is the first as I’m just following the Meteor guide.

import HelloWorld from './react/components/hello.jsx';

Template.messages.helpers({
  HelloWorld() {
    return HelloWorld;
  },
  ...

And messages.html.

<template name="messages">
 ...
<li>
 {{> React component=HelloWorld}}
</li>
 ...

Of course I’m using Flow Router, with the route something like so:

FlowRouter.route( '/messages', {
  action: function() {
    BlazeLayout.render( 'TheLayout', { main: 'messages' } ); 
  },
  name: 'messages.view'
});

The layout like so:

<template name="TheLayout">
    ...
    {{> Template.dynamic template=main}}
    ...
</template>

It’s not working. Nothing renders within the li:

<li></li>

where I was expecting:

<li><h1> hello world </h1></li>

All other html renders fine within the Blaze template.

I get the following error:

Error: In template "messages", call to {{> React ... }} missing component argument.

Note: when searching for the error, I found the following. Although, my code is not exactly the same:


I also get this error:

Uncaught SyntaxError: Unexpected token import

And the line this is referring to is:

import HelloWorld from '.client/react/components/hello.jsx';

Any help is appreciated!


#2

It still is normal Blaze.
You are not rendering you “messages” template anywhere. You need to include it in your root template with usual {{> messages}}
It seems you have mixed the code from two unrelated tutorials.
You need one root blaze template.
Then you need to pass the react component to this template like you have done with the regular blaze helper (by the way, no need to include “./messages.hmtl” in your messages-helpers.js file).
No need to have a div id=app (that would be a target to a direct rendering of a react component in a react only project).


#3

I updated my question, Added an error I found, I removed some of the import (but the reference to the React component), I remove the div id=“app” and added the Route and Layout for example.

I’m not sure I follow. The message template renders fine, it’s the React component that doesn’t render within the Blaze template. I have {{> React component=HelloWorld }} within the Blaze template, I thought that was enough.

I’m not sure I understand. I added my existing blaze layout and the template.

This is true, I did mix them, because the Meteor guide didn’t have a complete example.


#4

Bear with me, i’m writing you an Hello World repo.


#5

Here you go


It’s in Meteor 1.4, but that’s the same thing with 1.3
I have used a stateless componnent because i like that but you can do the same thing with an ES6 class or with React.createClass_


#6

Thank you very much @vjau! I’ll get back to you on how it goes.


#7

@vjau, the only difference I see is there is no FlowRouter, no Layout defined, and you have the target Blaze template that holds the React component embedded directly inside the <body> tag. Oh, and you have meteor-node-stubs as a dependency.

But I was able to get your repo to run.

I’m modifying the repo to get it closer to my setup now and will report back.


#8

@vjau, I forgot to branch before making my changes so I can’t PR. If you’ll give me write permission to that repo I can sync. Or I’ll start a new one.

Anyhow, I found that after setting up everything with the templates, layout, etc. it works on your setup but not mine.


#9

Don’t put your react component in li, it must not have siblings.

There is a syntax error here with the .client


#10

I created a new repo that has the changes to your base code – and it works. I can’t figure out what the issue is with my main repo yet. Thank you very much!


#11

I moved the component out into its own div:

<template name="messages">
  <div>{{> React component = HelloComp}}</div>

I changed the template imports and helper name:

import { Template } from 'meteor/templating';

import './messages.html';
import hello from 'client/react/components/hello.jsx';

Template.messages.helpers({
  HelloComp() {
    return hello;
  },

I changed the component to match yours:

import React from 'react'

export default (props)=>{
  return (
    <div>
      Hello World !
    </div>
  );
};

#12

I downloaded you repo, and it works out of the box.
Perhaps a problem with your Meteor intallation ? (i run latest version of 1.4)


#13

The repo I added works on my box too. I changed the repo you downloaded to match up with my setup is all I really did.

It’s my main repo that doesn’t work. But my main repo is on 1.3.5.1 so maybe there’s an issue there.


#14

It might be because of this issue with imports pre 1.4.


#15

I read this post on migrating to 1.4. Hoping to get React working I added the following:

meteor add ecmascript

Afterwards, I got the following after doing a meteor run


Unable to resolve some modules:                                                                                                                                                                                                                                                                                                                                                           
                                                                                                                                                                                                                                                                                                                                                                                          
  "client/imports/hello.jsx" in /Users/aadams/Meteors/dashboard/client/views/admin/messages/message-helpers.js (web.browser)                                                                                                                                                                                                                                             
                                                                                                                                                                                                                                                                                                                                                                                          
If you notice problems related to these missing modules, consider running:                                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                                                                                                          
  meteor npm install --save client

Yet even after receiving this message the app is running (although still not rendering the React component).


#16

This import is not valid.
What you wrote means “import from the react/components folder from npm module named client”.
You want to do a local import.
So you must use … or . relative to the importing file.
Based on the source tree you are showing in your first post, you must write it like that :
import hello from '../../react/components/hello.jsx"

Also Meteor support another syntax which is
import hello from "/app/client/react/components/hello.jsx"

but it is not supported out of the box by most other tools.


#17

That worked, it was the path! Thank you! I built my first React component – yeah!


#18

Just to note, I found that if I switch back to Meteor 1.3.5.1 the React component no longer renders. I get the old errors I mentioned above again.