react-web-tutorial/react-tuto/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import ReactMarkdown from 'react-markdown';
import { Switch, Route, HashRouter, Link } from 'react-router-dom';
const markdown = require('./markdown.json');
const intro = `
Cette appli est un petit guide pour débuter en JavaScript, qui s'adresse à ceux
qui connaissent déjà un autre langage - Java en l'occurence.

On va présenter les bases nécessaires pour interagir avec une page web, sans
entrer dans les détails du langage.

Précisons que le fait qu'il soit disponible sur tous les navigateurs et machines
(ordinateurs, tablettes, smartphones), fait de JavaScript la plate-forme d'exécution
de programmes **la plus répandue**.
`;

class Page extends React.Component {
  componentDidMount() {
    Prism.highlightAll();
    $('.page ul').addClass('browser-default');
  }
  render() {
    const { title, content } = this.props.page;
    const { section } = this.props;
    return (
      <div className="page">
        <div>
          <Link to='/' className="breadcrumb light-blue-text"><i className="material-icons">home</i></Link>
          <Link to={section.path} className="breadcrumb light-blue-text">{section.title}</Link>
          <span className="breadcrumb grey-text">{title}</span>
        </div>

        <h4 className="header orange-text">{title}</h4>
        <ReactMarkdown source={content} escapeHtml={false} />
      </div>
    );
  }
}

class Home extends React.Component {
  render() {
    return (
      <div>
        <div>
          <span className="breadcrumb light-blue-text"><i className="material-icons">home</i></span>
          <span className="breadcrumb grey-text">Accueil</span>
        </div>
        <h4 className="header orange-text">Accueil</h4>
        <ReactMarkdown source={intro} />
        {getSectionLinks()}
      </div>

    );
  }
}


function getSection(sectionIndex) {
  const section = markdown[sectionIndex];
  return () => (
    <div>
      <div>
        <Link to='/' className="breadcrumb light-blue-text"><i className="material-icons">home</i></Link>
        <span className="breadcrumb grey-text">{section.title}</span>
      </div>
      <h4 className="header orange-text">{section.title}</h4>
      {getSectionPageLinks(section)}
    </div>
  );
}

function getSectionPagination(section, activeIndex) {
  const lastIndex = section.items.length - 1;
  const previousHref = activeIndex === 0 ? section.path :
    section.path + section.items[activeIndex - 1].path;
  const nextHref = activeIndex === lastIndex ? section.path :
    section.path + section.items[activeIndex + 1].path;
  return (
    <div className="pagination-wrapper">
      <ul className="pagination">
        <li className={ activeIndex === 0 ? "disabled": "waves-effect"}>
          <Link to={previousHref}><i className="material-icons">chevron_left</i></Link>
        </li>
        {
          section.items.map((page, pIndex) => (
            <li key={pIndex} className={ activeIndex === pIndex ? "active orange": "waves-effect"}>
              <Link to={section.path + page.path}>{pIndex + 1}</Link>
            </li>
          ))
        }
        <li className={ activeIndex === lastIndex ? "disabled": "waves-effect"}>
          <Link to={nextHref}><i className="material-icons">chevron_right</i></Link>
        </li>
      </ul>
    </div>
  );
}

function getPage(sectionIndex, pageIndex) {
  const section = markdown[sectionIndex];
  const page = section.items[pageIndex];
  return () => (
    <div>
      <Page page={page} section={section} />
      {getSectionPagination(section, pageIndex)}
    </div>
  );
}


function getSectionPageLinks(section) {
  return (
    <ul>
    {section.items.map((page, pIndex) => (
      <li key={pIndex}><Link to={section.path + page.path}>{page.title}</Link></li>
    ))}
    </ul>
  );
}

function getSectionLinks() {
  return (
    <ul>
    {markdown.map((section, sIndex) => (
      <li key={sIndex}><Link to={section.path}>{section.title}</Link></li>
    ))}
    </ul>
  );
}

function getSectionRoutes(section, sIndex) {
  const routes = [{
    key: sIndex, path: section.path, component: getSection(sIndex)
  }].concat(section.items.map((page, pIndex) => ({
    key: sIndex + '-' + pIndex,
    path: section.path + page.path,
    component: getPage(sIndex, pIndex)
  })));
  // return <Route key={sIndex} exact path={section.path} component={getSection(sIndex)} />;
  return routes.map(r => <Route key={r.key} exact path={r.path} component={r.component} />);
}

ReactDOM.render(
    <HashRouter>
      <div>
        {/*}<ul>{
          markdown.map((section, sIndex) => (
            <li key={sIndex}><Link to={section.path}>{section.title}</Link>
            {getSectionPageLinks(section)}
            </li>
          ))
        }
          <li><Link to="/">Home</Link></li>
        </ul>*/}
        <Switch>
          <Route exact path="/" component={Home} />
          {
            markdown.map(getSectionRoutes)
          }
        </Switch>
      </div>
  </HashRouter>,
  document.getElementById('root')
);