Xilin_Wang_atx_Advanced1

-

@@ -0,0 +1,2 @@
+import React from "react";
+import "./App.css";

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

@@ -18,6 +18,24 @@
   font-size: large;
 }
 
+.App-links {
+  width: 60px;
+  height: 60px;
+  margin-top: 10px;
+}
+
+.Berlin {
+  width:100%;
+  height:600px;
+  margin-top:10px;
+}
+
+.Schloss {
+  width:100%;
+  height:600px;
+  margin-top:10px;
+}
+
 @keyframes App-logo-spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }

src/components/App.js

@@ -0,0 +1,38 @@
+import React from "react";
+import "./App.css";
+import Eins from "./Eins";
+import Zwei from "./Zwei";
+import Drei from "./Drei";
+import Vier from "./Vier";
+import Funf from "./Funf";
+import UserDetail from "./UserDetail";
+import users from "../users";
+
+
+function App(props) {
+  const Menschen = props.users.map(function (user, index) {
+    const name = user.first_name + " " + user.last_name;
+    return (
+      <li key={index}>
+        {name}
+      </li>
+    );
+  });
+  return (
+    <div className="App">
+      <Eins />
+      <Zwei />
+      <Drei />
+      <UserDetail users={users} />
+      {Menschen}
+      <Vier />
+      <Funf />
+    </div>
+  );
+}
+
+// App.propTypes = {
+//   users: React.PropTypes.node,
+// };
+
+export default App;

src/components/Drei.js

@@ -0,0 +1,11 @@
+import React from "react";
+import "./App.css";
+
+
+function Drei() {
+  return (
+    <a href="mailto:popularwatson@gmail.com">popularwatson@gmail.com</a>
+  );
+}
+
+export default Drei;

src/components/Eins.js

@@ -0,0 +1,17 @@
+import React from "react";
+import "./App.css";
+// import logo from "./logo.svg";
+import Links from "./Links.png";
+import Header from "./Header";
+
+function Hund() {
+  return (
+    <div className="App-header">
+      <Header Schild="LINKS" />
+      <img src={Links} className="App-links" alt="Links" />
+      <h2>Wie geht es dir?</h2>
+    </div>
+  );
+}
+
+export default Hund;

src/components/Funf.js

@@ -0,0 +1,12 @@
+import React from "react";
+import "./App.css";
+import Schloss from "./Schloss.jpg";
+
+
+function Funf() {
+  return (
+    <img src={Schloss} className="Schloss" alt="Schloss" />
+  );
+}
+
+export default Funf;

src/components/Header.js

@@ -0,0 +1,14 @@
+import React from "react";
+import "./App.css";
+
+function Header(props) {
+  return (
+    <header>{props.Schild}</header>
+  );
+}
+
+// Header.propTypes = {
+//   Schild: React.PropTypes.node,
+// };
+
+export default Header;

src/components/ListOfUsers.js

@@ -0,0 +1,14 @@
+import React from "React";
+import "./App.css";
+
+function ListOfUsers(props) {
+  return (
+    const UserList = props.users.map(function(user, index) {
+      <li key={index}>
+        user.avatar;
+      </li>
+    });
+  );
+}
+
+export default ListOfUsers;

src/components/UserDetail.js

@@ -0,0 +1,15 @@
+import React from "react";
+import "./App.css";
+
+function UserDetail(props) {
+  const UserEins = props.users[0].first_name;
+  return (
+    <p>
+      {UserEins}
+    </p>
+  );
+}
+
+
+
+export default UserDetail;

src/components/Vier.js

@@ -0,0 +1,12 @@
+import React from "react";
+import "./App.css";
+import Brandenburg from "./Brandenburg.jpg";
+
+
+function Vier() {
+  return (
+    <img src={Brandenburg} className="Berlin" alt="Brandenburg" />
+  );
+}
+
+export default Vier;

src/components/Zwei.js

@@ -0,0 +1,13 @@
+import React from "react";
+import "./App.css";
+
+
+function Zwei() {
+  return (
+    <p className="App-intro">
+      Es hat mir viel Spass gemacht!!!
+    </p>
+  );
+}
+
+export default Zwei;

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")
   );
 }

src/users.js

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