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!