8 | Hi
9 |
13 | );
14 |
15 | const MyInput = ({
16 | name,
17 | onChange,
18 | }: {
19 | readonly name: string;
20 | readonly onChange: (name: string) => void;
21 | }) => {
22 | const onInputChange = (event: Event): void => {
23 | // A little ugly here. We need a cast because I'm too lazy to implement react's virtual events...
24 | onChange((event.currentTarget as HTMLInputElement).value);
25 | };
26 |
27 | return ;
28 | };
29 |
30 | const MyTime = () => {
31 | const [time, setTime] = useState(new Date());
32 |
33 | useEffect(() => {
34 | setTimeout(() => setTime(new Date()), 200);
35 | });
36 |
37 | return (
38 |
10 | {`Developer ${name}`}
11 |
12 |
39 | {time.toLocaleTimeString()}
40 |
41 | );
42 | };
43 |
44 | const App = () => {
45 | const [name, setName] = useState('Sam');
46 |
47 | useEffect(() => {
48 | document.title = `Hello, ${name}`;
49 | });
50 |
51 | if (name.startsWith('Developer')) {
52 | // This ensures that the root is nuked!
53 | return 'Developer' is already in the template! Why Repeat?!;
54 | }
55 |
56 | return (
57 |
58 |
100 | );
101 | };
102 |
103 | React.mountToDOM(
59 |
61 |
62 | Developer Sam
60 |
64 | 
65 |
68 |
69 |
84 | Developer Note
70 | This is just a random site. The design is ugly.
71 |
72 | The inputbox can auto sync with the text on the left. However, it appears like the website
73 | is built with React, so there is really nothing to brag about.
74 |
75 |
76 | The only noteworthy thing is: the React is{' '}
77 | Sam's React (although a simplied
78 | one).
79 |
80 |
81 | Feel free to open developer console to read the code. The source maps will help you.
82 |
83 |
85 |
98 |
86 | Links
87 |
88 |
89 | Developer Sam
90 |
91 |
92 | Sam's GitHub
93 |
94 |
95 | This project's GitHub
96 |
97 | {`Copyright © ${new Date().getFullYear()} Developer Sam`}
99 |