Test19

index.html

<div id="root"></id>

script.babel

function BoilingVerdict(props) {
  if (props.celsius >= 100) {
    return <p>The water would boil.</p>
  }  
  return <p>The water would not boil.</p>
}

class Calculator extends React.Component{
  constructor(props) {
    super(props);
    this.state = {temperature: ''};
    this.handleChange = this.handleChange.bind(this);
  }
  
  handleChange(event) {
    this.setState({temperature: event.target.value});
  }
  
  render() {
    const temperature = this.state.temperature;
    return (
      <fieldset>
        <legend>Enter temperature in Celsius:</legend>
        <input value={temperature} onChange={this.handleChange} />
        <BoilingVerdict celsius={temperature} />
      </fieldset>
    );
  }
}

ReactDOM.render(
  <Calculator />,
  document.getElementById("root")
);

scripts

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

test19.markdown

Test19

Learn the fundamentals of React, including simple and class components, state, props, and submitting form data.

Lifting State Up

A Pen by 你银子掉了 on CodePen.