4th

app/components/App.js

@@ -0,0 +1,14 @@
+var React = require('react');
+var Popular = require('./Popular');
+
+class App extends React.Component {
+  render() {
+    return (
+      <div className="container">
+        <Popular />
+      </div>
+    )
+  }
+}
+
+module.exports = App;

app/components/Popular.js

@@ -0,0 +1,13 @@
+var React = require('react');
+
+class Popular extends React.Component {
+  render() {
+    return (
+      <div>
+        Popular!
+      </div>
+    )
+  }
+}
+
+module.exports = Popular;

app/index.css

@@ -1,3 +1,9 @@
 body {
-  background-color: lightblue;
+  font-family: -apple-system
+  ,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
 }

app/index.js

@@ -1,20 +1,13 @@
 var React = require('react');
 var ReactDom = require('react-dom');
 require('./index.css');
+var App = require('./components/App');
 
 // STATE
 // LIFECYCLE EVENT
 // UI
 
-class App extends React.Component {
-  render() {
-    return (
-      <div>
-        Hello World!
-      </div>
-    )
-  }
-}
+
 
 ReactDom.render(
   <App />, document.getElementById('app')