React Hello World Example with ES6+JSX

A basic Hello World widget with in browser JSX transformed + ES6 support

by dingen2010

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.widget {
  width: 202px;
  margin: 100px auto;
  //    border:1px solid black;
  padding: 20px;
}

.name {
  color: red;
}

.default-label {
  border: 1px solid black;
  padding: 10px;
  margin-bottom: 10px;
  width: 180px;
}

.green-label {
  border: 1px solid green;
  padding: 10px;
  margin-bottom: 10px;
  width: 180px;
}

.default-input {
  border: 1px solid #eaeaea;
  padding: 10px;
  width: 180px;
}

.important-input {
  border: 2px solid red;
  width: 180px;
}

img.center {
  width: 100px;
  height: 100px;
  display: block;
  margin: 15px auto;
}

JavaScript 1.7

class HelloWidget extends React.Component {
        constructor(props) {
          super(props);
          this.handleChange = this.handleChange.bind(this)
          this.state = {
            name: ''
          };
        }

        handleChange(e) {
          this.setState({
            name: e.target.value
          });
        }

        render() {
          return <div className = "widget" >
            kfksdjkfjskfjdskljklsdjfsd < /div>;
        }
      }

      React.render( < HelloWidget / > , document.getElementById('container'));