Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <title>ReactJS Component Example</title>
    <script src="http://fb.me/react-0.8.0.js"></script>
    <script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
</head>
​
<body>
    <script type="text/jsx">
    /*** @jsx React.DOM */ 
    var myname = React.createClass({
        getInitialState: function() {
          return{
              textColor: {color: 'red'}
          };
        },
        changeStateToBlue: function() {
          this.setState({textColor: {color: 'blue'}})
        },
        changeStateToRed: function() {
          this.setState({textColor: {color: 'red'}})
        },
        render:function(){ 
          return (
                <div>
                  <h1 style={this.state.textColor}>
                  Sandeep Kumar Patel 
                  </h1>
                  <button onClick={this.changeStateToBlue}>
                  Change State to Blue
                  </button>
                  <button onClick={this.changeStateToRed}>
                  Change State to Red
                  </button>
                </div>
          ) 
        } 
      }); 
    React.renderComponent(<myname/>,document.body)
    </script>
</body>
</html
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
saan1984pro
0viewers