WIP 1

Gemfile.lock

@@ -279,7 +279,7 @@ GEM
       execjs (~> 2.5)
       rails (>= 5.2)
       rainbow (~> 3.0)
-    regexp_parser (2.8.1)
+    regexp_parser (2.8.2)
     reline (0.3.9)
       io-console (~> 0.5)
     representable (3.2.0)
@@ -371,7 +371,7 @@ GEM
       tilt (>= 2.1.0)
     stringio (3.0.8)
     temple (0.10.3)
-    thor (1.2.2)
+    thor (1.3.0)
     tilt (2.3.0)
     timeout (0.4.0)
     trailblazer-option (0.1.2)

app/javascript/bundles/App/components/App.jsx → app/javascript/components/App.jsx

@@ -1,3 +1,7 @@
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+// import style from './HelloWorld.module.css';
+
 const PlayerContext = React.createContext();
 const PlayerProvider = PlayerContext.Provider;
 const PlayerConsumer = PlayerContext.Consumer;

app/javascript/packs/mobile.css.scss

@@ -0,0 +1,3 @@
+body {
+  background-color: blue;
+}

app/javascript/packs/mobile.js

@@ -0,0 +1,7 @@
+import ReactOnRails from 'react-on-rails';
+
+import App from '../components/App';
+
+ReactOnRails.register({
+  App,
+});

app/javascript/packs/server-bundle.js

@@ -1,8 +1,8 @@
 import ReactOnRails from 'react-on-rails';
 
-import HelloWorld from '../bundles/HelloWorld/components/HelloWorldServer';
+import App from '../components/App';
 
 // This is how react_on_rails can see the HelloWorld in the browser.
 ReactOnRails.register({
-  HelloWorld,
+  App,
 });