React Documentation Learn

25-05-2020

by shurikation

HTML

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

CSS

h4 {
  color: green;
}

React

function FormattedDate(props) {
  return (
  	<h4>
      Сейчас {props.date.toLocaleTimeString()}
    </h4>
  );
}

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    	date: new Date()
    };
  }
  
  
  componentDidMount() {
		this.timerID = setInterval(
    () => this.tick(),
    1000);
  }
  
  componentWillUnmount() {
  	clearInterval(this.timeID);
  }
  
  tick() {
  	this.setState({
    	date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Привет, мир!</h1>
        <h2>Сейчас {this.state.date.toLocaleTimeString()}.</h2>
        <FormattedDate date={this.state.date} />
      </div>
    );
  }
}


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

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