React

.gitignore

@@ -30,5 +30,7 @@
 # Ignore master key for decrypting credentials and more.
 /config/master.key
 
+/node_modules
+/app/assets/javascripts/*
 /app/assets/builds/*
 !/app/assets/builds/.keep

README.md

@@ -1,7 +1,7 @@
 # IOU App
 ### An expense tracking application built with Rails 7
 
-Demo available at https://iou.up.railway.app or http://iou-app.tk
+Demo available at https://iou.up.railway.app
 
 <hr>
 
@@ -13,3 +13,11 @@ Demo available at https://iou.up.railway.app or http://iou-app.tk
 
 #### Edit bill
 <img width="521" alt="3  edit bill" src="https://user-images.githubusercontent.com/35932803/190051795-8705af8f-3169-46cb-a09d-23ea29cdfbb3.png">
+
+<hr>
+
+##### Running application
+- `npm i`
+- `npm run build`
+- `npm run watch`
+- `rails s`

app/javascript/application.js

@@ -1,10 +1,11 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
-import "controllers"
+import "./controllers"
 import { far } from "@fortawesome/free-regular-svg-icons"
 import { fas } from "@fortawesome/free-solid-svg-icons"
 import { fab } from "@fortawesome/free-brands-svg-icons"
 import { library } from "@fortawesome/fontawesome-svg-core"
 import "@fortawesome/fontawesome-free"
+import "./components/clock.jsx"
 
 library.add(far, fas, fab)

app/javascript/components/clock.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import htm from 'htm'
+
+const h = htm.bind(React.createElement)
+
+class Clock extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state= { date: new Date() };
+  }
+
+  componentDidMount() {
+    this.timerID = setInterval(
+      () => this.tick(), 1000
+    );
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timerID);
+  }
+  tick() {
+    this.setState({
+      date: new Date()
+    });
+  }
+
+  render() {
+    return h`
+      <div>
+        <h1>Hello, world!</h1>
+        <h2>It is ${this.state.date.toLocaleTimeString()}.</h2>
+      </div>
+    `
+  }
+}
+
+ReactDOM.render(
+  h`<${Clock} />`,
+  document.getElementById('clock')
+);

app/javascript/components/clock.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+class Clock extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { date: new Date() };
+  }
+
+  componentDidMount() {
+    this.timerID = setInterval(
+      () => this.tick(), 1000
+    );
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timerID);
+  }
+  tick() {
+    this.setState({
+      date: new Date()
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>Hello, world!</h1>
+        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
+      </div>
+    )
+  }
+}
+
+ReactDOM.render(
+  <Clock />,
+  document.getElementById('clock')
+);

app/javascript/controllers/index.js

@@ -1,10 +1,10 @@
 // Import and register all your controllers from the importmap under controllers/*
 
-import { application } from "controllers/application"
+import { application } from "./application"
 
 // Eager load all controllers defined in the import map under controllers/**/*_controller
-import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
-eagerLoadControllersFrom("controllers", application)
+// import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+// eagerLoadControllersFrom("controllers", application)
 
 // Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
 // import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"

app/views/home/index.html.erb

@@ -1,4 +1,6 @@
 <div>
+<p>hi</p>
+<div id="clock"></div>
   <div class="py-5">
     <%= form_for(:search, url: root_path, method: :get) do |form| %>
       <span>Transactions from: </span>

app/views/layouts/application.html.erb

@@ -8,7 +8,8 @@
     <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
 
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
-    <%= javascript_importmap_tags %>
+    <%# <%= javascript_importmap_tags %>
+    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
   </head>
 
   <body class="bg-slate-100">

config/importmap.rb

@@ -10,3 +10,9 @@
 pin "@fortawesome/free-brands-svg-icons", to: "https://ga.jspm.io/npm:@fortawesome/free-brands-svg-icons@6.2.1/index.mjs"
 pin "@fortawesome/free-regular-svg-icons", to: "https://ga.jspm.io/npm:@fortawesome/free-regular-svg-icons@6.2.1/index.mjs"
 pin "@fortawesome/free-solid-svg-icons", to: "https://ga.jspm.io/npm:@fortawesome/free-solid-svg-icons@6.2.1/index.mjs"
+
+pin_all_from "app/javascript/components", under: "components"
+pin "react", to: "https://ga.jspm.io/npm:react@18.2.0/index.js"
+pin "react-dom", to: "https://ga.jspm.io/npm:react-dom@18.2.0/index.js"
+pin "scheduler", to: "https://ga.jspm.io/npm:scheduler@0.23.0/index.js"
+pin "htm", to: "https://ga.jspm.io/npm:htm@3.1.1/dist/htm.module.js"