alexggordon on Create a character voting app using React, Node.js, MongoDB and Socket.io

Comment on Create a character voting app using React, Node.js, MongoDB and Socket.io

I've been curious about React for awhile now, but every time I step in to play around with it, I get really turned off by the syntax.

This is a react render function mentioned in the tutorial (gist with all code here[0]):

  render() {
   let delta = this.props.delta ? (
     <strong className={this.props.delta > 0 ? 'text-success' : 'text-danger'}>
       {this.props.delta}
     </strong>
   ) : null;
 
   return (
     <div className='card'>
       {delta}
       {this.props.title}
     </div>
   );
  }

This is approximately that same function written in ERB and Rails syntax.

  <div class='card'>
    <%= content_tag_for(:strong, :class => @delta > 0 ? 'text-success' : 'text-danger' ) do %>
      <%= @this_props_title %>
    <% end %>
  </div>

On just a pure typing basis, the ERB would take half as long to type as the react version. Even writing that same function in backbone templates (which I use frequently) would take less text, and be easier to read. Maybe I haven't given react and other js frameworks enough of a chance, but to a person that hasn't learned them, that render function above is a huge deterrent.

[0] https://gist.github.com/alexggordon/820020aab934bf192b81

lojack 11y

Your ERB function is actually wrong though....

      <div class='card'>
        <% if this_props_delta? %>
          <%= content_tag_for(:strong, :class => @delta > 0 ? 'text-success' : 'text-danger' ) do %>
            <%= @this_props_delta %>
          <% end %>
        <% end %>
        <%= @this_props_title %>
      </div>

I'm not a rails developer, so I'm only marginally certain of the correctness of this, and less certain if there's a more verbose way to write it. Likewise, I've only played around with React, so its possible that the React version can be made less verbose.

One could just as easily argue:

    <div className='card'>
      {() => { this.props.delta ? (
        <strong className={this.props.delta > 0 ? 'text-success' : 'text-danger'}>
            {this.props.delta}
          </strong>
      ) : null }() }
      {this.props.title}
    </div>

Is the same amount of typing. Honestly though, I feel as though this whole argument is a bit of an apples-to-oranges type of argument.

kentor 11y

Here's how I would inline it, and I encourage people to do it this way. Intermediate variable is not necessary. Ternary is not necessary since false evaluates to null in jsx.

  render() {
   return (
     <div className='card'>
       {this.props.delta > 0 &&
         <strong className={this.props.delta > 0 ? 'text-success' : 'text-danger'}>
           {this.props.delta}
         </strong>
       }
       {this.props.title}
     </div>
   );
  }

justinsaccount 11y

I'm not an expert on either of those, but I don't think that your ERB version does the same thing. If delta is not set, the react version renders something like

    <div class="card">
        title
    </div>

If it is set, it renders something like

    <div class="card">
        <strong class="text-success"> delta </strong>
        title
    </div>

Your version appears to render

    <div class="card">
        <strong class="text-success">
            title
        </strong>
    </div>

Comments