step-3-home-page-styled-components

In this step, we move the HomePage component and the styled components that go along with it to it’s own file under /components/HomePage.js

We also move the necessary “imports” to that file, and at the bottom of the file we export the HomePage as the default export so that other parts of our app can import and use it.

Then, in our index.js file, where we removed all the HomePage and styled components, we now just add HomePage as an import, and we’re at the same spot we were, our files just have some more order to them.

Now we can move on to learn about routing!

assets/app/src/components/HomePage.js

@@ -0,0 +1,82 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router';
+
+/**
+ * Create a wrapper div that will be used as the container for the page
+ */
+const Home = styled.div`
+  height:100vh;
+  background:black;
+  color:white;
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  flex-direction:column;
+  >section{
+    display:flex;
+    justify-content:center;
+    align-items:center;
+    flex-direction:column;
+  }
+`;
+
+/**
+ * Component that styles the homepage title
+ */
+const HomeTitle = styled.h1`
+  font-family: avengeance_mightiest_avengeRg;
+  font-size: 72px;
+  line-height: 90px;
+`;
+
+/**
+ * Component that styles the homepage description
+ */
+const Description = styled.div`
+  font-family: TTFirsMedium;
+  font-size: 45px;
+  line-height: 50px;
+  padding: 30px;
+  max-width:750px;
+  text-align:center;
+  margin-bottom:40px;
+`;
+
+/**
+ * Component that styles the "Explore" button
+ */
+const ExploreButton = styled.span`
+  background:#ad0000;
+  color:white;
+  border-radius:25px;
+  text-align:center;
+  font-size: 25px;
+  line-height: 40px;
+  padding: 10px 20px;
+  font-family:TTFirsMedium;
+  &:hover{
+    background:#0087be;
+  }
+`;
+
+class HomePage extends Component {
+  render() {
+    return(
+      <Home>
+        <section>
+          <HomeTitle>WordFlix</HomeTitle>
+          <Description>Your favorite super-powered Single Page App for browsing Super Hero Movies!</Description>
+          <Link to="/movies">
+            <ExploreButton>Explore Films</ExploreButton>
+          </Link>
+        </section>
+      </Home>
+    )
+  }
+}
+
+/**
+ * Export the HomePage to be used elsewhere as an import
+ */
+export default HomePage;

assets/app/src/index.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import styled from 'styled-components';
-import { Link } from 'react-router';
+import HomePage from './components/HomePage';
 
 /**
  * NOTE: This imports the entire Ant Design CSS, which is overkill. . .I would recommend only importing the parts
@@ -10,79 +9,7 @@ import { Link } from 'react-router';
 import 'antd/dist/antd.css';
 import './styles/style.css';
 
-/**
- * Create a wrapper div that will be used as the container for the page
- */
-const Home = styled.div`
-  height:100vh;
-  background:black;
-  color:white;
-  display:flex;
-  justify-content:center;
-  align-items:center;
-  flex-direction:column;
-  >section{
-    display:flex;
-    justify-content:center;
-    align-items:center;
-    flex-direction:column;
-  }
-`;
-
-/**
- * Component that styles the homepage title
- */
-const HomeTitle = styled.h1`
-  font-family: avengeance_mightiest_avengeRg;
-  font-size: 72px;
-  line-height: 90px;
-`;
-
-/**
- * Component that styles the homepage description
- */
-const Description = styled.div`
-  font-family: TTFirsMedium;
-  font-size: 45px;
-  line-height: 50px;
-  padding: 30px;
-  max-width:750px;
-  text-align:center;
-  margin-bottom:40px;
-`;
 
-/**
- * Component that styles the "Explore" button
- */
-const ExploreButton = styled.span`
-  background:#ad0000;
-  color:white;
-  border-radius:25px;
-  text-align:center;
-  font-size: 25px;
-  line-height: 40px;
-  padding: 10px 20px;
-  font-family:TTFirsMedium;
-  &:hover{
-    background:#0087be;
-  }
-`;
-
-class HomePage extends Component {
-  render() {
-    return(
-      <Home>
-        <section>
-          <HomeTitle>WordFlix</HomeTitle>
-          <Description>Your favorite super-powered Single Page App for browsing Super Hero Movies!</Description>
-          <Link to="/movies">
-            <ExploreButton>Explore Films</ExploreButton>
-          </Link>
-        </section>
-      </Home>
-    )
-  }
-}
 
 /**
  * This is the only component we actually render directly to the DOM!