react 復習

わかる事
1　基本的に処理は変動しないモノには、funcsionコンポーネント　変動するやつは、classコンポーネント
2 input イベント　出力　は（inputの周りの部分）
補足
fieldsetはinputをグループ化する

import React from 'react';
import ReactDOM from 'react-dom';
import './ShippingList.css';

// import App from './App';
import * as serviceWorker from './serviceWorker';

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.handleChange = this.handleChange.bind(this);
    this.state = {temperature: ''};
  }

  handleChange(e) {
    this.setState({temperature: e.target.value});
  }

  render() {
    const temperature = this.state.temperature;
    return (
      <fieldset>
        <legend>Enter temperature in Celsius:</legend>
        <input
          value={temperature}
          onChange={this.handleChange} />

        <BoilingVerdict
          celsius={parseFloat(temperature)} />

      </fieldset>
    );
  }
}

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



// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();