react: basics, side effects

horstjens · Jul 1, 2021 · 864e194 · 864e194
1 parent 0441e8f
commit 864e194
Show file tree

Hide file tree

Showing 22 changed files with 323 additions and 333 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/20-state-de.html b/docs/react/20-state-de.html
@@ -2117,21 +2117,19 @@
 <p>dann würde es Aspekte des UI-States geben, die nicht im React State mitverfolgt werden</p>
 </section><section class="slide"><h2>Input State</h2>
 <p>So können wir den Wert eines Inputs im State erfassen:</p>
+<pre><code class="hljs language-js"><span class="hljs-keyword">const</span> [inputText, setInputText] = useState(<span class="hljs-string">''</span>);
+</code></pre>
 <pre><code class="hljs language-jsx">&#x3C;input
   value={inputText}
-  onChange={<span class="hljs-function">(<span class="hljs-params">event</span>) =></span> {
-    setInputText(event.target.value);
-  }}
+  onChange={<span class="hljs-function">(<span class="hljs-params">event</span>) =></span> setInputText(event.target.value)}
 />
 </code></pre>
 </section><section class="slide"><h2>Input State</h2>
 <p>Erklärung:</p>
 <pre><code class="hljs language-txt">value={inputText}
 </code></pre>
 <p>bindet vom <em>State</em> auf den Wert des Inputs</p>
-<pre><code class="hljs language-txt">onChange={(event) => {
-  setInputText(event.target.value);
-}}
+<pre><code class="hljs language-txt">onChange={(event) => setInputText(event.target.value)}
 </code></pre>
 <p>aktualisiert den State, wenn sich der Wert des Inputs ändert</p>
 </section><section class="slide"><h2>Input State</h2>
@@ -2150,9 +2148,7 @@
     <span class="xml"><span class="hljs-tag">&#x3C;<span class="hljs-name">div</span>></span>
       <span class="hljs-tag">&#x3C;<span class="hljs-name">input</span>
         <span class="hljs-attr">value</span>=<span class="hljs-string">{text}</span>
-        <span class="hljs-attr">onChange</span>=<span class="hljs-string">{(event)</span> =></span> {
-          setText(event.target.value);
-        }}
+        <span class="hljs-attr">onChange</span>=<span class="hljs-string">{(event)</span> =></span> setText(event.target.value)}
       />
       <span class="hljs-tag">&#x3C;<span class="hljs-name">p</span>></span>This string has {len} characters.<span class="hljs-tag">&#x3C;/<span class="hljs-name">p</span>></span>
     <span class="hljs-tag">&#x3C;/<span class="hljs-name">div</span>></span></span>
@@ -2186,22 +2182,24 @@
 <p>Demo (siehe <a href="https://codesandbox.io/s/immutable-state-demo-r2x1i">https://codesandbox.io/s/immutable-state-demo-r2x1i</a>):</p>
 <pre><code class="hljs language-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
   <span class="hljs-keyword">const</span> [numbers, setNumbers] = useState([<span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">2</span>]);
+  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">addByReplacing</span>(<span class="hljs-params"></span>) </span>{
+    <span class="hljs-comment">// creates a new - derived - state object</span>
+    setNumbers([...numbers, numbers.length]);
+  }
   <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">addByMutating</span>(<span class="hljs-params"></span>) </span>{
     <span class="hljs-comment">// changes (mutates) the old state entry</span>
     numbers.push(numbers.length);
     setNumbers(numbers);
   }
-  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">addByReplacing</span>(<span class="hljs-params"></span>) </span>{
-    <span class="hljs-comment">// creates a new - derived - state object</span>
-    setNumbers([...numbers, numbers.length]);
-  }
   <span class="hljs-keyword">return</span> (
     <span class="xml"><span class="hljs-tag">&#x3C;<span class="hljs-name">div</span>></span>
       <span class="hljs-tag">&#x3C;<span class="hljs-name">div</span>></span>{JSON.stringify(numbers)}<span class="hljs-tag">&#x3C;/<span class="hljs-name">div</span>></span>
-      <span class="hljs-tag">&#x3C;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{addByMutating}</span>></span>add (mutate)<span class="hljs-tag">&#x3C;/<span class="hljs-name">button</span>></span>
-      <span class="hljs-tag">&#x3C;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{addByReplacing}</span>></span>
+      <span class="hljs-tag">&#x3C;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =></span> addByReplacing()}>
         add (replace)
       <span class="hljs-tag">&#x3C;/<span class="hljs-name">button</span>></span>
+      <span class="hljs-tag">&#x3C;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =></span> addByMutating()}>
+        add (mutate)
+      <span class="hljs-tag">&#x3C;/<span class="hljs-name">button</span>></span>
     <span class="hljs-tag">&#x3C;/<span class="hljs-name">div</span>></span></span>
   );
 }

