-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
68 lines (60 loc) · 1.53 KB
/
main.js
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
import { createElement as c, useState } from "./lib/weeact.js";
import WeeactDOM, { Component } from "./lib/weeact-dom.js";
import h from "./lib/helpers.js";
// Functional Stateless Component
const Main = ({ from }) =>
h.div(
{ className: "main" },
"hey there!",
h.h1(
{
className: "title",
style: {
color: "blue",
backgroundColor: "red"
}
},
"Title"
),
h.p("No props for this element"),
h.p({ id: "a", style: { color: "green" } }, "Some props for this element"),
`Test from prop: ${from}`,
c(Counter),
c(MultipleCounter),
);
// Component
class App extends Component {
constructor(props) {
super(props);
}
render() {
return h.div({ className: "app" }, c(Main, { from: "King of Tree" }));
}
}
// Functional Component w/ state through hooks
const Counter = ({}) => {
const [ count, setCount ] = useState(0);
return h.div(
h.p(`Count: ${count}`),
h.button({onclick: () => setCount(count+1)}, 'Increment count'),
);
}
// Functional Component w/ multiple state hooks
const MultipleCounter = ({}) => {
const [ countA, setCountA ] = useState(0);
const [ countB, setCountB ] = useState(0);
const handleClick = (e) => {
setCountA(countA+1);
setCountB(countB+2);
};
return h.div(
h.p(`Count A: ${countA}`),
h.p(`Count B: ${countB}`),
h.button({onclick: handleClick}, 'Increment both counts'),
);
}
WeeactDOM.render(
c(App, { className: "test" }),
document.querySelector("#root"),
true
);