Dramatically simplify your React code

Amazing the things you forget to include in the docs.


Look like you extracting Tracker from Meteor. Why don’t you publish it as separate NPM package?

Last question, is this possible to render HTML directly?

With JSX, we use dangerouslySetInnerHTML which is inconvenient.

It would be great to have a simple example also for meteor… for noob like me!

I use a copy of Tracker because I removed all Meteor references from it. I don’t publish it on NPM because 1) I honestly don’t see the point and 2) I don’t want to maintain it (be the person who answers questions about Tracker).

As for direct HTML, see https://viewmodel.org/#BindingsHtml

Example({
  message: 'Can it be a <strike>strike</strike>?',
  render() {
    <div>
      <input b="value: message" placeholder="Type something" />
      <label b="html: message" />
    </div>
  }
})

See this thread shows you how to set it up with Meteor: ViewModel for React Alpha

I know that. What I asked, suppose I have input html string:

let html = `<p>I'm html <strong>string</strong></p>`

Can I render that like so:

render() {
  return (
    <div>
    	{html}
    </div>
  )
}

That is exactly what it does.

1 Like

Okay, something does not work here.

I tried to setup the most simple variant possible, with only an App component being rendered, everything else defined as in your thread on how to setup with Meteor.

What I’m seeing is nothing, with an error message in the console that ``‘App’ is undefined```

Edit: Seems to be an issue with Windows 10 installations of Meteor. When I’m doing the exact same steps under the Ubuntu on Windows subsystem, it works. :rolling_eyes:

For whatever reason it didn’t install the plugin when I ran npm install. I had to install it explicitly with npm i --save-dev viewmodel-react-plugin. Then it worked for me on Windows.

1 Like

Tracker is already implemented in NPM. https://www.npmjs.com/package/trackr I’ve used it, it’s pretty solid.

Okay, I’ve run into another problem - I’m trying to use ReactRouter.

However, whenever I try to use the <Link> tag, I’m getting the warning that there’s an unknown prop ‘parent’ on the <a> tag (which is created by <Link>). If I’m using <a> on its own this warning does not appear.

I’m talking about this message here: https://facebook.github.io/react/warnings/unknown-prop.html

If I inspect the generated code I’m seeing this:

        function render() {                                                                                 //
            return React.createElement(                                                                     //
                'div',                                                                                      // 14
                null,                                                                                       // 14
                React.createElement(Link, {                                                                 // 15
                    parent: this,                                                                           // 15
                    to: '/' })                                                                              // 15
            );                                                                                              // 14
        }                                                                                                   //
        return render;                                                                                      //
    }();    

compared to a “pure” hyperlink:

App.prototype.render = function () {                                                                    //
        function render() {                                                                                 //
            return React.createElement(                                                                     //
                'div',                                                                                      // 14
                null,                                                                                       // 14
                React.createElement('a', { href: '/' })                                                     // 15
            );                                                                                              // 14
        }                                                                                                   //
                                                                                                            //
        return render;                                                                                      //
    }();   

Seems like a bug. Please make a repro.

Clone this repo:

There’s a bit more files, but aside from client/main.js, client/main.html and imports/App.js nothing is actually used yet.

Update viewmodel-react-plugin@0.7.6

Thanks for the heads up.

1 Like

Sorry, but that didn’t quite solve it - still getting the same warning message.

Sorry about that. I tested it with a simplified version, not your full one. Pick up viewmodel-react@0.7.7 and viewmodel-react-plugin@0.7.7

1 Like

I hate to tell you this but I’m still seeing the warning. I made doubly sure that I have the proper versions.

Do a meteor reset and try again. I just cloned the project, npm install, and meteor. Everything looks okay.

Yes, indeed. The meteor reset was the missing ingredient :slight_smile: