Renata Estes

public/App.js

@@ -1,3 +1,7 @@
 function App(){
-  return <div><Main /></div>
-}
+  return (
+    <div className="App">
+      <Main />
+    </div>
+  )
+}

public/Follow.js

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

public/Header.js

@@ -0,0 +1,11 @@
+function Header(){
+  var myvar = "The Header/Navbar";
+
+  return (
+    <div className="App-header">
+      <h1 className="h1header">
+        {myvar}
+      </h1>
+    </div>
+    )
+}

public/LiveVideo.js

@@ -0,0 +1,4 @@
+function LiveVideo(){
+  return <h1>Live Videos Here</h1>
+
+}

public/Main.js

@@ -1,3 +1,22 @@
-function Main(){
-  return <div>Hello</div>
-}
+function Main(props){
+  let mydiv = <div></div>
+  [].push(<div></div>);
+
+  let mydivs = props.tweets.map((item) => {
+    return <div>{item}</div>
+  });
+
+
+  return (
+    <div>
+    <div className="border header"><Header /></div>
+    <div className="border profile"><Profile /></div>
+    <div className="border posttweets"><PostTweets /></div>
+    <div className="border tweets"><Tweets tweets={props.mytweets}/></div>
+    <div className="border trends"><Trends /></div>
+    <div className="border follow"><Follow /></div>
+    <div className="border livevideo"><LiveVideo /></div>
+  {mydivs} 
+    </div>
+    )
+}

public/PostTweets.js

@@ -0,0 +1,23 @@
+class PostTweets extends React.component{
+constructor(){
+  super();
+  this.state={
+    theword:""
+  }
+}
+
+render(){
+  function hello(){
+    console.log("hello")
+  }
+
+  return (
+    <h1>
+    <input onChange={(e)=>{
+        this.setState({theword:e.target.value});
+      }} />
+    <button onClick={hello}> Click Me To Submit A Tweet! </button>
+  </h1>
+    )
+  }
+}

public/Profile.js

@@ -0,0 +1,4 @@
+function Profile(){
+  return <h1>My Profile @TwitterClone</h1>
+
+}

public/Trends.js

@@ -0,0 +1,4 @@
+function Trends(){
+  return <h1>What's Trending?</h1>
+
+}

public/Tweets.js

@@ -0,0 +1,20 @@
+function Tweets(){
+  return <h1>My Twitter Feed</h1>
+
+}
+
+<script>
+
+  var h3 = document.createElement("h3");
+  h3.innerHTML = tweets[0];
+  document.body.appendChild(h3);
+
+</script>
+
+<script type="text/jsx">
+var tweet = React.createElement("h3",null,tweets[1])
+ReactDOM.render(
+  tweet,
+  document.getElementById('root')
+);
+</script>

public/index.html

@@ -27,24 +27,26 @@
         "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);
+    <!-- <script>
+
+      var h3 = document.createElement("h3");
+      h3.innerHTML = tweets[0];
+      document.body.appendChild(h3);
 
     </script>
 
     <script type="text/jsx">
-    var tweet = React.createElement("h1",null,tweets[1])
+    var tweet = React.createElement("h3",null,tweets[1])
     ReactDOM.render(
-      tweet, 
+      tweet,
       document.getElementById('root')
     );
-    </script>
+    </script> -->
+
+
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
@@ -55,6 +57,15 @@
       To begin the development, run `npm start`.
       To create a production bundle, use `npm run build`.
     -->
-
+   <script src="Tweets.js" type="text/jsx"></script>
+   <script src="PostTweets.js" type="text/jsx"></script>
+   <script src="Trends.js" type="text/jsx"></script>
+   <script src="LiveVideo.js" type="text/jsx"></script>
+   <script src="Follow.js" type="text/jsx"></script>
+   <script src="Profile.js" type="text/jsx"></script>
+   <script src="Header.js" type="text/jsx"></script>
+   <script src="Main.js" type="text/jsx"></script>
+   <script src="App.js" type="text/jsx"></script>
+   <script src="index.js" type="text/jsx"></script>
   </body>
 </html>

public/index.js

@@ -1,4 +1,6 @@
+console.log(tweets);
+
 ReactDOM.render(
-  <App/>, 
+  <App mytweets = {tweets} />,
   document.getElementById('root')//there has to be a starting point for where to put your element
-);
+);

src/App.js

@@ -2,10 +2,13 @@ import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
 
-function App(){
+function App(props){
+
+console.log(props.mytweets);
+
    return (
     <div>
-
+    
     </div>
   );
  }

src/index.css

@@ -3,3 +3,54 @@ body {
   padding: 0;
   font-family: sans-serif;
 }
+
+.border {
+  border-style: solid;
+  border-color: red;
+}
+
+h3 {
+  background-color: blue;
+}
+
+/*.header{
+    height: 20px;
+    width: 100%;
+    background-color: red;
+}
+
+.profile {
+    height: 200px;
+    width: 50%;
+    background-color: orange;
+}
+
+.posttweets{
+    height: 200px;
+    width: 50%;
+    background-color: yellow;
+}
+
+.tweets{
+    height: 200px;
+    width: 50%;
+    background-color: green;
+}
+
+.trends{
+    height: 200px;
+    width: 50%;
+    background-color: blue;
+}
+
+.follow{
+    height: 200px;
+    width: 50%;
+    background-color: purple;
+}
+
+.livevideo{
+    height: 200px;
+    width: 50%;
+    background-color: pink;
+}*/