react: reworking / cleanup

horstjens · Sep 4, 2021 · 2a061e4 · 2a061e4
1 parent 0654e54
commit 2a061e4
Show file tree

Hide file tree

Showing 64 changed files with 714 additions and 733 deletions.
diff --git a/docs/index-collection-de.html b/docs/index-collection-de.html
diff --git a/docs/index-collection-en.html b/docs/index-collection-en.html
diff --git a/docs/react-all-collection-de.html b/docs/react-all-collection-de.html
diff --git a/docs/react-all-collection-en.html b/docs/react-all-collection-en.html
diff --git a/docs/react-collection-de.html b/docs/react-collection-de.html
diff --git a/docs/react-collection-en.html b/docs/react-collection-en.html
diff --git a/docs/react/10-basics-and-overview-de.html b/docs/react/10-basics-and-overview-de.html
@@ -2351,10 +2351,14 @@
 </section><section class="slide"><h2>Grundlegendes Beispiel: Slideshow</h2>
 <!-- prettier-ignore -->
 <pre><code class="hljs language-jsx">  <span class="hljs-keyword">const</span> [img, setImg] = useState(<span class="hljs-number">0</span>);
-  <span class="hljs-keyword">const</span> imgUrl = baseUrl + img.toString();
 </code></pre>
 <p>Eine Komponente kann interne State-Einträge haben</p>
 <p><code>useState</code> gibt bei jedem Rendering den aktuellen State-Eintrag und einen zugehörigen Setter zurück</p>
+</section><section class="slide"><h2>Grundlegendes Beispiel: Slideshow</h2>
+<!-- prettier-ignore -->
+<pre><code class="hljs language-jsx">  <span class="hljs-keyword">const</span> imgUrl = baseUrl + img.toString();
+</code></pre>
+<p>Üblicherweise wird der <em>minimale</em> State gespeichert</p>
 <p>Weitere Werte (z.B. <code>imgUrl</code>) können aus dem State abgeleitet werden</p>
 </section><section class="slide"><h2>Grundlegendes Beispiel: Slideshow</h2>
 <!-- prettier-ignore -->

diff --git a/docs/react/10-basics-and-overview-en.html b/docs/react/10-basics-and-overview-en.html
@@ -2349,10 +2349,14 @@
 </section><section class="slide"><h2>Basic example: slideshow</h2>
 <!-- prettier-ignore -->
 <pre><code class="hljs language-jsx">  <span class="hljs-keyword">const</span> [img, setImg] = useState(<span class="hljs-number">0</span>);
-  <span class="hljs-keyword">const</span> imgUrl = baseUrl + img.toString();
 </code></pre>
 <p>A component can have internal state entries</p>
 <p><code>useState</code> returns the current state entry and a corresponding setter on every render</p>
+</section><section class="slide"><h2>Basic example: slideshow</h2>
+<!-- prettier-ignore -->
+<pre><code class="hljs language-jsx">  <span class="hljs-keyword">const</span> imgUrl = baseUrl + img.toString();
+</code></pre>
+<p>We should usually store the <em>minimal</em> state</p>
 <p>Other values (like <code>imgUrl</code>) can be derived from the state values</p>
 </section><section class="slide"><h2>Basic example: slideshow</h2>
 <!-- prettier-ignore -->

