starter code

04-authenticated-routing/src/components/AboutComponent.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const About = () => {
+    return (
+        <div className="jumbotron">
+            <h1 className="display-3">About Me</h1>
+        </div>
+    );
+}
+
+export default About;

04-authenticated-routing/src/components/App.js

@@ -1,21 +1,51 @@
 import React, { Component } from 'react';
-import logo from '../logo.svg';
 import '../styles/App.css';
 
+import Home from './HomeComponent';
+import Hello from './HelloComponent';
+import About from './AboutComponent';
+import Books from './BooksComponent';
+
+
+// import route Components here
+import {
+  BrowserRouter as Router,
+  Route,
+  Link,
+  Switch,
+  Redirect
+} from 'react-router-dom'
+
+
 class App extends Component {
   render() {
     return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
+      <Router>
+        <div className="App">
+
+          <div className="container">
+            <ul>
+              <li><Link to="/hello">Hello</Link></li>
+              <li><Link to="/about">About</Link></li>
+              <li>
+                <Link to="/books">Books</Link>
+              </li>
+            </ul>
+            <hr/>
+
+          <Switch>
+            <Route exact path="/" component={Home} />
+            <Route path="/about" component={About} />
+            <Route path="/hello" component={Hello} />
+            <Route path="/books" component={Books} />
+          </Switch>
+
+          </div>
+        </div>
+      </Router>
     );
   }
 }
 
+
 export default App;

04-authenticated-routing/src/components/BooksComponent.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import {
+    BrowserRouter as Router,
+    Route,
+    Link,
+    Switch,
+    Redirect
+  } from 'react-router-dom';
+
+const Books = ({ match }) => {
+    return (
+        <div>
+            <div className="jumbotron">
+                <h1 className="display-3">My Books</h1>
+            </div>
+
+            <div className="container">
+            <div className="row">
+                <div className="col-md-3">
+                    <ul>
+                    <li><Link to={`${match.url}/html`}>HTML</Link></li>
+                    <li><Link to={`${match.url}/css`}>CSS</Link></li>
+                    <li><Link to={`${match.url}/react`}>React</Link></li>
+                    </ul>
+                </div>
+                <div className="col-md-9">
+                    <Route path={`${match.path}/html`} render={() => { return <h1>HTML by Ducket book</h1> }}/>
+                    <Route path={`${match.path}/css`} render={() => { return <h1>CSS by Racheal Andrews</h1> }}/>
+                    <Route path={`${match.path}/react`} render={() => { return <h1>React by Fullstack.io book</h1> }}/>
+                    <Route path={`${match.path}/:id`} component={Child} />
+                </div>
+            </div>
+            </div>
+        </div>
+    );
+}
+
+const Child = ({ match }) => (
+    <div>
+      <h3>URL ID parameter: {match.params.id}</h3>
+    </div>
+);
+
+
+export default Books;
+
+
+
+

04-authenticated-routing/src/components/HelloComponent.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Hello = () => {
+    return (
+        <div className="jumbotron">
+            <h1 className="display-3">Hello, world!</h1>
+        </div>
+    );
+}
+
+export default Hello;

04-authenticated-routing/src/components/HomeComponent.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Home = () => {
+    return (
+        <div className="jumbotron">
+            <h1 className="display-3">Landing page</h1>
+        </div>
+    );
+}
+
+export default Home;

04-authenticated-routing/src/styles/App.css

@@ -1,28 +1,6 @@
 .App {
-  text-align: center;
+  padding-top: 50px;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-}
-
-.App-title {
-  font-size: 1.5em;
-}
-
-.App-intro {
-  font-size: large;
-}
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
+@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css');