Edit in JSFiddle

function ReactCreateClass(){
  var ReactComponent = React.createClass({
      render(){
        return(
          <div>React Create Class</div>
        );
      }
  });
  console.dir(ReactComponent);
  ReactDOM.render(<ReactComponent/>,document.getElementById("app"));
}
function ES2015Class(){
  class ES2015Component extends React.Component {
    render() {
      return (
        <div>ES2015 Component Class!</div>
      );
    }
  }
  console.dir(ES2015Component);
  ReactDOM.render(<ES2015Component/>,document.getElementById("app"));
}
function FunctionClass(){
	function FcPure(){
    	return (
      	<div>function class!</div>
      );
  }
  console.dir(FcPure);
	ReactDOM.render(<FcPure/>,document.getElementById("app"))
}
function TagItSelfClass(){
	ReactDOM.render(<div>tag itself!</div>,document.getElementById("app"))
}
function SVGElementClass(){
	function SVGClass(){
  	return(
    	<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="163.000000pt" height="165.000000pt" viewBox="0 0 163.000000 165.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,165.000000) scale(0.100000,-0.100000)"
fill="#FFFFFF" stroke="none">
<path d="M110 830 l0 -710 710 0 710 0 0 710 0 710 -710 0 -710 0 0 -710z
m1360 0 l0 -650 -650 0 -650 0 0 650 0 650 650 0 650 0 0 -650z"/>
<path d="M314 832 c-30 -20 -19 -82 15 -82 29 0 46 36 32 66 -11 24 -27 30
-47 16z"/>
<path d="M1320 826 c-15 -19 -9 -56 12 -69 34 -22 66 41 36 71 -16 16 -33 15
-48 -2z"/>
<path d="M657 692 c-9 -13 20 -83 45 -109 12 -14 35 -31 50 -39 35 -18 119
-18 162 0 42 18 85 73 93 120 5 33 4 36 -20 36 -20 0 -28 -7 -37 -34 -23 -72
-102 -105 -172 -72 -34 17 -68 61 -68 90 0 16 -44 23 -53 8z"/>
</g>
</svg>
    );
  }
  console.log(SVGClass);
  ReactDOM.render(<SVGClass/>,document.getElementById("app"));
}
$('#ReactCreateClass').click(ReactCreateClass);
$('#ES2015Class').click(ES2015Class);
$('#PureFunction').click(FunctionClass);
$('#TagItSelf').click(TagItSelfClass);
$('#SVGElement').click(SVGElementClass);

<p>[머그리]React.createClass vs ES2015</p>
<a href="#" id="ReactCreateClass">React.createClass</a>
<a href="#" id="ES2015Class">ES2015 Class</a>
<a href="#" id="PureFunction">Pure Function</a>
<a href="#" id="TagItSelf">Tag ItSelft</a>
<a href="#" id="SVGElement">SVG</a>
<div id="app"/>

body{background-color:#282a36;color:#f8f8f2; font-size:16px;}
body a{color:#50fa7b;padding-right:20px;}
body pre{background-color: #44475a; font-weight:bold;padding:10px 10px 10px 10px;}