React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by Matthew Vasallo

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class CalculatorComponent extends React.Component{

constructor(props){
super(props);
this.state = {
operation: "none specified",
result: ""
};
}

componentDidMount(){
console.log("mounted with props!", this.props);
let newResult;

switch(this.props.operator){
case "+":
console.log("hit + case");
newResult = this.add(this.props.leftOperand, this.props.rightOperand);
break;
}
this.setState({
result: newResult
});
}

add(a, b){
console.log("testing this", this.state.result);
return eval(`${a} + ${b}`);
};

substract(){

}

render(){
 return <div>Calculation is {this.add("3", "4")} </div>
}

};

ReactDOM.render(<CalculatorComponent leftOperand="2" rightOperand="4" operator="+"></CalculatorComponent>, document.getElementById("container"));