Message component

src/App.tsx

@@ -1,34 +1,7 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import './App.css'
+import Message from './Message';
 
-function App() {
-  const [count, setCount] = useState(0)
-
-  return (
-    <div className="App">
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </div>
-  )
+function App(){
+  return <div><Message/></div>
 }
 
-export default App
+export default App;

src/Message.tsx

@@ -0,0 +1,10 @@
+//PascalCasing
+function Message () {
+    //JSX
+    const name = 'Marx';
+    if (name)
+        return <h1>Hello {name}!</h1>;
+    return <h1> Hello World!</h1>;
+}
+
+export default Message;