russ.savage.atx.advanced.1

src/App.css → src/components/App.css

@@ -22,3 +22,10 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+.Grey-back {
+  background-color: #999;
+  height: 70px;
+  color: blue;
+  padding-top: 10px;
+}

src/components/App.js

@@ -0,0 +1,47 @@
+import React from "react";
+import logo from "./logo.svg";
+import "./App.css";
+import Component8 from "./Component8.js";
+import Component7 from "./Component7.js";
+import Component6 from "./Component6.js";
+import Component5 from "./Component5.js";
+import Component4 from "./Component4.js";
+import Component3 from "./Component3.js";
+import Component2 from "./Component2.js";
+import Component1 from "./Component1.js";
+
+
+
+
+function App(props) {
+  const userItems = props.users.map(function (user,index) {
+    return (
+      <li>
+        {user.first_name}
+        {user.last_name}
+      </li>
+    );
+  });
+
+  return (
+    <div className="App">
+      <div className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+      </div>
+      <p className="App-intro">
+        <h2>Welcome!</h2>
+        <Component1 message="Props Messsage Test" />
+        <Component2 />
+        {userItems}
+        <Component3 />
+        <Component4 />
+        <Component5 />
+        <Component6 />
+        <Component7 />
+        <Component8 />
+      </p>
+    </div>
+  );
+}
+
+export default App;

src/components/Component1.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+
+function Component1(props) {
+  return (
+    <div className="Grey-back">
+      <h3> {props.message} </h3>
+    </div>
+  );
+}
+
+export default Component1;

src/components/Component2.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+
+export default class Component2 extends React.Component {
+  render() {
+    return (
+      <div>
+        <h1>Component2</h1>
+      </div>
+    );
+  }
+}

src/components/Component3.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+
+export default class Component3 extends React.Component {
+  render() {
+    return (
+      <div>
+        <h1>Component3</h1>
+      </div>
+    );
+  }
+}

src/components/Component4.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+
+export default class Component4 extends React.Component {
+  render() {
+    return (
+      <div>
+        <h1>Component4</h1>
+      </div>
+    );
+  }
+}

src/components/Component5.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+
+export default class Component5 extends React.Component {
+  render() {
+    return (
+      <div>
+        <h1>Component5</h1>
+      </div>
+    );
+  }
+}

src/components/Component6.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+
+export default class Component6 extends React.Component {
+  render() {
+    return (
+      <div>
+        <h1>Component6</h1>
+      </div>
+    );
+  }
+}

src/components/Component7.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+
+export default class Component7 extends React.Component {
+  render() {
+    return (
+      <div>
+        <h1>Component7</h1>
+      </div>
+    );
+  }
+}

src/components/Component8.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+
+export default class Component8 extends React.Component {
+  render() {
+    return (
+      <div>
+        <h1>Component8</h1>
+      </div>
+    );
+  }
+}

src/index.js

@@ -1,13 +1,13 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./App";
+import App from "./components/App";
 import "./index.css";
 import users from "./users";
 
 
 function render() {
   ReactDOM.render(
-    <App />,
+    <App users={users} />,
     document.getElementById("root")
   );
 }