init

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,26 +1,14 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import ListContainer from "./ListContainer";
 
-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>
-  );
+class App extends React.Component {
+    render() {
+        return (
+            <div>
+                <ListContainer/>
+            </div>
+        );
+    }
 }
 
 export default App;

src/App.test.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/ListContainer.js

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import ListElement from "./ListElement";
+import style from './ListContainer.module.css';
+
+class ListContainer extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+
+        this.state = {
+            elements: [],
+            title: "Container of Elements"
+        }
+
+        this.handleclick = this.handleclick.bind(this);
+    }
+
+    render() {
+        return (
+            <div className={style.mainbody}>
+                <div className={style.title}>
+                    {this.state.title}
+                </div>
+                <div>
+                    <button onClick={this.handleclick}>click me</button>
+                </div>
+                <div>
+                    {
+                        this.state.elements.map((elemname) => (
+                            <ListElement></ListElement>
+                        ))
+                    }
+                </div>
+            </div>
+        );
+    }
+
+    handleclick() {
+        let elems = this.state.elements;
+        elems.push("TESTNAME");
+        this.setState({elements: elems, title: "Container of several Elements"});
+    }
+}
+
+export default ListContainer;

src/ListContainer.module.css

@@ -0,0 +1,13 @@
+.mainbody{
+    margin-left: 200px;
+    margin-top: 150px;
+
+    width: 500px;
+
+    background-color: coral;
+}
+
+.title{
+    text-align: center;
+    color: blue;
+}

src/ListElement.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import style from './ListElement.module.css'
+
+class ListElement extends React.Component {
+    render() {
+        return (
+            <div className={style.mainelement}>
+                This is a element.
+            </div>
+        );
+    }
+}
+
+export default ListElement;

src/ListElement.module.css

@@ -0,0 +1,9 @@
+.mainelement {
+    text-align: center;
+    color: #5f4508;
+}
+
+.mainelement:hover {
+    background-color: red;
+    opacity: 0.7;
+}