Use CRA for God's sake

react-tuto/src/index.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import ReactMarkdown from 'react-markdown';
 import { Switch, Route, HashRouter, Link } from 'react-router-dom';
 import About from './components/About';
@@ -8,12 +7,12 @@ import Navbar from './components/Navbar';
 import Page from './components/Page';
 const markdown = require('./resources/markdown.json');
 
-const $leftPanel = $('#left-panel');
-const $window = $(window);
-function onResize() {
-  $leftPanel.css('max-height', $window.height());
-}
-$window.on('resize', onResize);
+// const $leftPanel = $('#left-panel');
+// const $window = $(window);
+// function onResize() {
+//   $leftPanel.css('max-height', $window.height());
+// }
+// $window.on('resize', onResize);
 
 function getSection(sectionIndex) {
   const section = markdown[sectionIndex];
@@ -89,7 +88,7 @@ function getSectionRoutes(section, sIndex) {
   return routes.map(r => <Route key={r.key} exact path={r.path} component={r.component} />);
 }
 
-ReactDOM.render(
+const App = () => (
     <HashRouter>
       <div id="react-wrapper">
         <Navbar />
@@ -103,6 +102,7 @@ ReactDOM.render(
           </Switch>
         </div>
       </div>
-  </HashRouter>,
-  document.getElementById('left-panel')
+  </HashRouter>
 );
+
+export default App;

react-tuto/src/components/Page.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
 import { Link } from 'react-router-dom';
+import Prism from 'prismjs';
 
 let first = true;
 class Page extends React.Component {
@@ -11,27 +12,31 @@ class Page extends React.Component {
   }
 
   componentDidMount() {
+    this.main = document.querySelector('.main');
+    this.nav = document.querySelector('nav');
+    this.pgWrapper = document.querySelector('.pagination-wrapper');
+    console.log(this.main, this.nav, this.pgWrapper);
 
     // Re-highlight with Prism
     Prism.highlightAll();
 
     // Display li with bullets
-    this.div = $('.page');
-    this.div.find('ul').addClass('browser-default');
+    // this.div = $('.page');
+    // this.div.find('ul').addClass('browser-default');
 
     this.onResize();
-    $(window).on('resize', this.onResize);
+    window.addEventListener('resize', this.onResize);
   }
 
   /**
    * Fix pagination at bottom if content height < window height
    */
   onResize() {
-    if($('.main').outerHeight() + $('nav').height() <= $(window).height()) {
-      $('.pagination-wrapper').addClass('abs-bottom');
+    if(this.main.outerHeight + this.nav.outerHeight <= window.outerHeight) {
+      this.pgWrapper.classList.add('abs-bottom');
     }
     else {
-      $('.pagination-wrapper').removeClass('abs-bottom');
+      this.pgWrapper.classList.remove('abs-bottom');
     }
   }