content: import React, { Component } from 'react';
  import './App.css';
  import 'jquery'
  import 'bootstrap';
  import 'bootstrap/dist/css/bootstrap.min.css';
  import 'bootstrap/dist/js/bootstrap.min.js';
  import 'font-awesome/css/font-awesome.min.css';
  import 'font-awesome/fonts/fontawesome-webfont.eot';
  import 'font-awesome/fonts/fontawesome-webfont.woff';
  import 'font-awesome/fonts/fontawesome-webfont.woff2';
  import 'font-awesome/fonts/fontawesome-webfont.ttf';
  import 'font-awesome/fonts/FontAwesome.otf';
  import Editor from './Editor';
  import Viz from './Viz';
  import Config from './Config';
  
  class App extends Component {
    constructor() {
      super()
      this.state = {
        keepTrace: false,
        speed: 10
      }
      this.handleConfigChange = this.handleConfigChange.bind(this)
    }
  
    handleConfigChange(config) {
      this.setState({ speed: config.speed, keepTrace: config.keepTrace })
    }
  
    render() {
      return (
        <div className="App">
          <nav className="navbar navbar-expand-lg navbar-light" style={{ backgroundColor: '#D46A6A' }} >
            <a className="navbar-brand" href="#">Reprise</a>
            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
              <span className="navbar-toggler-icon"></span>
            </button>
            <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
              <div className="navbar-nav">
                <a className="nav-item nav-link active" href="#">Home <span className="sr-only">(current)</span></a>
                <div className="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                  <a className="dropdown-item" href="#">Nouveau </a>
                </div>
                <div className="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                  <a className="dropdown-item" href="#">Enregistrer </a>
                </div>
              </div>
            </div>
          </nav>
  
          <div className="container">
            <div className="row">
              <div className="col-sm">&nbsp;</div>
              <div className="col-sm">&nbsp;</div>
              <div className="col-sm">&nbsp;</div>
            </div>
            <div className="row">
              <div className="col-sm">
                <Editor config={this.state}></Editor>
              </div>
              <div className="col-sm">
                <Viz />
              </div>
              <div className="col-sm">
                <Config OnConfigChange={this.handleConfigChange}> </Config>
              </div>
            </div>
          </div>
        </div>
      );
    }
  }
  
  export default App;
  