-
Notifications
You must be signed in to change notification settings - Fork 13
/
test.html
95 lines (81 loc) · 2.28 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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16.9.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.9.0/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="./lib/umd/reto.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const {Provider, useStore} = reto
const {useState} = React
function FooStore(initial = 1) {
console.log('rendering FooStore')
const [x, setX] = useState(initial)
console.log('FooStore', x)
return {
x,
setX
}
}
function BarStore() {
console.log('rendering BarStore')
const fooStore = useStore(FooStore)
console.log('BarStore', fooStore.x)
// const [y, setY] = useState(1)
return {
y: fooStore.x + 1,
// setY,
fooStore
}
}
const App = (props) => {
console.log('rendering App')
const fooStore = useStore(FooStore)
// const barStore = useStore(BarStore)
function changeStore() {
fooStore.setX(fooStore.x + 1)
// barStore.setY(barStore.y + 1)
}
// console.log('App', fooStore.x, barStore.y)
return (
<div>
<button onClick={changeStore}>Change</button>
{fooStore.x}
</div>
)
}
const Child = () => {
console.log('rendering Child')
return <div>
child
</div>
}
ReactDOM.render(
<h1>
Hello, world!
<Provider of={FooStore} memo>
<App/>
<Child/>
</Provider>
</h1>,
document.getElementById('root')
);
</script>
<!--
Note: this page is a great way to try React but it's not suitable for production.
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
Read this section for a production-ready setup with JSX:
https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project
In a larger project, you can use an integrated toolchain that includes JSX instead:
https://reactjs.org/docs/create-a-new-react-app.html
You can also use React without JSX, in which case you can remove Babel:
https://reactjs.org/docs/react-without-jsx.html
-->
</body>
</html>