AustinCodingAcademy · JamesPuckett · Apr 20, 2017 · Apr 20, 2017
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "eslint": "^3.19.0",
     "react": "^15.5.4",
     "react-dom": "^15.5.4"
   },
@@ -15,4 +16,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}
diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,9 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
+<!--    <link rel="stylesheet" href="../src/css">-->
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <!--
       Notice the use of %PUBLIC_URL% in the tag above.

diff --git a/src/components/CenterColumn.js b/src/components/CenterColumn.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import TweetBar from './TweetBar';
+import Updates from './Updates';
+
+function CenterColumn(){
+  return (
+    <div id='centercolumn' className='col-xs-6'>
+      <TweetBar />
+      <Updates />
+    </div>
+    );
+};
+
+export default CenterColumn;
diff --git a/src/components/Follow.js b/src/components/Follow.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Follow(){
+  return (
+    <div id='follow'>
+    follow
+    </div>
+    );
+}
+
+export default Follow;
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,10 +1,22 @@
 import React from 'react';
+import Links from './Links';
+import Icon from './Icon';
+import Search from './Search';
 
-function Header(){
-   return (
+
+class Header extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
     <div id="header">
-    I am the header
+    <Links />
+    <Icon />
+    <Search />
   </div>);
+  }
 }
 
-export default Header;
+
+	export default Header;
diff --git a/src/components/Icon.js b/src/components/Icon.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Icon(){
+  return (
+    <div id='icon' className='col-xs-2'>
+			<p> hello</p>
+    </div>
+    );
+}
+
+export default Icon;
diff --git a/src/components/LeftColumn.js b/src/components/LeftColumn.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import ProfileArea from './ProfileArea';
+import Trends from './Trends';
+
+
+function LeftColumn(){
+  return (
+    <div id='leftColumn' className='col-xs-3'>
+      <ProfileArea />
+      <Trends />
+    </div>
+    );
+};
+
+export default LeftColumn;
diff --git a/src/components/Links.js b/src/components/Links.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+function Links(){
+  return (
+    <div id='links' className='col-xs-5'>
+      <a href='#'>Home</a>
+      <a href='#'>Moments</a>
+      <a href='#'>Notifications</a>
+      <a href='#'>Messages</a>
+    </div>
+    );
+};
+
+export default Links;
diff --git a/src/components/LiveVideo.js b/src/components/LiveVideo.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function LiveVideo(){
+  return (
+    <div id='livevideo'>
+    livevideo
+    </div>
+    );
+};
+
+export default LiveVideo;
diff --git a/src/components/Main.js b/src/components/Main.js
@@ -1,9 +1,14 @@
 import React from 'react';
+import LeftColumn from './LeftColumn';
+import CenterColumn from './CenterColumn';
+import RightColumn from './RightColumn';
 
 function Main(){
   return (
-    <div id="main">
-    main
+    <div id="mainBody">
+      <LeftColumn />
+      <CenterColumn />
+      <RightColumn />
     </div>
     );
 }

