justin.womack.atx.advanced1

package.json

@@ -4,14 +4,15 @@
   "private": true,
   "devDependencies": {
     "babel-eslint": "^7.1.1",
-    "eslint": "^3.14.0",
+    "eslint": "^3.19.0",
     "eslint-plugin-babel": "^4.0.1",
     "eslint-plugin-react": "^6.9.0",
     "react-scripts": "0.7.0"
   },
   "dependencies": {
     "foreman": "^2.0.0",
     "json-server": "^0.9.4",
+    "prop-types": "^15.5.8",
     "react": "^15.3.2",
     "react-dom": "^15.3.2"
   },
@@ -24,5 +25,5 @@
     "test": "npm run lint && react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
-  "proxy" : "http://localhost:3001"
+  "proxy": "http://localhost:3001"
 }

src/App.js

@@ -1,19 +1,52 @@
 import React from "react";
-import logo from "./logo.svg";
 import "./App.css";
+import Header from "./components/Header.js";
+import Intro from "./components/Intro.js";
+import PropTypes from "prop-types";
+
+// This loops through the list of users and gathers info about them (first last)
+// It creates a paragraph for each and returns that information to userItems
+// Paragraph needs the key because it needs to know the same
+// list is present even if it has been reordered.
+// Since react monitors for changes, if I reorder the list
+// in some way it would need to run through all users again.
+// By giving it a key of the user ID, I ensure that
+// even if the list changes order react has some anchor point for
+// it to realize this is the same list as before, saving in performance.
+// As long as this key has not changed, do not recalculate the list.
+
+// Could have index as argument for userItems = function
+// Changed App(props) to app({userArray}) to directly access userArray
+// within the props object. (just shorthand)
+function App({userArray}) {
+  const userItems = userArray.map(function (user) {
+    return (
+      <p key={user.id}>
+        First Name: {user.first_name + " "}
+        <br />
+        Last Name: {user.last_name}
+        <br />
+        Phone: {user.phone}
+        <br />
+      </p>
+    );
+  });
 
-function App() {
   return (
     <div className="App">
-      <div className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <h2>Welcome to React</h2>
-      </div>
-      <p className="App-intro">
-        To get started, edit <code>src/App.js</code> and save to reload.
-      </p>
+      <Header message="some message" />
+      <Header message="some other message" />
+      {
+        // Display all the information I gathered from user items.
+      }
+      {userItems}
+      <Intro />
     </div>
   );
 }
 
+// Note lowercase propTypes method
+App.propTypes = {
+  userArray: PropTypes.array.isRequired
+};
 export default App;

src/components/Header.js

@@ -0,0 +1,14 @@
+import React from "react";
+import logo from "./logo.svg";
+
+function Header(props) {
+  return (
+    <div className="App-header">
+      <img src={logo} className="App-logo" alt="logo" />
+      <h2>Welcome to React</h2>
+      <p>{props.message}</p>
+    </div>
+  );
+}
+
+export default Header;

src/components/Intro.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+function Intro() {
+  return (
+    <p className="App-intro">
+      To get started, edit <code>src/App.js</code> and save to reload.
+    </p>
+    )
+  };
+
+export default Intro;

src/index.js

@@ -7,7 +7,7 @@ import users from "./users";
 
 function render() {
   ReactDOM.render(
-    <App />,
+    <App userArray={users} />,
     document.getElementById("root")
   );
 }

src/users.js

@@ -55,6 +55,3 @@ export default [
   }
 
 ];
-
-
-