Split *CRA* App to components

Author: Andrii Kirmas

__recipes__/create-react-app/src/App.tsx

@@ -1,14 +1,20 @@
 import React, { PropsWithChildren } from 'react';
 import logo from './logo.svg';
 
+const Header = ({className, children}: PropsWithChildren<{className: string}>) => <header
+  className={className}>{children}
+</header> 
+
+const Logo = ({className}: {className: string}) => <img src={logo} className={className} alt="logo" />
+
+const Body = () => <p>Edit <code>src/App.tsx</code> and save to reload.</p>
+
 function App({className}: {className: string}) {
   return (
     <div className={className}>
       <Header className="App-header">
         <Logo className="App-logo"/>
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
+        <Body/>
         <Link className="App-link"/>
       </Header>
     </div>
@@ -17,14 +23,6 @@ function App({className}: {className: string}) {
 
 export default App;
 
-function Header({className, children}: PropsWithChildren<{className: string}>) {
-  return <header className={className}>{children}</header> 
-}
-
-function Logo({className}: {className: string}) {
-  return <img src={logo} className={className} alt="logo" />
-}
-
 function Link({className}: {className: string}) {
   return <a
     className={className}
@@ -34,4 +32,4 @@ function Link({className}: {className: string}) {
   >
     Learn React
   </a>    
-}
+}