Update to React 18

blog_posts/breaking-react.md

@@ -33,7 +33,9 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
 ```
 
 This is a pretty simple React application, with a container, two buttons and a state variable. The problem is it will crash if you click the button that calls `destroyElement()` and then click the other one. _Why?_ you might ask. The issue here might not be immediately obvious, but if you look at your browser console you will notice the following exception:

blog_posts/react-conditional-classname.md

@@ -22,12 +22,11 @@ const OtherComponent = ({ enabled }) => {
   return ( <div className={enabled ? 'enabled' : null}> Hi </div> );
 };
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <>
     <MyComponent enabled={false} />
     <OtherComponent enabled={false} />
-  </>,
+  </>
-  document.getElementById('root')
 );
 ```
 

blog_posts/react-use-state-with-label.md

@@ -26,7 +26,9 @@ const Counter = () => {
   );
 };
 
-ReactDOM.render(<Counter />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Counter />
+);
 // Inspecting `Counter` in React developer tools will display:
 //  StateWithLabel: "counter: 0"
 ```