<!DOCTYPE html>
<html>
<head>
<!-- Тег meta для указания кодировки -->
<meta charset="utf-8">
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!--
<script crossorigin src="react.production.min.js"></script>
<script crossorigin src="react-dom.production.min.js"></script>
-->
<!--
<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>
-->
</head>
<body>
<div id="root"></div>
<br />
<br />
<style>
#pp{color:blue;}
#pp_02{color:red;}
</style>
<script type="text/babel">
//"use strict"
//import React from 'react';
//import ReactDOM from 'react-dom';
// https://www.youtube.com/watch?v=BwAakF_VUV8
function tick(_id) {
const element = (
<div key="k-1" id={_id} name="rrr">
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
<br />
</div>
);
const el2 = React.cloneElement(element, {key: "k-2",id:_id+"_02", style: {left: 10, top: 150, position: 'absolute'}});
// highlight-next-line
ReactDOM.render([element, el2], document.getElementById('root'));
}
setInterval('tick("pp")', 1000);
function _color(){
document.getElementById("pp").style.color = "#ff00ff";
document.getElementById("pp_02").style.color = "#00ff00";
}
setTimeout(_color,4000);
</script>
</body>
</html> |
