Add project files
This commit is contained in:
42
00_uebungs-files/02_docker-basics-react/src/App.css
Normal file
42
00_uebungs-files/02_docker-basics-react/src/App.css
Normal file
@@ -0,0 +1,42 @@
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.counter {
|
||||
margin: 2rem 0;
|
||||
padding: 1rem;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #61dafb;
|
||||
border: none;
|
||||
color: #282c34;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #4fa8c3;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 2rem;
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
28
00_uebungs-files/02_docker-basics-react/src/App.js
Normal file
28
00_uebungs-files/02_docker-basics-react/src/App.js
Normal file
@@ -0,0 +1,28 @@
|
||||
import React, { useState } from 'react';
|
||||
import './App.css';
|
||||
|
||||
function App() {
|
||||
const [count, setCount] = useState(0);
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<h1>React Docker Demo</h1>
|
||||
<p>Diese App läuft in einem Docker-Container</p>
|
||||
|
||||
<div className="counter">
|
||||
<p>Du hast den Button {count} mal geklickt</p>
|
||||
<button onClick={() => setCount(count + 1)}>
|
||||
Klick mich!
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="info">
|
||||
Build-Zeit: {process.env.REACT_APP_BUILD_TIME || 'Unbekannt'}
|
||||
</p>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
13
00_uebungs-files/02_docker-basics-react/src/index.css
Normal file
13
00_uebungs-files/02_docker-basics-react/src/index.css
Normal file
@@ -0,0 +1,13 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
11
00_uebungs-files/02_docker-basics-react/src/index.js
Normal file
11
00_uebungs-files/02_docker-basics-react/src/index.js
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
Reference in New Issue
Block a user