Github is now Partially Functional

src/components/Github.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import './css/Github.css';
+import {getRepos} from '../actions';
+
+class Github extends React.Component {
+
+  componentDidMount() {
+    this.props.getRepos();
+    console.log(this.props.repos);
+  }
+
+  renderRepos() {
+
+    if (this.props.repos) {
+      const render = this.props.repos.map((repo) =>{
+        console.log(repo);
+        return (
+          <div className="repo">
+            <div><a href={repo.html_url}>{repo.name}</a></div>
+            <p>{repo.description}</p>
+          </div>
+        );
+      });
+      console.log(render);
+      return <div className="repo-list">{render}</div>;
+    }
+    return <div></div>;
+  }
+
+  render() {
+    return (
+      <div className="Github">
+        <h1>Github</h1>
+        <div>
+          {this.renderRepos()}
+        </div>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  return { repos: state.github.repos};
+}
+
+export default connect(mapStateToProps, { getRepos })(Github);

src/components/css/Github.css

@@ -0,0 +1,17 @@
+.repo {
+    display: flex;
+    flex-direction: column;
+    background-color: #DDDCDC;
+    border-radius: 10px;
+    padding: 10px;
+    align-items: center;
+    margin-top: 10px;
+}
+
+.repo-list {
+    display:flex;
+    flex-direction: column;
+    width: 50vw;
+    margin-left: auto;
+    margin-right: auto;
+}