How template helpers are done in React


#1

Lets take the example: FlowRouter template helper to generate the path from the route name. In blaze, I will create a template helper and simply use it.

What is a way to do it in React, without Blaze? Do I need to create a component (kinda like <RouterLink />) and use it in another components?


#2

Actually, in React don’t need FR template helpers or something like that. (You may create your own if needed).
Since you can write JS inside components. It’s easy.

<a href={FlowRouter.path('singlePost', 'the-blog-id')}>
  My Blog Post
</a>

#3

The more I use React, the more I don’t like this mixed weird syntax.

Thank you.


#4

Haha. You’ll get used it. Then you’ll love it :smile:


#5

One thing that helps is to think of JSX as functions and not HTML. If you think of it this way nothing is mixed, it’s just pure JS code used to build the UI. The JSX is just sugar to make it easier to read. For example:

render() {
    return (
      <form>
        <input type="email" />
        <div ref="errMsg"></div>
      </form>
    );
  }
render() {
    return (
      React.createElement("form",  formProps,
        React.createElement("input", {type: "email"}),
        React.createElement("div", {ref: "errMsg"})
      )
    );
  }

#6

Yes, I think you get used to this syntax with functions in render function after some time. Actually, I like separation and minimal Blaze html syntax, so for me this is not that easy to start to like React.

I also opened the react-router to find, how they do this and found a <Link \> component. So, I will probably create one for the Flow Router and use it. :wink: