Make <App> a function

Author: lorensr

src/components/App.js

@@ -1,23 +1,18 @@
-import React, { Component } from 'react'
+import React from 'react'
+
 import logo from '../logo.svg'
 import StarCount from './StarCount'
 import TableOfContents from './TableOfContents'
 import Section from './Section'
 
-class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <StarCount />
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">The GraphQL Guide</h1>
-        </header>
-        <TableOfContents />
-        <Section />
-      </div>
-    )
-  }
-}
-
-export default App
+export default () => (
+  <div className="App">
+    <header className="App-header">
+      <StarCount />
+      <img src={logo} className="App-logo" alt="logo" />
+      <h1 className="App-title">The GraphQL Guide</h1>
+    </header>
+    <TableOfContents />
+    <Section />
+  </div>
+)

src/components/Section.js

@@ -12,9 +12,7 @@ export default () => {
           <h2>Subtitle</h2>
         </header>
       </div>
-      <div className="Section-content">
-        {loading ? <Skeleton count={7} /> : null}
-      </div>
+      <div className="Section-content">{loading && <Skeleton count={7} />}</div>
     </section>
   )
 }