Use Facebook Create App

Very simple app (in CodePen : https://codepen.io/anon/pen/JOjevM)

const App = () => (
<div>
  <h1>Cool App</h1>
</div>
)

ReactDOM.render(<App/>,document.getElementById("app"));

Creating an API

const PlayerAPI = {
   players: [
      { number: 1, name: "Ben Blocker", position: "G" },
      { number: 2, name: "Dave Defender", position: "D" },
      { number: 3, name: "Sam Sweeper", position: "D" },
      { number: 4, name: "Matt Midfielder", position: "M" },
      { number: 5, name: "William Winger", position: "M" },
      { number: 6, name: "Fillipe Forward", position: "F" }
   ],
   all: function() {
      return this.players;
   },
   get: function(id) {
      const isPlayer = p => p.number === id;
      return this.players.find(isPlayer);
   }
};

Using the API

const App = () => (
   <div>
      <h1>Cool App</h1>
      <ul>
      {PlayerAPI.all().map(p => (
        <li key={p.number}>
         <div>{p.name}</div>
        </li>
      ))}      
      </ul>
   </div>
);

Other component

const Detail = (props) => (
   <div>
      {props.player.name}   
   </div>
      
);

or shorter:

const Detail = ({player}) => (
   <div>
      {player.name}   
   </div>
      
);

Using the component:

ReactDOM.render(
   <Detail player={PlayerAPI.get(1)} />, 
   document.getElementById("app"));```

You need to import some stuff :

import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from './components/App';

or

const { BrowserRouter, Switch, Route, Link } = ReactRouterDOM;

and code:

render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('root'));

Your main app should define the top level routes

const App = () => (
   <div>
      <Header />
      <main>
         <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/master-detail" component={MasterDetail} />
            <Route path="/about" component={About} />
         </Switch>
      </main>
   </div>
);

Our header section simply displays the links to the routes

const Header = () => (
  <header>
               <Link to="/">Home</Link>
               <Link to="/master-detail">MasterDetail</Link>
               <Link to="/about">About</Link>
   </header>
);

When we click a link, a certain route is activated and the assoicated component is rendered.

When clicking masterdetail link, the MasterDetail component is rendered:

const MasterDetail = () => (
  <Switch>
    <Route exact path='/master-detail' component={Master}/>
    <Route path='/master-detail/:number' component={Detail}/>
  </Switch>
);

The MasterDetail is capable of rendering 2 components. Master or Detail, depending on the path.