first attempt

frontend/src/App.js

-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+import React, { Component } from "react";
+import Counters from "./components/counters";
+import "./App.css";
+import logo from "./ZRoom_Logo.png";
+
+//import { render } from "@testing-library/react";
+
+class App extends Component {
+  state = {
+    counters: [
+      { id: 1, value: "Frage?" },
+      { id: 2, value: 0 },
+      { id: 3, value: 0 },
+    ],
+  };
+  constructor() {
+    super();
+    console.log("App - Constructor");
+  }
+
+  componentDidMount() {
+    console.log("App - Mounted");
+  }
+
+  handleIncrement = (counter) => {
+    const counters = [...this.state.counters];
+    const index = counters.indexOf(counter);
+    counters[index] = { ...counter };
+    counters[index].value++;
+    const requestURL = "http://localhost:5000/lamp/" + counters[index].id + "/activate"
+    fetch(requestURL)
+    this.setState({ counters });
+  };
+
+  handleReset = () => {
+    const counters = this.state.counters.map((c) => {
+      c.value = 0;
+      return c;
+    });
+    this.setState({ counters });
+  };
+
+  handleDelete = (counterId) => {
+    const counters = this.state.counters.filter((c) => c.id !== counterId);
+    this.setState({ counters });
+  };
+
+  render() {
+    console.log("App - Rendered");
+    return (
+      <React.Fragment>
+        <main className="container">
+          <img src={logo} alt="ZRoom Logo" class="rounded mx-auto d-block m-5" />
+          <Counters
+            counters={this.state.counters}
+            onReset={this.handleReset}
+            onIncrement={this.handleIncrement}
+            onDelete={this.handleDelete}
+          />
+        </main>
+      </React.Fragment>
+    );
+  }
 }
 
 export default App;

frontend/src/components/counter.jsx

+import React, { Component } from "react";
+
+class Counter extends Component {
+  getBadgeClasses() {
+    let classes = "badge m-2 bg-";
+    classes += this.props.counter.value === 0 ? "warning text-dark" : "primary";
+    return classes;
+  }
+
+  formatCount() {
+    const { value } = this.props.counter;
+    return value === 0 ? "Zero" : value;
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    console.log("prevProps", prevProps);
+    console.log("prevState", prevState);
+    if (prevProps.counter.value !== this.props.counter.value) {
+      // Ajax call and get new data from the server
+    }
+  }
+
+  componentWillUnmount() {
+    console.log("Counter - Unmount");
+  }
+  render() {
+    console.log("Counter - Rendered");
+    return (
+      <div>
+        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
+        <button
+          onClick={() => this.props.onIncrement(this.props.counter)}
+          className="btn btn-secondary btn-sm"
+        >
+          Increment
+        </button>
+        <button
+          onClick={() => this.props.onDelete(this.props.counter.id)}
+          className="btn btn-danger btn-sm m-2"
+        >
+          Delete
+        </button>
+      </div>
+    );
+  }
+}
+
+//   constructor() {
+//     super();
+//     this.handleIncrement =  this.handleIncrement.bind(this);
+//   }
+
+export default Counter;

frontend/src/components/counters.jsx

+import React, { Component } from "react";
+import Counter from "./counter";
+
+class Counters extends Component {
+  render() {
+    console.log("Counters - Rendered");
+    const { onReset, counters, onDelete, onIncrement } = this.props;
+    return (
+      <div>
+        <button onClick={onReset} className="btn btn-primary btn-sm m-2">
+          Reset
+        </button>
+        {counters.map((counter) => (
+          <Counter
+            key={counter.id}
+            onDelete={onDelete}
+            onIncrement={onIncrement}
+            counter={counter}
+          />
+        ))}
+      </div>
+    );
+  }
+}
+
+export default Counters;
+<div></div>;

frontend/src/index.js

-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import "bootstrap/dist/css/bootstrap.css";
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
+ReactDOM.render(<App />, document.getElementById("root"));
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))