React Hello World Example with ES6+JSX

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

by Mozafar Ali

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;
}
.mentor {
  margin: 10px;
}
.explanation {
  color: gray;
  text-align: center;
  font-size: 14px;
}

.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 Mentor extends React.Component {
  render() {
    //const name = this.props.name;
  }
}

class App extends React.Component {
  render() {
    return (
      <div className="App">
      	<div className="explanation">
        	See how each each mentor info is displayed differently? <br /> Let's DRY this code and create a Mentor component to display a Mentor's information to ensure consistency.</div>
        <hr />
        <h1>List of Mentors</h1>
        <article className="mentor">
         	Name: <small>Kash</small><br />
          Country: Iran
        </article>
        <article className="mentor">
	        Name: Maros<br />
          <b>Country</b>: Slovakia
        </article>
        <article className="mentor">
         	Name: Mozafar <br/>
          Sudan
        </article>
      </div>
    );
  }
}

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