diff --git a/docs/react/20-state-en.html b/docs/react/20-state-en.html
@@ -2117,21 +2117,19 @@
 <p>there would be an aspect of the UI state which would not be captured in the React state.</p>
 </section><section class="slide"><h2>Input state</h2>
 <p>This is how we can capture the value of an input and track it in the state:</p>
+<pre><code class="hljs language-js"><span class="hljs-keyword">const</span> [inputText, setInputText] = useState(<span class="hljs-string">''</span>);
+</code></pre>
 <pre><code class="hljs language-jsx">&#x3C;input
   value={inputText}
-  onChange={<span class="hljs-function">(<span class="hljs-params">event</span>) =></span> {
-    setInputText(event.target.value);
-  }}
+  onChange={<span class="hljs-function">(<span class="hljs-params">event</span>) =></span> setInputText(event.target.value)}
 />
 </code></pre>
 </section><section class="slide"><h2>Input state</h2>
 <p>explanation:</p>
 <pre><code class="hljs language-txt">value={inputText}
 </code></pre>
 <p>binds from the <em>state</em> to the input value</p>
-<pre><code class="hljs language-txt">onChange={(event) => {
-  setInputText(event.target.value);
-}}
+<pre><code class="hljs language-txt">onChange={(event) => setInputText(event.target.value)}
 </code></pre>
 <p>updates the state whenever the input value changes</p>
 </section><section class="slide"><h2>Input state</h2>
@@ -2150,9 +2148,7 @@
     <span class="xml"><span class="hljs-tag">&#x3C;<span class="hljs-name">div</span>></span>
       <span class="hljs-tag">&#x3C;<span class="hljs-name">input</span>
         <span class="hljs-attr">value</span>=<span class="hljs-string">{text}</span>
-        <span class="hljs-attr">onChange</span>=<span class="hljs-string">{(event)</span> =></span> {
-          setText(event.target.value);
-        }}
+        <span class="hljs-attr">onChange</span>=<span class="hljs-string">{(event)</span> =></span> setText(event.target.value)}
       />
       <span class="hljs-tag">&#x3C;<span class="hljs-name">p</span>></span>This string has {len} characters.<span class="hljs-tag">&#x3C;/<span class="hljs-name">p</span>></span>
     <span class="hljs-tag">&#x3C;/<span class="hljs-name">div</span>></span></span>
@@ -2186,22 +2182,24 @@
 <p>demo (see <a href="https://codesandbox.io/s/immutable-state-demo-r2x1i">https://codesandbox.io/s/immutable-state-demo-r2x1i</a>):</p>
 <pre><code class="hljs language-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
   <span class="hljs-keyword">const</span> [numbers, setNumbers] = useState([<span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">2</span>]);
+  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">addByReplacing</span>(<span class="hljs-params"></span>) </span>{
+    <span class="hljs-comment">// creates a new - derived - state object</span>
+    setNumbers([...numbers, numbers.length]);
+  }
   <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">addByMutating</span>(<span class="hljs-params"></span>) </span>{
     <span class="hljs-comment">// changes (mutates) the old state entry</span>
     numbers.push(numbers.length);
     setNumbers(numbers);
   }
-  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">addByReplacing</span>(<span class="hljs-params"></span>) </span>{
-    <span class="hljs-comment">// creates a new - derived - state object</span>
-    setNumbers([...numbers, numbers.length]);
-  }
   <span class="hljs-keyword">return</span> (
     <span class="xml"><span class="hljs-tag">&#x3C;<span class="hljs-name">div</span>></span>
       <span class="hljs-tag">&#x3C;<span class="hljs-name">div</span>></span>{JSON.stringify(numbers)}<span class="hljs-tag">&#x3C;/<span class="hljs-name">div</span>></span>
-      <span class="hljs-tag">&#x3C;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{addByMutating}</span>></span>add (mutate)<span class="hljs-tag">&#x3C;/<span class="hljs-name">button</span>></span>
-      <span class="hljs-tag">&#x3C;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{addByReplacing}</span>></span>
+      <span class="hljs-tag">&#x3C;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =></span> addByReplacing()}>
         add (replace)
       <span class="hljs-tag">&#x3C;/<span class="hljs-name">button</span>></span>
+      <span class="hljs-tag">&#x3C;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =></span> addByMutating()}>
+        add (mutate)
+      <span class="hljs-tag">&#x3C;/<span class="hljs-name">button</span>></span>
     <span class="hljs-tag">&#x3C;/<span class="hljs-name">div</span>></span></span>
   );
 }

