React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by bhupendra negi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<label> Select Any Color :
  <input type="color" value="#00FFFFFF" id="myColor"> </label>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

CSS

#container {
  padding: 50px;
  background-color: #FFF
}

JavaScript 1.7

// Main component which is renderd 
var Card = React.createClass({
  render: function() {
    var cardStyle = {
      height: 200,
      width: 150,
      border: "1px solid"
    };
    return ( < div style = {
        cardStyle
      } >
      < Square {...this.props
      }
      />  < Label {...this.props} / >

      < /div>
    )
  }

})

/*  compositble component */
var Square = React.createClass({

      render: function() {
        var squareStyle = {
          height: 150,
          width: 150,
          backgroundColor: this.props.color
        }
        return ( < div style = {
            squareStyle
          } > < /div>) 
        }
      });

    // label component 
    var Label = React.createClass({
          render: function() {
            var lableStyle = {
              color: this.props.color,
              fontFamily: "Roboto",
              textAlign: "center"
            }
            return ( < p style = {
                lableStyle
              } > {
                this.props.color
              } < /p>  )

            }

          })

var colEle = document.getElementById("myColor"); 
colEle.addEventListener("change", function(e) {
          var selCol = e.target.value;
          /*Main component is rendered here  */
          ReactDOM.render( < Card color = {
              selCol
            }
            / > ,
            document.getElementById('container')
          );
        }, false);