Skip to content

Commit 2d2f497

Browse files
latviancoderlatviancoder
committed
concurrent react experiments
1 parent 7c54e28 commit 2d2f497

File tree

10 files changed

+890
-66
lines changed

10 files changed

+890
-66
lines changed

‎package.json

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,25 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@emotion/core": "^10.0.5",
67
"foobar-ipsum": "^1.0.3",
78
"immer": "^1.7.4",
89
"node-sass": "^4.9.4",
910
"normalize.css": "^8.0.0",
1011
"react": "16.7.0-alpha.0",
12+
"react-cache": "^2.0.0-alpha.1",
13+
"react-clock": "^2.3.0",
1114
"react-dom": "16.7.0-alpha.0",
1215
"react-router-dom": "^4.3.1",
1316
"react-scripts": "2.1.1",
17+
"reactjs-simple-spinner": "^0.0.5",
18+
"scheduler": "^0.12.0",
1419
"scroll-into-view-if-needed": "^2.2.20",
1520
"simple-react-router": "^0.0.17",
1621
"yup": "^0.26.6"
1722
},
1823
"scripts": {
19-
"start": "react-scripts start",
24+
"start": "set PORT=3006 && react-scripts start",
2025
"build": "react-scripts build",
2126
"test": "react-scripts test",
2227
"eject": "react-scripts eject"

‎src/App.js

Lines changed: 84 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,101 @@
11
import React from 'react';
22
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
3+
/** @jsx jsx */
4+
import { jsx, css } from '@emotion/core';
35

46
import AccordionScreen from './components/accordion';
57
import FormLibraryScreen from './components/form-library';
68
import WindowWidthScreen from './components/window-width';
79
import TodoList from './components/todo-list';
810
import SortableScreen from "./components/sortable";
11+
import Concurrent1 from "./components/concurrent/Concurrent1";
12+
import Concurrent2 from "./components/concurrent/Concurrent2";
13+
import Concurrent3 from "./components/concurrent/Concurrent3";
14+
import Concurrent3After from "./components/concurrent/Concurrent3_after";
15+
16+
const Homepage = () => {
17+
return <div>use navigation on the left</div>;
18+
};
919

1020
function App() {
11-
return (
12-
<Router>
13-
<div className="main">
14-
<nav className="sidebar">
15-
<div className="item">
16-
<Link className="link" to="/accordion">
17-
Accordion
18-
</Link>
19-
<span>
20-
Panels scroll into view if not fully visible when toggled.
21+
const mode = window.localStorage.getItem('mode');
22+
23+
return <Router>
24+
<div className="main">
25+
<div className="sync-async">
26+
<a
27+
css={css`font-weight: ${(!mode || mode === 'sync') && 'bold'};`}
28+
onClick={() => {
29+
window.localStorage.setItem('mode', 'sync');
30+
window.location.reload();
31+
}}
32+
>sync</a>
33+
{' / '}
34+
<a
35+
css={css`font-weight: ${mode === 'concurrent' && 'bold'};`}
36+
onClick={() => {
37+
window.localStorage.setItem('mode', 'concurrent');
38+
window.location.reload();
39+
}}
40+
>concurrent</a>
41+
</div>
42+
<nav className="sidebar">
43+
<div className="item">
44+
<Link className="link" to="/accordion">
45+
Accordion
46+
</Link>
47+
<span>
48+
Panels scroll into view if not fully visible when toggled.
2149
Using <pre>useEffect</pre>, <pre>useRef</pre>.
2250
</span>
23-
</div>
24-
<div className="item">
25-
<Link className="link" to="/form-library">
26-
Extremely basic form validation library
27-
</Link>
28-
<span>Pass state deeper using context, then read it using <pre>useContext</pre>. Heavily inspired by <pre>formik</pre>.</span>
29-
</div>
30-
<div className="item">
31-
<Link className="link" to="/window-width">
32-
Window width
33-
</Link>
34-
<span>Multiple <pre>useEffects</pre> are allowed.</span>
35-
</div>
36-
<div className="item">
37-
<Link className="link" to="/todo-list">
38-
Todo-list
39-
</Link>
40-
<span>Look mum, <pre>useReducer</pre> is almost Redux!</span>
41-
</div>
42-
<div className="item">
43-
<Link className="link" to="/sortable">
44-
Sortable
45-
</Link>
46-
</div>
47-
</nav>
48-
49-
<div className="content">
50-
<Route path="/" exact component={() => <div>use navigation on the left</div>}/>
51-
<Route path="/accordion" component={AccordionScreen}/>
52-
<Route path="/form-library" component={FormLibraryScreen}/>
53-
<Route path="/window-width" component={WindowWidthScreen}/>
54-
<Route path="/todo-list" component={TodoList}/>
55-
<Route path="/sortable" component={SortableScreen}/>
5651
</div>
52+
<div className="item">
53+
<Link className="link" to="/form-library">
54+
Extremely basic form validation library
55+
</Link>
56+
<span>Pass state deeper using context, then read it using <pre>useContext</pre>. Heavily inspired by <pre>formik</pre>.</span>
57+
</div>
58+
<div className="item">
59+
<Link className="link" to="/window-width">
60+
Window width
61+
</Link>
62+
<span>Multiple <pre>useEffects</pre> are allowed.</span>
63+
</div>
64+
<div className="item">
65+
<Link className="link" to="/todo-list">
66+
Todo-list
67+
</Link>
68+
<span>Look mum, <pre>useReducer</pre> is almost Redux!</span>
69+
</div>
70+
<div className="item">
71+
<Link className="link" to="/sortable">
72+
Sortable
73+
</Link>
74+
</div>
75+
<div className="item">
76+
Concurrent React experiments
77+
<span css={{ display: 'flex' }}>
78+
<Link className="link" to="/concurrent1">One</Link>,{' '}
79+
<Link className="link" to="/concurrent2">Two</Link>,{' '}
80+
<Link className="link" to="/concurrent3">Three</Link>
81+
</span>
82+
</div>
83+
</nav>
84+
85+
<div className="content">
86+
<Route path="/" exact component={Homepage} />
87+
<Route path="/accordion" component={AccordionScreen} />
88+
<Route path="/form-library" component={FormLibraryScreen} />
89+
<Route path="/window-width" component={WindowWidthScreen} />
90+
<Route path="/todo-list" component={TodoList} />
91+
<Route path="/sortable" component={SortableScreen} />
92+
<Route path="/concurrent1" component={Concurrent1} />
93+
<Route path="/concurrent2" component={Concurrent2} />
94+
<Route path="/concurrent3" component={Concurrent3} />
95+
<Route path="/concurrent3-after" component={Concurrent3After} />
5796
</div>
58-
</Router>
59-
)
97+
</div>
98+
</Router>;
6099
}
61100

62101
export default App;

0 commit comments

Comments
 (0)