ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-08-04 21:09:04 +02:00
parent 1afc687270
commit 07dfcec4ef
28 changed files with 6432 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
05_react/uebungen/uebungen-01-03-react/u01_hello-react/index.html Normal file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello React</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="dist/bundle.js" defer></script>
</head>
<body>
<div id="root"></div>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React: Hello React</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="dist/bundle.js" defer></script>
</head>
<body>
<!-- Content over react js -->
<div id="root"></div>
<div class="container py-5">
<div class="alert alert-primary">
<h2>Übung 1: Hello React!</h2>
<p>
Passe den Text in der App.jsx-Datei an, um eine andere Begrüßungsnachricht »Hello, React!« anzuzeigen.
Führe das Build-Skript erneut aus und aktualisiere die index.html-Datei im Browser, um die Änderungen zu
sehen.
</p>
</div>
</div>
</body>
</html>
</body>
</html>

0
05_react/uebungen/uebungen-01-03-react/u01_hello-react/src/App.jsx Normal file
View File

0
05_react/uebungen/uebungen-01-03-react/u01_hello-react/src/index.jsx Normal file
View File

4
05_react/uebungen/uebungen-01-03-react/u02-03_mathfn-modul/assets/js/main.js Normal file
View File

@@ -0,0 +1,4 @@
import { add, subtract } from './math';
console.log(add(1, 2)); // => 3;
console.log(subtract(3, 2)); //=> 1

13
05_react/uebungen/uebungen-01-03-react/u02-03_mathfn-modul/assets/js/math.js Normal file
View File

@@ -0,0 +1,13 @@
// explizite Freigabe von Einheiten
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
// Übung 2: Mathfunktionen als Modul
// Programmiere zwei weitere Module, die jeweils eine Funktion multiply und divide enthalten. Importiere die Funktionen in der main.js-Datei und führe sie aus.
// Übung 3: Exportieren Funktionen als Objekt
// Anstatt die Funktionen add, subtract, multiply und divide benannt zu exportieren, exportiere sie als Standard-Export in einem Objekt. Importiere das Objekt in der main.js-Datei und führe die Funktionen aus.

14
05_react/uebungen/uebungen-01-03-react/u02-03_mathfn-modul/esbuild.config.js Normal file
View File

@@ -0,0 +1,14 @@
// esbuild.config.js
// const esbuild = require('esbuild');
import * as esbuild from 'esbuild';
// https://esbuild.github.io/getting-started/#your-first-bundle
esbuild
.build({
entryPoints: ['assets/js/main.js'],
bundle: true,
outfile: 'dist/bundle.js',
minify: false,
sourcemap: true,
})
.catch(() => process.exit(1));

24
05_react/uebungen/uebungen-01-03-react/u02-03_mathfn-modul/index.html Normal file
View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Module in JS mit Bundler</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="dist/bundle.js" defer></script>
</head>
<body>
<main>
<div class="container py-5">
<h1>Verwendung und Import von Modulen in JS MIT BUNDLER</h1>
<hr />
<p>Um die Modul-Schreibweise in JS zu verwenden, müssen folgende Punkte berücksichtigt werden:</p>
<ul class="list">
<li>Eingebundene Module können ohne Dateiendung eingebunden werden.</li>
</ul>
<h3>Ergebnis</h3>
<p>Die einzelnen Komponenten werden zur Kompilierzeit zu einer Datei zusammengefasst</p>
</div>
</main>
</body>
</html>

18
05_react/uebungen/uebungen-01-03-react/u02-03_mathfn-modul/package.json Normal file
View File

@@ -0,0 +1,18 @@
{
"name": "02_modul-schreibweise",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "npx esbuild assets/js/main.js --bundle --watch --sourcemap --outfile=dist/bundle.js",
"server": "npx http-server -c-1 -p 3000"
},
"keywords": [],
"author": "",
"license": "ISC",
"type": "module",
"devDependencies": {
"esbuild": "^0.27.0",
"http-server": "^14.1.1"
}
}