React cheatsheet or a couple of life hacks

import React from 'react';
function Button({ container, href, type, children }) {
  let resultContainer = null;
  if (React.isValidElement(container)) {
    resultContainer = container;
  } else if (href) {
    resultContainer = 
  } else {
    resultContainer = 

import React from 'react';
function Button({ container, href, type, children }) {
  let Tag = null;
  if (React.isValidElement(container)) {
    Tag = container;
  } else if (href) {
    Tag = 'a';
  } else {
    Tag = 'button';
  }
  return (
    
      {children}
    
  );
}
Button.defaultProps = {
  container: null,
  href: null,
  type: null,
};

Change direction of elements

Method 1. Assignment to the corresponding variables by condition.

import React from 'react';
function Player({ avatar, name, direction }) {
  let pref = null;
  let posf = null;
  if (direction === 'ltr') {
    pref = ;
    posf = {name};
  } else {
    pref = {name};
    posf = ;
  }
  return (
    

      {pref}
      {posf}
    
  );
}
Player.defaultProps = {
  direction: 'ltr',
};

Method 2: Array.prototype.reverse

import React from 'react';
function Player({ avatar, name, direction }) {
  const arrayOfPlayerItem = [
    ,
    {name},
  ];
  if (direction === 'rtl') {
    arrayOfPlayerItem.reverse();
  }
  return (
    

      {arrayOfPlayerItem}
    
  );
}
Player.defaultProps = {
  direction: 'ltr',
};

Method 3. Manipulation through CSS.

import React from 'react';
import classNames from 'classnames';
const DIRECTION_CLASSES = {
  ltr: 'player_direction_ltr',
  rtl: 'player_direction_rtl',
};
function Player({ avatar, name, direction }) {
  return (
    
{name}
  );
}
Player.defaultProps = {
  direction: 'ltr',
};

// 1. flexbox
.player {
  display: flex;
}
.player_direction_rtl .player__avatar {
  order: 1;
}
.player_direction_rtl .player__name {
  order: 0;
}
// 2. direction
.player,
.player__avatar,
.player__name {
  display: inline-block;
}
.player_direction_rtl {
  direction: rtl;
}
// 3. float
.player {
  display: inline-block;
}
.player_direction_rtl .player__avatar,
.player_direction_rtl .player__name {
  float: right;
}

Saving a reference to a DOM element

import React, { Component } from 'react';
class Banner extends Component {
  componentDidMount() {
    if (this.DOM.root) {
      this.DOM.root.addEventListener('transitionend', ...);
    }
  }
  handleRefOfRoot = (node) => {
    this.DOM.root = node;
  };
  DOM = {
    root: null,
  };
  render() {
    return (
      

        {this.props.children}
      
    );
  }
}

In the end

1. React Patterns, RUVDS.com
2. "Design Patterns in React", RUVDS.com
3. "Our Best Practices for Writing React Components", Scott Domes
4. “React.js pure render performance anti-pattern”, Esa-Matti Suuronen