Push of 5 components used

public/ActivityFeed.js

@@ -0,0 +1,3 @@
+import React from "react";
+
+function 

public/App.js

@@ -1,3 +1,13 @@
 function App(){
-  return <div><Main /></div>
-}
+  return (
+    <div>
+      <NavBar />
+      <Logo />
+      <SearchBar />
+      <Tweet />
+      <UserProfile />
+      <Trends />
+      <Header />
+    </div>
+  );
+}

public/Header.js

@@ -0,0 +1,3 @@
+function Header() {
+  return <h1>stuff</h1>
+}

public/Logo.js

@@ -0,0 +1,7 @@
+function Logo() {
+  return (
+    <div className="Logo">
+      <h1>Logo</h1>
+    </div>
+  );
+}

public/NavBar.js

@@ -0,0 +1,10 @@
+function NavBar() {
+  return (
+    <div className="NavBar">
+      <button>Home</button>
+      <button>Moments</button>
+      <button>Notifications</button>
+      <button>Messages</button>
+    </div>
+  );
+}

public/SearchBar.js

@@ -0,0 +1,7 @@
+function SearchBar() {
+  return (
+    <div className="SearchBar">
+      <h1>Search Bar</h1>
+    </div>
+  );
+}

public/Trends.js

@@ -0,0 +1,3 @@
+function Trends() {
+  return <h1 className="Trends">These are the latest trends!</h1>
+}

public/Tweet.js

@@ -0,0 +1,7 @@
+function Tweet() {
+  return (
+    <div>
+    <h1 className="Tweet">This is where you type a tweet</h1>
+    </div>
+  )
+}

public/UserProfile.js

@@ -0,0 +1,3 @@
+function UserProfile() {
+  return <h1>UserProfile</h1>
+}

public/Video.js

@@ -0,0 +1,3 @@
+import React from "react";
+
+function

public/WhoToFollow.js

@@ -0,0 +1,3 @@
+import React from "react";
+
+function

public/index.html

@@ -27,11 +27,11 @@
         "I just saw a movie that changed my life",
         "shirts are 50% of at Macy's today"
       ];
-    
+
     </script>
 
     <script>
-    
+
       var h1 = document.createElement("h1");
       h1.innerHTML = tweets[0];
       document.body.appendChild(h1);
@@ -41,7 +41,7 @@
     <script type="text/jsx">
     var tweet = React.createElement("h1",null,tweets[1])
     ReactDOM.render(
-      tweet, 
+      tweet,
       document.getElementById('root')
     );
     </script>
@@ -55,6 +55,15 @@
       To begin the development, run `npm start`.
       To create a production bundle, use `npm run build`.
     -->
-
+    <script src="UserProfile.js" type="text/jsx"></script>
+    <script src="Tweet.js" type="text/jsx"></script>
+    <script src="Trends.js" type="text/jsx"></script>
+    <script src="SearchBar.js" type="text/jsx"></script>
+    <script src="NavBar.js" type="text/jsx"></script>
+    <script src="Logo.js" type="text/jsx"></script>
+    <script src="Header.js" type="text/jsx"></script>
+    <script src="App.js" type="text/jsx"></script>
+    <script src="index.js" type="text/jsx"></script>
+
   </body>
 </html>

src/App.css

@@ -22,3 +22,34 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+.NavBar {
+  border: 1px solid red;
+  float: left;
+}
+
+.SearchBar {
+  border: 1px solid red;
+  float: right;
+}
+
+.Logo {
+  border: 1px solid red;
+  float: left;
+  height: 20px;
+  width: 500px;
+}
+
+.Trends {
+  border: 1px solid red;
+  align-items: center;
+  width: 150px;
+  height: 150px;
+}
+
+.Tweet {
+  border: 1px solid red;
+  float: right;
+  width: 300px;
+  height: 700px;
+}

src/App.js

@@ -4,8 +4,7 @@ import './App.css';
 
 function App(){
    return (
-    <div>
-
+    <div className='App'>
     </div>
   );
  }