My Basic React Babel ES6 Fiddle

React / ES6 / Babel / JSX Fiddle

by dfederighi

HTML

<script src="https://fb.me/react-dom-0.14.3.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

const DumbComponent = ({message, color}) => {
	styles = {color: color};
  return (
  	<b style={styles}>{message}</b>
  );
};

class SmartParent extends React.Component {
	constructor(props) {
  	super(props);
    
    this.state = {
    	statusColor: 'green',
      count: 0
    };
    
	}
  
  addCount = () => {
  	
  		this.setState((state, props) => {
      	return {
        	count: state.count + 1
        }
      });
      this.setState((state, props) => {
      	return {
        	count: state.count + 1
        }
      });
      this.setState((state, props) => {
      	return {
        	count: state.count + 1
        }
      });
      
      
      // this only ends up adding '1' to count, because setState calls are asynchronous
      // use the method above (function argument style) to assure that state is properly 
      // updated each time and render() is triggered
      //this.setState({count: this.state.count + 1});
      //this.setState({count: this.state.count + 1});
      //this.setState({count: this.state.count + 1});
  };
  
  handleColorState = (e) => {
  	let newStatus = this.state.statusColor === 'red' ? 'green' : 'red';
  	this.setState({statusColor: newStatus});
  };
  
  render() {
  	let state = this.state;
  	let styles = {color: state.statusColor};
    let triggerStatus = state.statusColor === 'green' ? 'ON' : 'OFF';
  	return (
    	<div>
        <h3 onClick={this.addCount}>increment - {this.state.count}</h3>
    	  <b style={styles}>{this.props.message}</b><br />
        <button onClick={this.handleColorState}>Turn alert {triggerStatus}</button>
      </div>
    );
  }
}

SmartParent.defaultProps = {
	message: 'default message'
};



ReactDOM.render(<SmartParent message="overriding message" />, document.getElementById('container'));































/*
class Hello extends React.Component {
  state = {
  	name: this.props.initialName
  }
  change(e) {
  	this.setState({ name: e.target.value });
  }
  render() {
  	const {...