-
Notifications
You must be signed in to change notification settings - Fork 2
/
test.html
61 lines (53 loc) · 1.61 KB
/
test.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="https://unpkg.com/react@16.13.1/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.production.min.js" crossorigin></script>
<script src="/index.js"></script>
</head>
<body>
<div id="example"></div>
<div id="user-card"></div>
<div id="dom-example"></div>
</body>
<script>
const ReactElement = Arche(React)
const { Div, H1, P, Button, Img } = ReactElement
const { useState } = React
const Example = ReactElement(() => {
const [count, setCount] = useState(0)
return Div([
P('Success! - React'),
P(`You clicked ${count} times`),
Button({
onClick() {
setCount(count + 1)
},
}, 'Click me'),
])
})
ReactDOM.render(Example(), document.getElementById('example'))
const UserCard = ReactElement(({
firstName, lastName, age,
}) => Div({ style: { border: '1px solid lightgrey' } }, [
H1(`${firstName} ${lastName}`),
Img({ src: 'https://via.placeholder.com/150x150', alt: 'placeholder' }),
P({ style: { color: 'lightgrey' } }, `age: ${age}`),
]))
ReactDOM.render(
UserCard({ firstName: 'George', lastName: 'Henry', age: 32 }),
document.getElementById('user-card'))
const DOMElement = Arche(document)
const domExample = DOMElement.Div([
DOMElement.P('Success! - DOMElement'),
DOMElement.Ul({ id: 'pink-list', style: { backgroundColor: 'pink' } }, [
DOMElement.Li('Item 1'),
DOMElement.Li('Item 2'),
DOMElement.Li('Item 3'),
]),
])
document.getElementById('dom-example').appendChild(domExample)
</script>
</html>