HomePage, AboutPage, Header and Navigation

src/components/App.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Route } from "react-router-dom";
+import HomePage from "./home/HomePage";
+import AboutPage from "./about/AboutPage";
+import Header from "./common/Header";
+
+function App() {
+  return (
+    <div className="container-fluid">
+      <Header />
+      <Route exact path="/" component={HomePage} />
+      <Route path="/about" component={AboutPage} />
+    </div>
+  );
+}
+
+export default App;

src/components/about/AboutPage.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+const AboutPage = () => (
+  <div>
+    <h2>About</h2>
+    <p>
+      This app uses React, Redux, React Router, and many other helpful
+      libraries.
+    </p>
+  </div>
+);
+
+export default AboutPage;

src/components/common/Header.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+const Header = () => {
+  const activeStyle = { color: "#F15B2A" };
+
+  return (
+    <nav>
+      <NavLink to="/" activeStyle={activeStyle} exact>
+        Home
+      </NavLink>
+      {" | "}
+      <NavLink to="/about" activeStyle={activeStyle}>
+        About
+      </NavLink>
+    </nav>
+  );
+};
+
+export default Header;

src/components/home/HomePage.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const HomePage = () => (
+  <div className="jumbotron">
+    <h1>Pluralsight Administration</h1>
+    <p>React, Redux and React Router for ultra-responsive web apps.</p>
+    <Link to="about" className="btn btn-primary btn-lg">
+      Learn more
+    </Link>
+  </div>
+);
+
+export default HomePage;

src/index.css

@@ -0,0 +1,8 @@
+#app {
+  max-width: 850px;
+  margin: 0 auto;
+}
+
+nav {
+  padding: 20px 0 20px 0;
+}

src/index.js

@@ -1,8 +1,13 @@
 import React from "react";
 import { render } from "react-dom";
+import { BrowserRouter as Router } from "react-router-dom";
+import "bootstrap/dist/css/bootstrap.min.css";
+import App from "./components/App";
+import "./index.css";
 
-function Hi() {
-  return <p>Hi.</p>;
-}
-
-render(<Hi />, document.getElementById("app"));
+render(
+  <Router>
+    <App />
+  </Router>,
+  document.getElementById("app")
+);