diff --git a/docs/react/15-javascript-basics-for-react-en.html b/docs/react/15-javascript-basics-for-react-en.html
@@ -2139,7 +2139,7 @@
                   This is ES2015!`</span>;
 </code></pre>
 </section><section class="slide"><h2>The semicolon in JavaScript</h2>
-<p>The semicolon for ending statements is mostly optional in JavaScript (<em>automatic semicolon insertion</em>)</p>
+<p>The semicolon for terminating statements is mostly optional in JavaScript (<em>automatic semicolon insertion</em>)</p>
 <!-- prettier-ignore -->
 <pre><code class="hljs language-js"><span class="hljs-keyword">const</span> a = <span class="hljs-number">3</span>
 <span class="hljs-built_in">console</span>.log(a)

diff --git a/docs/react/20-state-collection-de.html b/docs/react/20-state-collection-de.html
@@ -1,4 +1,4 @@
-<html lang="de" style="height:100%"><head><meta charSet="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.min.css"/></head><body style="height:100%"><div style="height:100%;display:flex;align-items:stretch"><nav style="flex-basis:320px;overflow:auto;padding-top:4em;padding-left:1em;padding-right:1em;padding-bottom:0.5em;margin-bottom:0.5em"><div>parent topic: <a href="/slides/react-de.html">React Grundlagen</a></div><div><a href="react/20-state-de.html">show presentation individually</a></div><section><h1>State</h1><ul><li><a href="/slides/react/20-state-de.html#/0" target="content">State (Komponentenzustand)</a></li><li><a href="/slides/react/20-state-de.html#/1" target="content">Input State</a></li><li><a href="/slides/react/20-state-de.html#/2" target="content">Immutable State</a></li><li><a href="/slides/react/20-state-de.html#/3" target="content">Datenverwaltung ohne Mutationen</a></li></ul></section></nav><main style="flex-grow:1"><iframe name="content" style="width:100%;height:100%;border:none"></iframe></main><button id="nav-toggle-button" style="position:absolute;top:1rem;left:1rem;padding:0.4em 0.8em;cursor:pointer;border-radius:0.25em;background-color:#0074d9;color:#ffffff;border:none">toggle sidebar</button><style>
+<html lang="de" style="height:100%"><head><meta charSet="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.min.css"/></head><body style="height:100%"><div style="height:100%;display:flex;align-items:stretch"><nav style="flex-basis:320px;overflow:auto;padding-top:4em;padding-left:1em;padding-right:1em;padding-bottom:0.5em;margin-bottom:0.5em"><div>parent topic: <a href="/slides/react-de.html">React Grundlagen</a></div><div><a href="react/20-state-de.html">show presentation individually</a></div><section><h1>State</h1><ul><li><a href="/slides/react/20-state-de.html#/0" target="content">State (Komponentenzustand)</a></li><li><a href="/slides/react/20-state-de.html#/1" target="content">Input State</a></li><li><a href="/slides/react/20-state-de.html#/2" target="content">Immutable State</a></li><li><a href="/slides/react/20-state-de.html#/3" target="content">Datenverwaltung ohne Mutationen</a></li><li><a href="/slides/react/20-state-de.html#/4" target="content">Übung: Registrierungsformular</a></li></ul></section></nav><main style="flex-grow:1"><iframe name="content" style="width:100%;height:100%;border:none"></iframe></main><button id="nav-toggle-button" style="position:absolute;top:1rem;left:1rem;padding:0.4em 0.8em;cursor:pointer;border-radius:0.25em;background-color:#0074d9;color:#ffffff;border:none">toggle sidebar</button><style>
     nav.hidden {
       display: none;
     }

diff --git a/docs/react/20-state-collection-en.html b/docs/react/20-state-collection-en.html
@@ -1,4 +1,4 @@
-<html lang="en" style="height:100%"><head><meta charSet="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.min.css"/></head><body style="height:100%"><div style="height:100%;display:flex;align-items:stretch"><nav style="flex-basis:320px;overflow:auto;padding-top:4em;padding-left:1em;padding-right:1em;padding-bottom:0.5em;margin-bottom:0.5em"><div>parent topic: <a href="/slides/react-en.html">React Basics</a></div><div><a href="react/20-state-en.html">show presentation individually</a></div><section><h1>State</h1><ul><li><a href="/slides/react/20-state-en.html#/0" target="content">State</a></li><li><a href="/slides/react/20-state-en.html#/1" target="content">Input state</a></li><li><a href="/slides/react/20-state-en.html#/2" target="content">Immutable state</a></li><li><a href="/slides/react/20-state-en.html#/3" target="content">Data management without mutations</a></li></ul></section></nav><main style="flex-grow:1"><iframe name="content" style="width:100%;height:100%;border:none"></iframe></main><button id="nav-toggle-button" style="position:absolute;top:1rem;left:1rem;padding:0.4em 0.8em;cursor:pointer;border-radius:0.25em;background-color:#0074d9;color:#ffffff;border:none">toggle sidebar</button><style>
+<html lang="en" style="height:100%"><head><meta charSet="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.min.css"/></head><body style="height:100%"><div style="height:100%;display:flex;align-items:stretch"><nav style="flex-basis:320px;overflow:auto;padding-top:4em;padding-left:1em;padding-right:1em;padding-bottom:0.5em;margin-bottom:0.5em"><div>parent topic: <a href="/slides/react-en.html">React Basics</a></div><div><a href="react/20-state-en.html">show presentation individually</a></div><section><h1>State</h1><ul><li><a href="/slides/react/20-state-en.html#/0" target="content">State</a></li><li><a href="/slides/react/20-state-en.html#/1" target="content">Input state</a></li><li><a href="/slides/react/20-state-en.html#/2" target="content">Immutable state</a></li><li><a href="/slides/react/20-state-en.html#/3" target="content">Data management without mutations</a></li><li><a href="/slides/react/20-state-en.html#/4" target="content">Exercise: registration form</a></li></ul></section></nav><main style="flex-grow:1"><iframe name="content" style="width:100%;height:100%;border:none"></iframe></main><button id="nav-toggle-button" style="position:absolute;top:1rem;left:1rem;padding:0.4em 0.8em;cursor:pointer;border-radius:0.25em;background-color:#0074d9;color:#ffffff;border:none">toggle sidebar</button><style>
     nav.hidden {
       display: none;
     }

diff --git a/docs/react/20-state-de.html b/docs/react/20-state-de.html
@@ -2107,6 +2107,7 @@
 <ul>
 <li>verhindere, dass ins negative gezählt wird</li>
 <li>Button für zufälliges Bild</li>
+<li>Buttons zum Wechseln zwischen verschiedenen Auflösungen</li>
 </ul>
 </section></section><section class="slides-section"><section class="slide"><h1>Input State</h1>
 </section><section class="slide"><h2>Input State</h2>
@@ -2155,14 +2156,6 @@
   );
 }
 </code></pre>
-</section><section class="slide"><h2>Input State</h2>
-<p>Übung:</p>
-<p>Zeige zwei Inputs, bei denen der Benutzer zusammenpassende Passwörter eingeben soll, die zumindest 4 Zeichen lang sind.</p>
-<p>Zeige eventuelle Fehlermeldungen darunter an, z.B.</p>
-<p><em>Password must be at least 4 characters long</em></p>
-<p>oder</p>
-<p><em>Passwords don't match</em></p>
-<p>Stelle dabei sicher, dass du den minimalen State verwendest</p>
 </section></section><section class="slides-section"><section class="slide"><h1>Immutable State</h1>
 </section><section class="slide"><h2>Immutable State</h2>
 <p><strong>Immutability</strong>: Wichtiges Konzept in der funktionalen Programmierung und bei React / Redux</p>
@@ -2354,7 +2347,26 @@
 <p>Lösung 3:</p>
 <pre><code class="hljs language-js"><span class="hljs-keyword">const</span> withCompletedTodosRemoved = <span class="hljs-function">(<span class="hljs-params">todos</span>) =></span>
   todos.filter(<span class="hljs-function">(<span class="hljs-params">todo</span>) =></span> !todo.completed);
-</code></pre></section></section></div>
+</code></pre>
+</section></section><section class="slides-section"><section class="slide"><h1>Übung: Registrierungsformular</h1>
+</section><section class="slide"><h2>Übung: Registrierungsformular</h2>
+<p>Erstelle ein Registrierungsformular für Benutzer</p>
+<p>Werte sollten in einem einzigen JS-Objekt mit verschiedenen Keys gespeichert werden:</p>
+<pre><code class="hljs language-js"><span class="hljs-keyword">const</span> [userData, setUserData] = useState({
+  <span class="hljs-attr">firstName</span>: <span class="hljs-string">""</span>,
+  <span class="hljs-attr">lastName</span>: <span class="hljs-string">""</span>,
+  <span class="hljs-attr">password</span>: <span class="hljs-string">""</span>,
+  <span class="hljs-attr">repeatPassword</span>: <span class="hljs-string">""</span>,
+})
+</code></pre>
+</section><section class="slide"><h2>Übung: Registrierungsformular</h2>
+<p>Zeige unterhalb des Formulars eventuelle Fehlermeldungen für das <em>erste</em> ungültige Input an (wenn es ein ungültiges gibt)</p>
+<p>mögliche Meldungen:</p>
+<ul>
+<li><em>First name must not be empty</em></li>
+<li><em>Password must be at least 4 characters long</em></li>
+<li><em>Passwords don't match</em></li>
+</ul></section></section></div>
     </div>
     <script>/*!
  * reveal.js

diff --git a/docs/react/20-state-en.html b/docs/react/20-state-en.html
@@ -2072,7 +2072,7 @@
 <p><code>useState</code> may be called (repeatedly) inside the component function</p>
 <ul>
 <li><code>useState</code> takes one parameter - the initial state value</li>
-<li>on each call <code>useState</code> returns an array with two entries: the current state and a function to set the state to a new value</li>
+<li>on each call <code>useState</code> returns an array with two entries: the current state and a function that lets us set the state to a new value</li>
 </ul>
 <pre><code class="hljs language-js"><span class="hljs-keyword">const</span> App = <span class="hljs-function">() =></span> {
   <span class="hljs-keyword">const</span> [count, setCount] = useState(<span class="hljs-number">0</span>);
@@ -2107,6 +2107,7 @@
 <ul>
 <li>prevent the index from becoming negative</li>
 <li>button for <em>random image</em></li>
+<li>buttons that let the user select different resolutions</li>
 </ul>
 </section></section><section class="slides-section"><section class="slide"><h1>Input state</h1>
 </section><section class="slide"><h2>Input state</h2>
@@ -2155,14 +2156,6 @@
   );
 }
 </code></pre>
-</section><section class="slide"><h2>Input state</h2>
-<p>Exercise:</p>
-<p>Show two inputs where the user should input matching passwords that are at least 4 characters long.</p>
-<p>If the password combination is invalid, display an error message underneath, e.g.:</p>
-<p><em>Password must be at least 4 characters long</em></p>
-<p>or</p>
-<p><em>Passwords don't match</em></p>
-<p>Make sure you store the minimal state</p>
 </section></section><section class="slides-section"><section class="slide"><h1>Immutable state</h1>
 </section><section class="slide"><h2>Immutable state</h2>
 <p><strong>Immutability</strong>: important concept in functional programing and with React / Redux</p>
@@ -2354,7 +2347,26 @@
 <p>solution 3:</p>
 <pre><code class="hljs language-js"><span class="hljs-keyword">const</span> withCompletedTodosRemoved = <span class="hljs-function">(<span class="hljs-params">todos</span>) =></span>
   todos.filter(<span class="hljs-function">(<span class="hljs-params">todo</span>) =></span> !todo.completed);
-</code></pre></section></section></div>
+</code></pre>
+</section></section><section class="slides-section"><section class="slide"><h1>Exercise: registration form</h1>
+</section><section class="slide"><h2>Exercise: registration form</h2>
+<p>Create a user registration form</p>
+<p>Values should be stored in a single JS object with different keys:</p>
+<pre><code class="hljs language-js"><span class="hljs-keyword">const</span> [userData, setUserData] = useState({
+  <span class="hljs-attr">firstName</span>: <span class="hljs-string">""</span>,
+  <span class="hljs-attr">lastName</span>: <span class="hljs-string">""</span>,
+  <span class="hljs-attr">password</span>: <span class="hljs-string">""</span>,
+  <span class="hljs-attr">repeatPassword</span>: <span class="hljs-string">""</span>,
+})
+</code></pre>
+</section><section class="slide"><h2>Exercise: registration form</h2>
+<p>Underneath the form, display a potential error message for the <em>first</em> invalid input (if there is one)</p>
+<p>possible error messages:</p>
+<ul>
+<li><em>First name must not be empty</em></li>
+<li><em>Password must be at least 4 characters long</em></li>
+<li><em>Passwords don't match</em></li>
+</ul></section></section></div>
     </div>
     <script>/*!
  * reveal.js

diff --git a/docs/react/30-jsx-collection-de.html b/docs/react/30-jsx-collection-de.html
@@ -1,4 +1,4 @@
-<html lang="de" style="height:100%"><head><meta charSet="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.min.css"/></head><body style="height:100%"><div style="height:100%;display:flex;align-items:stretch"><nav style="flex-basis:320px;overflow:auto;padding-top:4em;padding-left:1em;padding-right:1em;padding-bottom:0.5em;margin-bottom:0.5em"><div>parent topic: <a href="/slides/react-de.html">React Grundlagen</a></div><div><a href="react/30-jsx-de.html">show presentation individually</a></div><section><h1>JSX</h1><ul><li><a href="/slides/react/30-jsx-de.html#/0" target="content">JSX</a></li><li><a href="/slides/react/30-jsx-de.html#/1" target="content">JSX: Binden von Inhalten, Properties und Events</a></li><li><a href="/slides/react/30-jsx-de.html#/2" target="content">JSX: Whitespace, Kommentare und Fragmente</a></li><li><a href="/slides/react/30-jsx-de.html#/3" target="content">JSX: if/else und Elemente wiederholen</a></li><li><a href="/slides/react/30-jsx-de.html#/4" target="content">JSX und Styling Grundlagen</a></li><li><a href="/slides/react/30-jsx-de.html#/5" target="content">JSX und Sicherheit</a></li><li><a href="/slides/react/30-jsx-de.html#/6" target="content">JSX: Kompilierung</a></li></ul></section></nav><main style="flex-grow:1"><iframe name="content" style="width:100%;height:100%;border:none"></iframe></main><button id="nav-toggle-button" style="position:absolute;top:1rem;left:1rem;padding:0.4em 0.8em;cursor:pointer;border-radius:0.25em;background-color:#0074d9;color:#ffffff;border:none">toggle sidebar</button><style>
+<html lang="de" style="height:100%"><head><meta charSet="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.min.css"/></head><body style="height:100%"><div style="height:100%;display:flex;align-items:stretch"><nav style="flex-basis:320px;overflow:auto;padding-top:4em;padding-left:1em;padding-right:1em;padding-bottom:0.5em;margin-bottom:0.5em"><div>parent topic: <a href="/slides/react-de.html">React Grundlagen</a></div><div><a href="react/30-jsx-de.html">show presentation individually</a></div><section><h1>JSX</h1><ul><li><a href="/slides/react/30-jsx-de.html#/0" target="content">JSX</a></li><li><a href="/slides/react/30-jsx-de.html#/1" target="content">JSX: Binden von Inhalten, Properties und Events</a></li><li><a href="/slides/react/30-jsx-de.html#/2" target="content">JSX: Whitespace, Kommentare und Fragmente</a></li><li><a href="/slides/react/30-jsx-de.html#/3" target="content">JSX: if / else</a></li><li><a href="/slides/react/30-jsx-de.html#/4" target="content">JSX: Elemente wiederholen</a></li><li><a href="/slides/react/30-jsx-de.html#/5" target="content">JSX und Styling Grundlagen</a></li><li><a href="/slides/react/30-jsx-de.html#/6" target="content">JSX und Sicherheit</a></li><li><a href="/slides/react/30-jsx-de.html#/7" target="content">JSX: Kompilierung</a></li></ul></section></nav><main style="flex-grow:1"><iframe name="content" style="width:100%;height:100%;border:none"></iframe></main><button id="nav-toggle-button" style="position:absolute;top:1rem;left:1rem;padding:0.4em 0.8em;cursor:pointer;border-radius:0.25em;background-color:#0074d9;color:#ffffff;border:none">toggle sidebar</button><style>
     nav.hidden {
       display: none;
     }