Test10

index.html

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

script.babel

function FormattedDate(props) {
  return <h2>It is {props.date.toLocaleTimeString()}.</h2> 
}

// Clock component
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  // Mounting
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  
  // Unmounting
  componentWillUnmount() {
    clearInterval(this.timerID);
  }
  
  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello world!</h1>
        <FormattedDate date={this.state.date} />
      </div>
    );
  }
}

function App(){
  return (
    <div>
      <Clock />
      <Clock />
      <Clock />
    </div>
  );
}

ReactDOM.render(
  <App />,
  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>

test10.markdown

Test10

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

State & Lifecycle

A Pen by 你银子掉了 on CodePen.