working on css

client/js/components/Footer.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default class Footer extends React.Component{
+    
+    render(){
+        return(
+            <div class="Footer">This is a footer</div>
+            );
+    }
+}

client/js/components/Header.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default class Header extends React.Component{
+    
+    render(){
+        return(
+            <header class="Header" />
+        )
+    }
+}

client/js/components/Previews.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default class Previews extends React.Component{
+    
+    insertPosts(){
+        let posts = [];
+        
+        for (let i = 0; i < 10; i++){
+            posts.push(<p key={i}>This is a test push {i}</p>);
+        }
+        
+        return posts;
+    }
+    
+    render(){
+        return (
+            <div class="Previews">{this.insertPosts()}</div>
+            );
+    }
+}

client/js/components/Sidebar.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+//images
+import me from '../../assets/images/me.jpg';
+
+export default class Sidebar extends React.Component{
+    
+    render(){
+        return(
+            <div class="Sidebar">
+                <h2>About me</h2>
+                <p>Test 123</p>
+                <p>Test 123</p>
+                <p>Test 123</p>
+                <p>Test 123</p>
+                <p>Test 123</p>
+                <p>Test 123</p>
+                <p>Test 123</p>
+            </div>
+            );
+    }
+}

client/js/pages/Index.js

@@ -1,9 +1,26 @@
 import React from 'react';
 
+//components
+import Header from '../components/Header';
+import Previews from '../components/Previews';
+import Footer from '../components/Footer';
+import Sidebar from '../components/Sidebar';
+
+//css
+import '../../assets/css/normalize.css';
+import '../../assets/scss/main.scss';
+
 export default class Index extends React.Component{
     render(){
         return(
-                <div>This is the index test component</div>
+            <div class="Layout">
+                <Header/>
+                <div class="Main">
+                    <Previews/>
+                    <Sidebar/>
+                </div>
+                <Footer/>
+            </div>
             );
     }
 }