Aprendendo React

Fiddle destinado a aprender React js

by Danilo Sousa

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container"></div>

CSS

.message {
  background: #fff;
  padding: 15px;
  text-align: center
}

.message h3 {
  color: #fff000;
}

.message p {
  color: #006699;
}

.teste {
  font-size: 18px;
  color: green;
  font-weignt: bold
}

JavaScript 1.7

var Button = React.createClass({
  propTypes:{
  	author: React.PropTypes.string.isRequired
  },
  show(n1, n2){
  	var result =  n1 * n2;
    var author = this.props.author;
    alert(n1 + " * " + n2 + " = " + result + " -> " + author)
  },
	render(){
  
  	var n1 = 10;
    var n2 = 30;
  	return <div>
    	<button onClick={this.show.bind(this,n1,n2)}>Show</button>
    </div>;
  }
});

var Mensagem = React.createClass({
	propTypes: {
   	title: React.PropTypes.string.isRequired,
    children: React.PropTypes.object,
    author: React.PropTypes.string.isRequired
  },
  render() {    	   
    var title = this.props.title;
    var text = this.props.children;
    var author = this.props.author;
    
    if(!text){
    	text = <strong>Mensagem padrão</strong>
    }
    
    return <div className="message">
      <h3>{title}</h3> 
      <p><Button author={author} /></p>
      
      <span>{author}</span>
  < /div>;
}
});

ReactDOM.render(

  <Mensagem title="Curso React" author="Danilo Sousa">fghfhgf</Mensagem>,

  document.getElementById('container')
);