diff --git a/src/components/ProfileArea.js b/src/components/ProfileArea.js
@@ -0,0 +1,48 @@
+import React from 'react';
+//import State from 'State';
+
+class ProfileArea extends React.Component {
+  constructor(props) {
+    super(props);
+		this.state = {
+			name: "James Puckett",
+		}
+  }
+  render() {
+		return(
+    <div id='profilearea' className='col-xs-12'>
+      <div>
+        <div>
+          <img src='#'/>
+          <div>
+            <h3>{this.state.name}</h3>
+            <p>user.account</p>
+          </div>
+        </div>
+        <div>
+          <div>
+            <h5>Tweets</h5>
+            <p>user.numberOfTweets</p>
+          </div>
+          <div>
+            <h5>Following</h5>
+            <p>user.numberOfFollowing</p>
+          </div>
+          <div>
+            <h5>Followers</h5>
+            <p>user.numberOfFollowers</p>
+          </div>
+        </div>
+      </div>
+      <div>
+        <h5>Gain more followers</h5>
+        <p>Promote your account and get discovered by more people on twitter.</p>
+        <p>Preview it first below</p>
+      </div>
+    </div>
+    );
+  }
+}
+
+
+	export default ProfileArea;
diff --git a/src/components/RightColumn.js b/src/components/RightColumn.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import Follow from './Follow';
+import LiveVideo from './LiveVideo';
+
+function RightColumn(){
+  return (
+    <div id='rightcolumn' className='col-xs-3'>
+    right column
+    <Follow />
+    <LiveVideo />
+    </div>
+    );
+}
+
+export default RightColumn;
diff --git a/src/components/Search.js b/src/components/Search.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+function Search(){
+  return (
+    <div id='search' className='col-xs-5'>
+      <form>
+        <input type='text' name='search' />
+      </form>
+      <img src="#" />
+      <button></button>
+    </div>
+    );
+};
+
+export default Search;
diff --git a/src/components/Trends.js b/src/components/Trends.js
@@ -0,0 +1,32 @@
+import React from 'react';
+
+function Trends(){
+  return (
+    <div id='trends' className='col-xs-12'>
+      <div>
+        <h4>Trends</h4>
+        <a href='#'>Change</a>
+      </div>
+      <div>
+        <div>
+          <a href='#'>I'm a link</a>
+          <p>I talk about the link</p>
+        </div>
+        <div>
+          <a href='#'>I'm a link</a>
+          <p>I talk about the link</p>
+        </div>
+        <div>
+          <a href='#'>I'm a link</a>
+          <p>I talk about the link</p>
+        </div>
+        <div>
+          <a href='#'>I'm a link</a>
+          <p>I talk about the link</p>
+        </div>
+      </div>
+    </div>
+    );
+};
+
+export default Trends;
diff --git a/src/components/TweetBar.js b/src/components/TweetBar.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+function TweetBar(){
+  return (
+    <div id='tweetbar' className='col-xs-12'>
+      <img src="#" />
+      <p>Tweet here.</p>
+    </div>
+    );
+};
+
+export default TweetBar;
diff --git a/src/components/Updates.js b/src/components/Updates.js
@@ -0,0 +1,38 @@
+import React from 'react';
+
+function Updates(){
+  return (
+    <div id='updates' className='col-xs-12'>
+      <div>
+        <img src="#" />
+        <div>
+          <div>
+            <h3>user.name</h3>
+            <p>user.account</p>
+            <p>user.twitterTimer</p>
+          </div>
+          <div>
+            <p>user.comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum rutrum sodales. Nullam mattis fermentum libero, non volutpat.</p>
+            <a href="a">link and picture</a>
+          </div>
+        </div>
+      </div>
+      <div>
+        <img src="#" />
+        <div>
+          <div>
+            <h3>user.name</h3>
+            <p>user.account</p>
+            <p>user.twitterTimer</p>
+          </div>
+          <div>
+            <p>user.comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum rutrum sodales. Nullam mattis fermentum libero, non volutpat.</p>
+            <a href="a">link and picture</a>
+          </div>
+        </div>
+      </div>
+    </div>
+    );
+};
+
+export default Updates;
diff --git a/src/components/state.js b/src/components/state.js
@@ -0,0 +1,15 @@
+var state = {
+  user:{
+    name:"Jon Smith",
+    username: "@JonWSmith"
+  },
+  tweets:[
+    "I love ACA class",
+    "React is so cool!",
+    "I'm going to be the best web developer ever",
+    "can't wait to learn redux."
+
+  ],
+  following:53,
+  followers:208
+}
diff --git a/src/components/style.css b/src/components/style.css
@@ -0,0 +1,19 @@
+/* Styles go here */
+#header{
+  border: 1px solid black;
+  min-height: 200px;
+}
+#main{
+  border: 1px solid black;
+  min-height: 200px;
+}
+#icon img{
+  height: 25px;
+  width: 25px;
+}
+#icon {
+  border: 1px solid black;
+}
+#links {
+  border: 1px solid black;
+}
diff --git a/src/index.css b/src/index.css
@@ -9,4 +9,30 @@ body {
 }
 #main{
   border: 1px solid black;
+}
+/* Styles go here */
+#header{
+  border: 1px solid black;
+  min-height: 40px;
+  background-color: blue;
+}
+#mainBody{
+  border: 1px solid black;
+}
+#icon img{
+  height: 25px;
+  width: 25px;
+}
+#icon {
+  border: 1px solid black;
+  text-align: center;
+}
+#links {
+  border: 1px solid black;
+}
+#search {
+  border: 1px solid black;
+}
+#search form, #search input, #search img, #search button {
+  display: inline;
 }