<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<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>
<!-- 生産環境中不建議使用 -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
//1. React執行個體
/*如果我們需要使用 JSX，則 <script> 标簽的 type 屬性需要設定為 text/babel;
Babel 可以将 ES6 代碼轉為 ES5 代碼，這樣我們就能在目前不支援 ES6 浏覽器上執行 React 代碼。Babel 内嵌了對 JSX 的支援。
通過将 Babel 和 babel-sublime 包（package）一同使用可以讓源碼的文法渲染上升到一個全新的水準。*/
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('app')
);
//2.更新元素渲染
/*React 元素都是不可變的。當元素被建立之後，你是無法改變其内容或屬性的。
目前更新界面的唯一辦法是建立一個新的元素，然後将它傳入 ReactDOM.render() 方法*/
function addEle() {
const element = (
<div>
<h1>第一次渲染!</h1>
<h2>現在是 {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('app')
);
}
setInterval(addEle, 500);
//封裝下vvvvvvv toLocaleTimeString()方法根據本地時間把 Date對象的時間部分轉換為字元串;
function Setdom(props) {
return (
<div>
<h1>第二次渲染!</h1>
<h2>現在是 {props.date.toLocaleTimeString()}.</h2>
</div>
);
}
function newEle() {
ReactDOM.render(
<Setdom date={new Date()} />,
document.getElementById('app')
);
}
setInterval(newEle, 1000);
//React.Component的 ES6 類，該類封裝了要展示的元素，需要注意的是在 render()方法中，需要使用 this.props替換 props：
class EsDom extends React.Component {
render() {
return (
<div>
<h1>第三次渲染!</h1>
<h2>現在是 {this.props.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
function esAddDom() {
ReactDOM.render(
<EsDom date={new Date()} />,
document.getElementById('app')
);
}
setInterval(esAddDom, 2500);
</script>
</body>
</html>
![Django之驗證碼（十七）驗證碼[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)