Jonathan.Gucciardi.Austin.Advanced-1

package.json

@@ -12,8 +12,11 @@
   "dependencies": {
     "foreman": "^2.0.0",
     "json-server": "^0.9.4",
+    "prop": "^0.1.1",
+    "prop-types": "^15.5.8",
     "react": "^15.3.2",
-    "react-dom": "^15.3.2"
+    "react-dom": "^15.3.2",
+    "types": "^0.1.1"
   },
   "scripts": {
     "start": "nf start",
@@ -24,5 +27,5 @@
     "test": "npm run lint && react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
-  "proxy" : "http://localhost:3001"
+  "proxy": "http://localhost:3001"
 }

src/componants/Another-comp.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+function AnotherComp() {
+  return (
+    <div>
+      <p className="App-intro"> AnotherComponant Test</p>
+    </div>
+
+  );
+}
+
+export default AnotherComp;

src/componants/App.js

@@ -0,0 +1,39 @@
+import React from "react";
+import logo from "./logo.svg";
+import "./App.css";
+import Header from "./Header";
+import Ptag from "./pTag";
+import Appintro from "./appIntro";
+import AnotherComp from "./Another-comp";
+import Pic from "./picture";
+import CompSix from "./CompSix";
+import Seven from "./seven";
+import Main from "./Main";
+import propTypes from "prop-types";
+// add seven additional things to this ract app
+
+function App(props) {
+  const UserInfo = props.users[0];
+  return (
+    <div className="App">
+      <div className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <Header message="React: header test" />
+      </div>
+      <Appintro />
+      <Ptag message="React: paragraph tag test" />
+      <Main users={props.users} user={UserInfo} />
+      <AnotherComp />
+      <Pic />
+      <CompSix message="number six" />
+      <Seven />
+    </div>
+  );
+}
+
+App.propTypes = {
+  users: propTypes.string.isRequired
+};
+
+
+export default App;

src/componants/CompSix.js

@@ -0,0 +1,19 @@
+import React from "react";
+import propTypes from "prop-types";
+
+function Compsix(props) {
+  return (
+    <div className="App-header">
+
+      <h3>{props.message} </h3>
+
+    </div>
+
+  );
+}
+Compsix.propTypes = {
+  message: propTypes.string.isRequired
+};
+
+
+export default Compsix;

src/componants/DetailOutput.js

@@ -0,0 +1,19 @@
+import React from "react";
+import UserDetail from "./UserDetail";
+import propTypes from "prop-types";
+
+function DetailOutput(props) {
+  const first = props.user;
+  return (
+    <div className="Section-content">
+      <UserDetail user={first} />
+    </div>
+  );
+}
+DetailOutput.propTypes = {
+  user: propTypes.string.isRequired
+};
+
+
+
+export default DetailOutput;

src/componants/Header.js

@@ -0,0 +1,16 @@
+import React from "react";
+import propTypes from "prop-types";
+
+function Header(props) {
+  return (
+    <div className="App-header">
+      <h1>{props.message} </h1>
+    </div>
+  );
+}
+
+Header.propTypes = {
+  message: propTypes.string.isRequired
+};
+
+export default Header;

src/componants/ListOfUsers.js

@@ -0,0 +1,23 @@
+/* Gathers list of users*/
+import React from "react";
+import propTypes from "prop-types";
+
+function ListOfUsers(props) {
+  const UserList = props.users.map(function (user, index) {
+    return (
+      <li key={index}>
+        {user.first_name}
+      </li>
+    );
+  });
+  return (
+    <div>
+      {UserList}
+    </div>
+  );
+}
+
+ListOfUsers.propTypes = {
+  users: propTypes.string.isRequired
+};
+export default ListOfUsers;

src/componants/ListOutput.js

@@ -0,0 +1,17 @@
+import React from "react";
+import ListOfUsers from "./ListOfUsers";
+import propTypes from "prop-types";
+
+function ListOutput(props) {
+  return (
+    <div className="Section-content">
+      <ListOfUsers users={props.users} />
+    </div>
+  );
+}
+
+ListOutput.propTypes = {
+  users: propTypes.string.isRequired
+};
+
+export default ListOutput;

src/componants/Main.js

@@ -0,0 +1,20 @@
+import React from "react";
+import ListOutput from "./ListOutput";
+import DetailOutput from "./DetailOutput";
+import propTypes from "prop-types";
+
+function Main(props) {
+  const first = props.user;
+  return (
+    <div className="Main-container">
+      <ListOutput users={props.user} />
+      <DetailOutput user={first} />
+    </div>
+  );
+}
+
+Main.propTypes = {
+  user: propTypes.string.isRequired
+};
+
+export default Main;

src/componants/UserDetail.js

@@ -0,0 +1,20 @@
+import React from "react";
+import propTypes from "prop-types";
+
+function UserDetail(props) {
+  const firstName = (props.user.first_name);
+  const lastName = (props.user.last_name);
+  return (
+    <ul>
+      <li>
+        {firstName}
+        {lastName}
+      </li>
+    </ul>
+  );
+}
+UserDetail.propTypes = {
+  user: propTypes.string.isRequired
+};
+
+export default UserDetail;

src/componants/appIntro.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+function Appintro() {
+
+  return (
+    <div>
+      <p className="App-intro"> App-Intro</p>
+    </div>
+  );
+
+}
+
+export default Appintro;

src/componants/pTag.js

@@ -0,0 +1,16 @@
+import React from "react";
+import propTypes from "prop-types";
+
+function Ptag(props) {
+  return (
+    <div className="App-header">
+      <p>{props.message} </p>
+    </div>
+  );
+}
+
+Ptag.propTypes = {
+  message: propTypes.string.isRequired
+};
+
+export default Ptag;

src/componants/picture.js

@@ -0,0 +1,11 @@
+import React from "react";
+import logo from "./logo.svg";
+
+function Pic() {
+  return (
+    <div>
+      <img src={logo} className="App-logo" alt="logo" />
+    </div>
+  );
+}
+export default Pic;

src/componants/seven.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+function Seven() {
+  return (
+    <div>
+      <p2 className="App-intro"> Seven#@!@#</p2>
+    </div>
+  );
+}
+
+export default Seven;

src/index.js

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

src/users.js

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