ADD react-router

IMPROVE style

Author: ackvf

package-lock.json

@@ -5,6 +5,7 @@
  "dependencies": {
  "react": "^16.3.2",
  "react-dom": "^16.3.2",
+ "react-router-dom": "^4.3.1",
  "react-scripts": "1.1.4"
  },
  "scripts": {
@@ -13,4 +14,4 @@
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
  }
-}
+}

package.json

@@ -9,7 +9,8 @@
 }
 
 .App-header {
- background-color: #222;
+ background-color: #222 !important;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAgMAAAANjH3HAAAACVBMVEUaGhohISElJSUh9lebAAABwElEQVR4AY3Vua3gOBgGQQXZhgKYgwHJYAA0Ksu9CAh6hxbTbvFzfx6rNEGlHY6z5KvMw4s43mN2Z5fqYLzKyrfyXhXKnKBdD9n58UWW3Vlb3mOCmWoHHZbdV5lv8t7Ver6ldsfqumVAdbblxxcZVcd7QWq2Y6VsadS4ZTzFDbFa5XivqlxVUFG1Jd6k66u8x0RIOw0cXAiNW2z58bJ5r1LTQtVVuy1x2jK+yLTlxy3v5RogszEXSB0ZF4iYWLbMMUBGPDbvpRQUVUV9kvGU6ynrIe9FOqssJcQ4oqurCjV6ytmqco4SwvGeNCoJaphwSHoK13cyuuU9ZaQI0lB1qB8zT3GL2XjKueU9pR+gH0OlqvGUzHWLQ81O0Dg95L3Uj9qxKx0pr3LdYrnlvQKlUEnV/8v4Xt6bThZROwaO5QfTUyY4GCBWu8Wf/nO4ULtj/li3mE9Z47zlx/WU94Iq7RD5XuZ6ynjIGn9yr1VhFaq2NH9s4bP4Rt5j2NFO5MBXGVsmsD5v3gslYORsd8R1i1rrIUoLKLXlvVhgKH7ApToyhk21TJhbLDvdN151vEetJtKdOtYo4SmnOvhGpjpe+xuj3X723ghdygAAAABJRU5ErkJggg==) !important;
  height: 150px;
  padding: 20px;
  color: white;
@@ -19,6 +20,11 @@
  font-size: 1.5em;
 }
 
+.App-title-link {
+ text-decoration: none;
+ color: white;
+}
+
 .App-intro {
  font-size: large;
 }
@@ -66,3 +72,40 @@
 .octicon:hover {
  fill: #4183C4;
 }
+
+.octoicon-link:hover::after {
+ animation: shine 1s 0s;
+}
+
+
+.octoicon-link {
+ display: inline-block;
+ position: relative;
+ clip-path: circle(30px at 40px 40px);
+}
+
+.octoicon-link:after {
+ content: "";
+ position: absolute;
+ right: 0%;
+ width: 25%;
+ height: 100%;
+ opacity: 0;
+ transform: rotate(30deg);
+ background: rgba(255, 255, 255, 0.13);
+ background: linear-gradient(
+ to right,
+ #4183C421 0%,
+ #4183C421 77%,
+ #4183C480 92%,
+ #4183C421 100%
+ );
+ animation: shine 1s 3s;
+}
+
+@keyframes shine {
+ to {
+ opacity: 1;
+ right: 100%;
+ }
+}

src/App.css

@@ -1,20 +1,32 @@
 import React, { Component } from 'react'
+import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'
+
 import logo from './logo.svg'
 import './App.css'
 
+import Landing from './pages/Landing'
 import ContextAPI from './experiments/ContextAPI'
 
 class App extends Component {
  render() {
  return (
- <div className="App">
- <header className="App-header">
- <img src={logo} className="App-logo" alt="logo"/>
- <a href="https://github.com/ackvf/react-experiments"><svg height="60" className="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1"><path fillRule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg></a>
- <h1 className="App-title">Welcome to React Experiments</h1>
- </header>
- <ContextAPI/>
- </div>
+ <Router>
+ <div className="App">
+ <header className="App-header">
+ <img src={logo} className="App-logo" alt="logo"/>
+ <a href="https://github.com/ackvf/react-experiments" className='octoicon-link'>
+ <svg height="60" className="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1"><path fillRule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
+ </a>
+ <Link to='' className='App-title-link'><h1 className="App-title">Welcome to React Experiments</h1></Link>
+ </header>
+ <Switch>
+
+ <Route exact path='/context-api' component={ContextAPI}/>
+ <Route component={Landing} />
+
+ </Switch>
+ </div>
+ </Router>
  )
  }
 }

src/App.jsx

@@ -43,7 +43,7 @@ section c-c, .consumer {
  outline: 1px solid silver;
 }
 
-section article c-c{
+section article c-c {
  outline-offset: 4px
 }
 

src/experiments/ContextAPI/style.css

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+export default class Landing extends React.Component {
+ render() {
+ return (
+ <ul>
+ <li><Link to='context-api'>React 16.3. Context API</Link></li>
+ </ul>
+ )
+ }
+}