Webtechnologien
Sommersemester 2019
React.js
♯
♫
React.js
<section id="reactjs-" class="slide cover"><div><h2>React.js ⚛</h2> </div></section> <section class="slide" id="grundlage"><div><h2>Grundlage</h2> <ul> <li>JS-Bibliothek zur komponentenbasierten Entwicklung von User Interfaces</li> <li>Open Source, maintained durch Facebook</li> </ul> <footer> <ul> <li>primärer Anwendungszweck sind dynamische, datenlastige Anwendungen</li> <li>e.g. Facebook, E-Mail-Client, Dashboard</li> <li>häufig SPA</li> <li>Supero als Beispiel zeigen</li> </ul> </footer> </div></section> <section class="slide" id="kernkonzepte"><div><h2>Kernkonzepte</h2> <ul> <li>Deklarative Interfaces</li> <li>JSX</li> <li>Komponenten</li> <li>Unidirektionaler Datenfluss</li> <li>Props und State</li> <li>(Virtual DOM und DOM-Diffing)</li> </ul> <footer> <ul> <li>Live-Editor auf https://reactjs.org nutzen</li> </ul> </footer> </div></section> <section class="slide" id="deklarative-interfaces"><div><h2>Deklarative Interfaces</h2> <ul> <li>Jede mögliche Darstellung wird initial beschrieben</li> <li>keine imperativen Änderungen</li> </ul> </div></section> <section class="slide" id="jsx"><div><h2>JSX</h2> <ul> <li>Javascript XML</li> <li>eigene Sprache, die verschachtelte Funktionsaufrufe in einer XML-artigen Struktur darstellt und JS-Code enthalten kann</li> </ul> <pre class="highlight language-js" data-lang="js"><code><span class="o"><</span><span class="nx">main</span><span class="o">></span> <span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Guten</span> <span class="p">{</span><span class="k">new</span> <span class="nc">Date</span><span class="p">().</span><span class="nf">getHours</span><span class="p">()</span> <span class="o"><</span> <span class="mi">12</span> <span class="p">?</span> <span class="dl">'</span><span class="s1">Morgen</span><span class="dl">'</span> <span class="p">:</span> <span class="dl">'</span><span class="s1">Tag</span><span class="dl">'</span><span class="p">}</span><span class="o"><</span><span class="sr">/h1</span><span class="err">> </span> <span class="o"><</span><span class="nx">article</span><span class="o">></span> <span class="p">{[</span><span class="dl">'</span><span class="s1">Alice</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">Bob</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">Caesar</span><span class="dl">'</span><span class="p">].</span><span class="nf">map</span><span class="p">(</span><span class="nx">name</span> <span class="o">=></span> <span class="o"><</span><span class="nx">h2</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">name</span><span class="p">}</span><span class="o">></span><span class="nx">Hallo</span> <span class="p">{</span><span class="nx">name</span><span class="p">}</span><span class="o"><</span><span class="sr">/h2</span><span class="err">> </span> <span class="p">)}</span> <span class="o"><</span><span class="sr">/article</span><span class="err">> </span><span class="o"><</span><span class="sr">/main</span><span class="err">> </span></code></pre> <footer> <ul> <li>Elemente</li> <li>Expressions</li> <li>Conditions</li> </ul> </footer> </div></section> <section class="slide" id="komponenten"><div><h2>Komponenten</h2> <ul> <li>Komplexe Interfaces können in kleine, wiederverwendbare Teile zerlegt werden</li> </ul> <pre class="highlight language-js" data-lang="js"><code><span class="o"><</span><span class="nx">main</span><span class="o">></span> <span class="o"><</span><span class="nx">Header</span> <span class="o">/></span> <span class="o"><</span><span class="nx">main</span><span class="o">></span> <span class="o"><</span><span class="nx">Content</span> <span class="o">/></span> <span class="o"><</span><span class="sr">/main</span><span class="err">> </span> <span class="o"><</span><span class="nx">Footer</span> <span class="o">/></span> <span class="o"><</span><span class="nx">PrivacyPrompt</span> <span class="o">/></span> <span class="o"><</span><span class="sr">/main</span><span class="err">> </span></code></pre> </div></section> <section class="slide" id="unidirektionaler-datenfluss"><div><h2>Unidirektionaler Datenfluss</h2> <ul> <li>Daten fließen Top-Down</li> <li>keine Events o.ä.</li> </ul> </div></section> <section class="slide" id="props-und-state"><div><h2>Props und State</h2> <ul> <li>Eltern geben Informationen an Kinder (Props)</li> <li>alle können private Daten haben (State)</li> </ul> </div></section> <section class="slide" id="virtual-dom-und-dom-diffing"><div><h2>Virtual DOM und DOM-Diffing</h2> <ul> <li>Abgleich gegen virtuelles Abbild des DOMS</li> <li>dann echte DOM-Operationen nur für Diff</li> <li>Performance-Hack um Re-Rendering schnell hinzubekommen, aber an sich konzeptionell nicht wichtig</li> </ul> </div></section> <section class="slide" id="create-react-app"><div><h2>create-react-app</h2> <p>Einfaches Setup mit <a href="https://facebook.github.io/create-react-app/">create-react-app</a></p> <pre class="highlight language-sh" data-lang="sh"><code>npx create-react-app my-app npm start <span class="c"># startet Entwicklungsserver</span> npm run build <span class="c"># baut fertige Anwendung</span> </code></pre> </div></section> <section class="slide" id="example-1"><div><h2>Example 1</h2> <pre class="highlight language-js" data-lang="js"><code><span class="k">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">useState</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="kd">function</span> <span class="nf">App</span><span class="p">()</span> <span class="p">{</span> <span class="k">return </span><span class="p">(</span> <span class="o"><</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="dl">"</span><span class="s2">App</span><span class="dl">"</span><span class="o">></span> <span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Pokedex</span><span class="o"><</span><span class="sr">/h1</span><span class="err">> </span> <span class="o"><</span><span class="nx">Pokemon</span> <span class="o">/></span> <span class="o"><</span><span class="sr">/div</span><span class="err">> </span> <span class="p">);</span> <span class="p">}</span> </code></pre> </div></section> <section class="slide" id="example-2"><div><h2>Example 2</h2> <pre class="highlight language-js" data-lang="js"><code><span class="kd">function</span> <span class="nf">Pokemon</span><span class="p">()</span> <span class="p">{</span> <span class="kd">const</span> <span class="p">[</span><span class="nx">pokemon</span><span class="p">,</span> <span class="nx">setPokemon</span><span class="p">]</span> <span class="o">=</span> <span class="nf">useState</span><span class="p">();</span> <span class="kd">const</span> <span class="nx">fetchData</span> <span class="o">=</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="nf">fetch</span><span class="p">(</span><span class="s2">`https://pokeapi.co/api/v2/pokemon/</span><span class="p">${</span><span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">}</span><span class="s2">`</span><span class="p">)</span> <span class="p">.</span><span class="nf">then</span><span class="p">(</span><span class="nx">result</span> <span class="o">=></span> <span class="nx">result</span><span class="p">.</span><span class="nf">json</span><span class="p">())</span> <span class="p">.</span><span class="nf">then</span><span class="p">(</span><span class="nx">setPokemon</span><span class="p">)</span> <span class="p">}</span> <span class="k">return </span><span class="p">(</span> <span class="o"><</span><span class="nx">div</span><span class="o">></span> <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="dl">"</span><span class="s2">number</span><span class="dl">"</span> <span class="nx">onInput</span><span class="o">=</span><span class="p">{</span><span class="nx">fetchData</span><span class="p">}</span> <span class="sr">/</span><span class="err">> </span> <span class="p">{</span><span class="nx">pokemon</span> <span class="p">?</span> <span class="o"><</span><span class="nx">PokeData</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="nx">pokemon</span><span class="p">}</span> <span class="sr">/</span><span class="err">> </span> <span class="p">:</span> <span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">keine</span> <span class="nx">Daten</span><span class="o"><</span><span class="sr">/h1</span><span class="err">> </span> <span class="p">}</span> <span class="o"><</span><span class="sr">/div</span><span class="err">> </span> <span class="p">);</span> <span class="p">}</span> </code></pre> </div></section> <section class="slide" id="example-3"><div><h2>Example 3</h2> <pre class="highlight language-js" data-lang="js"><code><span class="kd">function</span> <span class="nf">PokeData</span><span class="p">({</span> <span class="nx">data</span> <span class="p">})</span> <span class="p">{</span> <span class="k">return </span><span class="p">(</span> <span class="o"><</span><span class="nx">div</span><span class="o">></span> <span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="p">{</span><span class="nx">data</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="o"><</span><span class="sr">/h1</span><span class="err">> </span> <span class="o"><</span><span class="nx">ul</span><span class="o">></span> <span class="p">{</span><span class="nx">data</span><span class="p">.</span><span class="nx">abilities</span><span class="p">.</span><span class="nf">map</span><span class="p">(</span><span class="nx">ability</span> <span class="o">=></span> <span class="o"><</span><span class="nx">li</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">ability</span><span class="p">.</span><span class="nx">ability</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="o">></span><span class="p">{</span><span class="nx">ability</span><span class="p">.</span><span class="nx">ability</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="o"><</span><span class="sr">/li</span><span class="err">> </span> <span class="p">)}</span> <span class="o"><</span><span class="sr">/ul</span><span class="err">> </span> <span class="o"><</span><span class="nx">img</span> <span class="nx">width</span><span class="o">=</span><span class="p">{</span><span class="mi">400</span><span class="p">}</span> <span class="nx">src</span><span class="o">=</span><span class="p">{</span><span class="nx">data</span><span class="p">.</span><span class="nx">sprites</span><span class="p">.</span><span class="nx">front_default</span><span class="p">}</span> <span class="nx">alt</span><span class="o">=</span><span class="dl">"</span><span class="s2">Front default</span><span class="dl">"</span><span class="o">/></span> <span class="o"><</span><span class="sr">/div</span><span class="err">> </span> <span class="p">);</span> <span class="p">}</span> </code></pre> </div></section> <section class="slide" id="deployment"><div><h2>Deployment</h2> <ul> <li>Code unter <a href="https://zeit.co/examples/create-react-app">Now by Example: React</a> ansehen</li> <li><code class="language-plaintext highlighter-rouge">now.json</code> anpassen</li> <li><code class="language-plaintext highlighter-rouge">package.json</code> anpassen</li> <li><code class="language-plaintext highlighter-rouge">now</code> ausführen</li> </ul> </div></section> <section class="slide" id="links"><div><h2>Links</h2> <ul> <li><a href="https://reactjs.org">React.js</a></li> <li><a href="https://www.techlounge.io/react">Video-Einführung in React.js</a></li> <li><a href="https://egghead.io/search?query=react">Egghead.io</a></li> <li><a href="https://www.lynda.com/learning-paths/Web/become-a-react-developer">Lynda</a> (<a href="https://bibliothek.htw-berlin.de/weitere-dienste/lyndacom/">Gratis über HTW-Bib</a>)</li> <li><a href="https://www.codecademy.com/learn/react-101">CodeCademy</a> (immer noch kostenlos?)</li> <li><a href="https://overreacted.io/react-as-a-ui-runtime/">Dan Abramov – React as a UI Runtime</a></li> </ul> </div></section>