Get components ready for webpack

react/BlueContent.js

@@ -1,11 +1,22 @@
 const React = require('react')
+const ReactDOM = require('react-dom')
 
 const BlueContent = (props) => {
   return (
-    <div style={{ color: 'blue' }}>
+    <div className='react-component-blue-content' style={{ color: 'blue' }}>
       {props.children}
     </div>
   )
 }
 
+if (typeof window === 'undefined') {
+} else {
+  const componentContainers = document.querySelectorAll('.react-component-blue-content')
+
+  for (const index of componentContainers) {
+    const componentContainer = componentContainers[index]
+    ReactDOM.hydrate(React.createElement(BlueContent), componentContainer)
+  }
+}
+
 module.exports = BlueContent

react/RedContent.js

@@ -1,11 +1,22 @@
 const React = require('react')
+const ReactDOM = require('react-dom')
 
 const RedContent = (props) => {
   return (
-    <div style={{ color: 'red' }}>
+    <div className='react-component-red-content' style={{ color: 'red' }}>
       {props.children}
     </div>
   )
 }
 
+if (typeof window === 'undefined') {
+} else {
+  const componentContainers = document.querySelectorAll('.react-component-red-content')
+
+  for (const index of componentContainers) {
+    const componentContainer = componentContainers[index]
+    ReactDOM.hydrate(React.createElement(RedContent), componentContainer)
+  }
+}
+
 module.exports = RedContent

react/Timer.js

@@ -1,4 +1,5 @@
 const React = require('react')
+const ReactDOM = require('react-dom')
 const { useState, useEffect } = require('react')
 
 const Timer = () => {
@@ -43,4 +44,14 @@ const Timer = () => {
   );
 };
 
-module.exports = Timer;
+if (typeof window === 'undefined') {
+} else {
+  const componentContainers = document.querySelectorAll('.react-component-timer')
+
+  for (const index of componentContainers) {
+    const componentContainer = componentContainers[index]
+    ReactDOM.hydrate(React.createElement(Timer), componentContainer)
+  }
+}
+
+module.exports = Timer