1

src/app.tsx

@@ -4,12 +4,15 @@ import axios from './utils/axios';
 
 import logo from './logo.svg';
 import './App.css';
+import Hello from './components/Hello';
+
 const Demo: React.FC = () => {
   const [top, setTop] = useState(10);
   const [bottom, setBottom] = useState(10);
 
   return (
     <div>
+      <Hello name="TypeScript" enthusiasmLevel={10} />
       <Affix offsetTop={top}>
         <Button type="primary" onClick={() => setTop(top + 10)}>
           Affix top

src/components/Hello.css

@@ -0,0 +1,13 @@
+.hello {
+  text-align: center;
+  margin: 20px;
+  font-size: 48px;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.hello button {
+  margin-left: 25px;
+  margin-right: 25px;
+  font-size: 40px;
+  min-width: 50px;
+}

src/components/Hello.tsx

@@ -1,24 +1,28 @@
 import * as React from 'react';
+import './Hello.css';
 
 export interface Props {
   name: string;
   enthusiasmLevel?: number;
 }
 
-function Hello({ name, enthusiasmLevel = 1 }: Props) {
-  if (enthusiasmLevel <= 0) {
-    throw new Error('You could be a little more enthusiastic. :D');
-  }
+class Hello extends React.Component<Props, object> {
+  render() {
+    const { name, enthusiasmLevel = 1 } = this.props;
+
+    if (enthusiasmLevel <= 0) {
+      throw new Error('You could be a little more enthusiastic. :D');
+    }
 
-  return (
-    <div className="hello">
-      <div className="greeting">
-        Hello {name + getExclamationMarks(enthusiasmLevel)}
+    return (
+      <div className="hello">
+        <div className="greeting">
+          Hello {name + getExclamationMarks(enthusiasmLevel)}
+        </div>
       </div>
-    </div>
-  );
+    );
+  }
 }
-
 export default Hello;
 // helpers