-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
68 lines (64 loc) · 2.06 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>My react</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="didact.js" type="module"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function useIncrement() {
const [n, setN] = React.useState(0)
const increment = () => {
setN(n + 1)
}
return [n, increment]
}
function Compteur({ name }) {
const [n, increment] = useIncrement()
return (
<div>
<h1>Bonjour {name}</h1>
compteur: {n}
<button onClick={() => increment()}>Incrementer</button>
</div>
)
}
/** Didact.createElement */
function step1() {
console.log('step1')
const element = (
<div id="foo">
<Compteur name="John" />
<p />
<button onClick={step2}>En savoir plus</button>
</div>
)
ReactDOM.render(element, document.getElementById('root'))
}
function step2() {
console.log('step2')
const element = (
<div id="foo">
<p>
Nostrud est est reprehenderit commodo mollit proident sint qui ut
ut Lorem labore esse. Laboris nisi in dolor deserunt in sunt
occaecat ut ipsum laborum irure ipsum ipsum. Nisi elit non aliquip
proident nostrud reprehenderit dolor id excepteur minim velit
eiusmod quis.
</p>
<button onClick={step1}>Retour</button>
</div>
)
ReactDOM.render(element, document.getElementById('root'))
}
step1()
</script>
</body>
</html>