<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Aplikacja jednostronowa</title>
</head>
 
<body>
  <div id="root"></div>
</body>
</html>
---

import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main";
 
ReactDOM.render(
  <Main/>,
  document.getElementById("root")
);
---

import React, { Component } from "react";
 
class Main extends Component {
  render() {
    return (
      <div>
        <h1>Prosta aplikacja jednostronowa</h1>
        <ul className="header">
          <li><a href="/">Strona główna</a></li>
          <li><a href="/stuff">O nas</a></li>
          <li><a href="/contact">Kontakt</a></li>
        </ul>
        <div className="content">
 
        </div>
      </div>
    );
  }
}
 
export default Main;
---

import React, { Component } from "react";
 
class Home extends Component {
  render() {
    return (
      <div>
        <h2>Witaj!</h2>
        <p>Cras facilisis urna ornare ex volutpat, et
        convallis erat elementum. Ut aliquam, ipsum vitae
        gravida suscipit, metus dui bibendum est, eget rhoncus nibh
        metus nec massa. Maecenas hendrerit laoreet augue
        nec molestie. Cum sociis natoque penatibus et magnis
        dis parturient montes, nascetur ridiculus mus.</p>
 
        <p>Duis a turpis sed lacus dapibus elementum sed eu lectus.</p>
      </div>
    );
  }
}
 
export default Home;
---

import React, { Component } from "react";
 
class Stuff extends Component {
  render() {
    return (
      <div>
        <h2>Opis</h2>
        <p>Mauris sem velit, vehicula eget sodales vitae,
        rhoncus eget sapien:</p>
        <ol>
          <li>Nulla pulvinar diam</li>
          <li>Facilisis bibendum</li>
          <li>Vestibulum vulputate</li>
          <li>Eget erat</li>
          <li>Id porttitor</li>
        </ol>
      </div>
    );
  }
}
 
export default Stuff;
---

import React, { Component } from "react";
 
class Contact extends Component {
  render() {
    return (
      <div>
        <h2>Masz pytania?</h2>
        <p>Najlepiej wyślij wiadomość przez 
           nasze <a href="http://forum.kirupa.com">forum</a>.
        </p>
      </div>
    );
  }
}
 
export default Contact;
---

import { 
  Route,
  NavLink,
  HashRouter
} from "react-router-dom";
import Home from "./Home";
import Stuff from "./Stuff";
import Contact from "./Contact";
---

          <li><NavLink to="/">Strona główna</NavLink></li>
          <li><NavLink to="/stuff">Opis</NavLink></li>
          <li><NavLink to="/contact">Kontakt</NavLink></li>
---

          <Route path="/" component={Home}/>
          <Route path="/stuff" component={Stuff}/>
          <Route path="/contact" component={Contact}/>
---

  <Route exact path="/" component={Home}/>
---

body {
  background-color: #FFCC00;
  padding: 20px;
  margin: 0;
}
h1, h2, p, ul, li {
  font-family: sans-serif;
}
ul.header li {
  display: inline;
  list-style-type: none;
  margin: 0;
}
ul.header {
  background-color: #111;
  padding: 0;
}
ul.header li a {
  color: #FFF;
  font-weight: bold;
  text-decoration: none;
  padding: 20px;
  display: inline-block;
}
.content {
  background-color: #FFF;
  padding: 20px;
}
.content h2 {
  padding: 0;
  margin: 0;
}
.content li {
  margin-bottom: 10px;
}
---

<li><NavLink exact to="/">Strona główna</NavLink></li>
---