diff --git a/docs/react/92-side-effects-collection-de.html b/docs/react/92-side-effects-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/92-side-effects-de.html">show presentation individually</a></div><section><h1>Side Effects</h1><ul><li><a href="/slides/react/92-side-effects-de.html#/0" target="content">Side Effects</a></li><li><a href="/slides/react/92-side-effects-de.html#/1" target="content">Side Effects in Funktionskomponenten</a></li><li><a href="/slides/react/92-side-effects-de.html#/2" target="content">Side Effects in Klassenkomponenten</a></li><li><a href="/slides/react/92-side-effects-de.html#/3" target="content">Effect Hook zum Abfragen von APIs</a></li><li><a href="/slides/react/92-side-effects-de.html#/4" target="content">Andere Verwendungen des Effect-Hooks</a></li><li><a href="/slides/react/92-side-effects-de.html#/5" target="content">Der effect-Hook und veralteter State</a></li><li><a href="/slides/react/92-side-effects-de.html#/6" target="content">Effect Cleanup</a></li><li><a href="/slides/react/92-side-effects-de.html#/7" target="content">Beispiele und Übungen</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/92-side-effects-de.html">show presentation individually</a></div><section><h1>Side Effects</h1><ul><li><a href="/slides/react/92-side-effects-de.html#/0" target="content">Side Effects</a></li><li><a href="/slides/react/92-side-effects-de.html#/1" target="content">Effect Hook</a></li><li><a href="/slides/react/92-side-effects-de.html#/2" target="content">Effect Hook: Cleanup</a></li><li><a href="/slides/react/92-side-effects-de.html#/3" target="content">Side Effects in Klassenkomponenten</a></li><li><a href="/slides/react/92-side-effects-de.html#/4" target="content">Effect Hook zum Abfragen von APIs</a></li><li><a href="/slides/react/92-side-effects-de.html#/5" target="content">Andere Verwendungen des Effect-Hooks</a></li><li><a href="/slides/react/92-side-effects-de.html#/6" target="content">Der effect-Hook und veralteter State</a></li><li><a href="/slides/react/92-side-effects-de.html#/7" target="content">Beispiele und Übungen</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/92-side-effects-collection-en.html b/docs/react/92-side-effects-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/92-side-effects-en.html">show presentation individually</a></div><section><h1>Side Effects</h1><ul><li><a href="/slides/react/92-side-effects-en.html#/0" target="content">Side effects</a></li><li><a href="/slides/react/92-side-effects-en.html#/1" target="content">Side effects in function components</a></li><li><a href="/slides/react/92-side-effects-en.html#/2" target="content">Side effects in class components</a></li><li><a href="/slides/react/92-side-effects-en.html#/3" target="content">Effect hook for querying APIs</a></li><li><a href="/slides/react/92-side-effects-en.html#/4" target="content">Other uses of the effect hook</a></li><li><a href="/slides/react/92-side-effects-en.html#/5" target="content">The effect hook and outdated state</a></li><li><a href="/slides/react/92-side-effects-en.html#/6" target="content">Effect cleanup</a></li><li><a href="/slides/react/92-side-effects-en.html#/7" target="content">Examples and Exercises</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/92-side-effects-en.html">show presentation individually</a></div><section><h1>Side Effects</h1><ul><li><a href="/slides/react/92-side-effects-en.html#/0" target="content">Side effects</a></li><li><a href="/slides/react/92-side-effects-en.html#/1" target="content">Effect hook</a></li><li><a href="/slides/react/92-side-effects-en.html#/2" target="content">Effect hook: cleanup</a></li><li><a href="/slides/react/92-side-effects-en.html#/3" target="content">Side effects in class components</a></li><li><a href="/slides/react/92-side-effects-en.html#/4" target="content">Effect hook for querying APIs</a></li><li><a href="/slides/react/92-side-effects-en.html#/5" target="content">Other uses of the effect hook</a></li><li><a href="/slides/react/92-side-effects-en.html#/6" target="content">The effect hook and outdated state</a></li><li><a href="/slides/react/92-side-effects-en.html#/7" target="content">Examples and Exercises</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;
     }