React coding tips

I started working with React a couple of months ago. So far it has been really fun but equally as difficult. This is because I was so used to angular and I was trying to do things the angular way. This caused me to make a lot of mistakes at first and take ugly approaches.

Leaving that aside, I’d like to share a small list of things that I personally like to do when coding React and that freak me out when I don’t see them in the code.

Props declaration

I like to declare proptypes even though I use only one property sometimes.

React.createClass({
  propTypes: {
    foo: React.propTypes.string
  }
});

This is something really important as it tells other developers what the component needs to work properly and also if somehow you send a different type of value. React will let you know if did something wrong.

Use mixins

It’s really easy to create components that share similar behavior – however, it is really easy to mess up too when you first start.

I remember having tons of duplicated code among my components. That changed when I read about mixins.

So just use mixins to wrap similar behavior like this.

var AwesomeMixin = { 
    sayHi: function(){
        return 'Hello world';
    }
}

Now with a mixin defined, just include it in your components.

var Foo = React.createClass({
    propTypes: {},
    mixins: [AwesomeMixin]
})

var Bar = React.createClass({
    propTypes: {},
    mixins: [AwesomeMixin]
})

So now you’ll have sayHi() available in both components which is really usefull, but sadly there is no easy way to ‘override’ mixin methods in components and you’ll need some other hacky solutions for this.

JSX Spread Attributes

One thing I also like to do is that whenever I have multiple props, I would rather use the spread operator (...) rather than defining props like HTML attributes. So this:

var x = ;

becomes this:

var attrs = {
  foo: 'foo',
  bar: 'bar',
  baz: 'baz'
};

var x = 

Conditional JSX

From time to time you’ll need conditional rendering and there’s an ugly way of doing that. It looks like this:

render: function(){
  var list = [];
  <div>
    { list.length &gt; 0 &amp;&amp;
       <div>conditional content</div>
    }
  </div>
}

In this case the first statement is false and the second statement containing the JSX element will not be evaluated so….. no JSX would be returned.

But, sometimes the logic behind whether or not display the element is a little bit more complex and you can do something like this:

render: function(){
  var elements = [1],
      list = undefined;

  if(elements.length > 0){
    list = <div>Rendered list</div>
  }

  return(
    <div>
      {list}
    </div>
  )
}

This could involve some extra code but your return value does not get dirty with logic and it is easier to read.

JSX lists

The last example also applies for lists, the ugly way is the following:

render: function(){
  var elements = [1,2,3];

  return(
    <div>
    { 
      elements.map(function(el){
        return <div>el</div>
      })
    }
    </div>
  )
}

and again, this can be taken out to a variable to keep the returning JSX cleaner.

render: function(){
  var elements = [1,2,3];
  var jsxElements = elements.map(function(el){
    return <div>el</div>
  });

  return(
    <div>
     { jsxElements }
    </div>
  )
}

Classnames

Sometimes you may need a JSX element to have multiple classes depending on some values, at first I used to have things like:

render: function(){
    var foo = true ? 'foo' : 'bar',
        bar = false ? 'foo' : 'bar';

    return(
      <div>content</div>
    )   
}

And as you can see is extremely ugly, so I use this tool that helps to have a better syntax that looks like this.

 render: function(){
    var classes = classNames({
        default: true,
        foo: true ? 'foo' : 'bar',
        bar: false? 'foo' : 'bar'
    });

    return(
      <div>content</div>
    )   
}

Conclusion

All of these tips are things that I really like to do when coding React components. However, it does not mean that you have to do it just like this. Just keep in mind that if you work with other people it’s nice to have a clear and standardized way of coding.

If you have some other things you like to do, feel free to drop it in the comments below! Thanks.