Issue #266: fix ReactDOM.render error (#595)

* fix: use createRoot()

React 18 uses createRoot() now instead
of ReactDOM.render(). I make the replace-
ment to fix the error.

* perf: use system fonts before load

This fixes the Lighthouse error
"Ensure text remains visible during
webfont load". If the font hasn't
loaded yet, you might get invisible
text. `font-display: swap` fixes
this by using the system font
until the correct one has loaded.
It also improves website load.

client/src/components/App/App.css

@@ -41,6 +41,7 @@ html {
   line-height: 1.15;
   -webkit-text-size-adjust: 100%;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  font-display: swap;
 }
 
 body {

client/src/components/Footer/Footer.scss

@@ -5,6 +5,7 @@
   width: 100%;
   font-family: "Montserrat", sans-serif;
   border-top: rgba(0, 0, 0, 0.472) solid 1px;
+  font-display: swap;
 
   &__content {
     display: flex;

client/src/components/Header/Header.scss

@@ -2,6 +2,7 @@
   font-family: wtt-thin;
   src: local('wtt-thin'),
     url('../../assets/fonts/WTT-THIN.ttf') format('truetype');
+  font-display: swap;
 }
 
 .header {
@@ -25,6 +26,7 @@
     font-size: 1.8rem;
     word-spacing: 0.6rem;
     border: 1px solid #ddd;
+    font-display: swap;
   }
 
   &__font-link:hover {

client/src/components/Sidebar/Sidebar.scss

@@ -10,4 +10,5 @@
 .sidebar-content {
   font-weight: 900;
   font-family: "Roboto Mono", monospace;
+  font-display: swap;
 }

client/src/index.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 // The webpack.resolve.alias setting in webpack.config.js aliases '@' to 'client/src', so that all
 // the import paths can start from there, instead of being relative to the current file.
 import App from '@/components/App/App';
 
-ReactDOM.render(<App />, document.querySelector('.root'));
+const root = createRoot(document.querySelector('.root'));
+root.render(<App />);