seo

_posts/2015-07-16-reacteurope-2015/2015-07-16-reacteurope-2015.md

@@ -64,7 +64,7 @@ Andere Berichte und Notizen gibt es hier:
 
 + [Andreas Taube's "Current State of React"](https://blog.codecentric.de/en/2015/07/react-europe-current-state-react-js/)
 + [Pete Vilter's Notizen](https://groups.google.com/forum/#!topic/elm-discuss/GlzRseYGEdE)
-+ [Martijn Faassen's thoughts](https://blog.startifact.com/posts/thoughts-about-react-europe.html)
++ [Martijn Faassen's thoughts](https://blog.startifact.com/posts/thoughts-about-react-europe/)
 
 Alle Videos der Talks:
 

_posts/2016-02-24-javascript-module-einleitung/2016-02-24-javascript-module-einleitung.md

@@ -7,7 +7,7 @@ header_source: https://unsplash.com/photos/o8cViW56BZQ
 categories: [javascript, module, es6]
 ---
 
-Eine Übersetzung aus dem Englischen. Der Artikel im Original ist [HIER](https://medium.com/@preethikasireddy) zu finden.
+Eine Übersetzung aus dem Englischen. Der Artikel im Original ist [HIER](https://medium.com/@preethikasireddy){:rel="noopener noreferrer nofollow"} zu finden.
 
 *Anmerkung: Der Artikel ist in zwei Teile aufgeteilt: Teil 1 beschäftigt sich damit, was Module sind und wieso wir sie benutzen. Teil 2 erklärt euch, was es bedeutet Module zu bündeln und zeigt verschiedene Wege auf, wie dies geschehen kann.*
 

_posts/2017-05-29-react-typescript/2017-05-29-react-typescript.md

@@ -6,7 +6,7 @@ published_at: 2017-05-29 15:00:00.000000Z
 categories: [react]
 ---
 
-Ich bin neulich auf den Geschmack von TypeScript gekommen und habe darüber in vielen Blogs von [Tom Dale](https://medium.com/@tomdale/glimmer-js-whats-the-deal-with-typescript-f666d1a3aad0)
+Ich bin neulich auf den Geschmack von TypeScript gekommen und habe darüber in vielen Blogs von [Tom Dale](https://medium.com/@tomdale/glimmer-js-whats-the-deal-with-typescript-f666d1a3aad0){:rel="noopener noreferrer nofollow"}
 und anderen gelesen. Heute zeige ich dir wie ich ein TypeScript Projekt von Grund auf mit React und Webpack, um den Build-Process zu verwalten, neu eingerichtet habe. Ich werde dir auch meine ersten Eindrücke von TypeScript geben und insbesondere wie du React mit TypeScript nutzen kannst.
 
 Ich werde nicht zu sehr ins Detail der Besonderheiten der TypeScript Syntax eingehen, aber du kannst entweder das [TypeScript Handbook](https://www.typescriptlang.org/docs/tutorial.html) oder das kostenlose Buch [TypeScript Deep Dive](https://basarat.gitbooks.io/typescript/content/getting-started.html), welches dir auch eine großartige Einführung in die Sprache geben wird, lesen.
@@ -271,7 +271,7 @@ Zuerst erstelle ich ein TypeScript Interface für die Eigenschaften, welche die
 
 ## Testen
 
-Zum Schluss wollte ich auch ein gutes Testing Setup mit TypeScript haben. Ich bin ein großer Fan von Facebooks [Jest](https://jestjs.io/) und habe ein bisschen gegooglet, um herauszufinden, ob ich es mit TypeScript starten kann. Es hat sich herausgestellt, dass es sehr gut möglich ist, und da gibt es sogar das [ts-jest](https://www.npmjs.com/package/ts-jest) Paket, dass all die schweren Arbeiten erledigt. Darüber hinaus gibt es da noch das `@types/jest` Paket, damit kannst du auch all deine Tests type-checken lassen kannst.
+Zum Schluss wollte ich auch ein gutes Testing Setup mit TypeScript haben. Ich bin ein großer Fan von Facebooks [Jest](https://jestjs.io/) und habe ein bisschen gegooglet, um herauszufinden, ob ich es mit TypeScript starten kann. Es hat sich herausgestellt, dass es sehr gut möglich ist, und da gibt es sogar das [ts-jest](https://www.npmjs.com/package/ts-jest){:rel="noopener noreferrer nofollow"} Paket, dass all die schweren Arbeiten erledigt. Darüber hinaus gibt es da noch das `@types/jest` Paket, damit kannst du auch all deine Tests type-checken lassen kannst.
 
 Großes Dankeschön an RJ Zaworski, [dessen Post über TypeScript und Jest](https://rjzaworski.com/2016/12/testing-typescript-with-jest) der mich in dieses Thema eingeführt hat. Sobald du `ts-jest` installiert hast, musst du Jest nur noch konfigurieren, das machst du in `package.json` mit diesen Einstellungen:
 

_posts/2021-02-01-react-native-tutorial-konrad/2021-02-01-react-native-tutorial-konrad.md

@@ -17,7 +17,7 @@ _Wie immer findest du den fertigen Code am Ende des Artikels auf GitHub verlinkt
 
 **Reihe: React Native (Schritt für Schritt)**
 1. => **du bist hier** <=
-2. [React Redux + Toolkit mit Typescript](https://allbitsequal.medium.com/series-react-native-step-by-step-react-redux-toolkit-with-typescript-4818504bba13)
+2. [React Redux + Toolkit mit Typescript](https://allbitsequal.medium.com/series-react-native-step-by-step-react-redux-toolkit-with-typescript-4818504bba13){:rel="noopener noreferrer nofollow"}
 
 ![](./intro.jpeg)
 
@@ -49,7 +49,7 @@ Während des Schreibens nutze ich [email protected]. Für denn Fall, dass du diese
 npm install -g expo-cli
 ```
 
-Mit Expo zur Initialisierung unseres Projekts müssen wir Templates typescripten, aus denen wir dann wählen können. In unserem Fall bauen wir alles Schritt für Schritt von Grund auf neu. Dafür wählen wir das leere Typescript Template aus dem [managed workflow](https://docs.expo.io/introduction/managed-vs-bare/). Der folgende Befehl erstellt, wenn er von deinem gewünschten Ort über die Befehlszeile eingegeben wird, einen neuen Ordner mit dem Namen, den du in der Init angegeben hast, und füllt ihn mit den Template-Dateien, die du aus dem folgenden Menü auswählst.
+Mit Expo zur Initialisierung unseres Projekts müssen wir Templates typescripten, aus denen wir dann wählen können. In unserem Fall bauen wir alles Schritt für Schritt von Grund auf neu. Dafür wählen wir das leere Typescript Template aus dem [managed workflow](https://medium.com/@mehro_z/choosing-between-managed-and-bare-workflow-in-expo-a-comprehensive-difference-7086305f1480){:rel="noopener noreferrer nofollow"}. Der folgende Befehl erstellt, wenn er von deinem gewünschten Ort über die Befehlszeile eingegeben wird, einen neuen Ordner mit dem Namen, den du in der Init angegeben hast, und füllt ihn mit den Template-Dateien, die du aus dem folgenden Menü auswählst.
 
 ```bash
 expo init yourProjectName
@@ -285,5 +285,5 @@ In unserer nächsten Session werden wir einen Blick auf grundlegende Lösungen f
 
 Hier ist der versprochene [Link zum (Pre-)Release tag auf Github](https://github.com/AllBitsEqual/expo-ts-starter/tree/v0.1.0).
 
-[Hier zum Original-Artikel auf English](https://allbitsequal.medium.com/series-react-native-step-by-step-working-with-typescript-and-linting-3961c4226793).
+[Hier zum Original-Artikel auf English](https://allbitsequal.medium.com/series-react-native-step-by-step-working-with-typescript-and-linting-3961c4226793){:rel="noopener noreferrer nofollow"}.
 

_posts/2021-05-31-abe-react-redux-toolkit-with-typescript/2021-05-31-abe-react-redux-toolkit-with-typescript.md

@@ -17,14 +17,14 @@ _Wie immer findest du den fertigen Code am Ende des Artikels auf GitHub verlinkt
 
 **Reihe: React Native (Schritt für Schritt)**
 
-1) [Umgang mit Typescript und Linting](https://allbitsequal.medium.com/series-react-native-step-by-step-working-with-typescript-and-linting-3961c4226793)
+1) [Umgang mit Typescript und Linting](https://allbitsequal.medium.com/series-react-native-step-by-step-working-with-typescript-and-linting-3961c4226793){:rel="noopener noreferrer nofollow"}
 2) => **du bist hier** <=
 
 ![](./intro.jpeg)
 
 ## Redux - WARUM?
 
-Ich gehe davon aus, dass du über Grundkenntnisse in React Native und Redux verfügst. [Solltest du eine kleine Auffrischung deines Wissens benötigen, habe ich hier genau den richtigen Artikel für dich!](https://allbitsequal.medium.com/straightforward-redux-no-strings-attached-e1b5f111bf00) Wir fahren nun mit dem setup aus unserer letzten Session fort und arbeiten weiterhin mit Expo, um unser React Native Build und bundling zu verwalten.
+Ich gehe davon aus, dass du über Grundkenntnisse in React Native und Redux verfügst. [Solltest du eine kleine Auffrischung deines Wissens benötigen, habe ich hier genau den richtigen Artikel für dich!](https://allbitsequal.medium.com/straightforward-redux-no-strings-attached-e1b5f111bf00){:rel="noopener noreferrer nofollow"} Wir fahren nun mit dem setup aus unserer letzten Session fort und arbeiten weiterhin mit Expo, um unser React Native Build und bundling zu verwalten.
 
 Schnapp dir das [aktuelle Projekt auf GitHub](https://github.com/AllBitsEqual/expo-ts-starter/tree/v0.1.0).
 
@@ -231,4 +231,4 @@ In den kommenden Sessions werden wir uns angucken, wie wir unseren redux store d
 
 Hier ist der versprochene [Link zum (Pre-)Release tag auf Github](https://github.com/AllBitsEqual/expo-ts-starter/tree/v0.2.0).
 
-[Hier zum Original-Artikel auf English](https://allbitsequal.medium.com/series-react-native-step-by-step-react-redux-toolkit-with-typescript-4818504bba13).
+[Hier zum Original-Artikel auf English](https://allbitsequal.medium.com/series-react-native-step-by-step-react-redux-toolkit-with-typescript-4818504bba13){:rel="noopener noreferrer nofollow"}.

_posts/2021-08-30-discord-bot-teil-1/2021-08-30-discord-bot-teil-1.md

@@ -227,4 +227,4 @@ Ich glaube, wir haben heute ziemlich viel Stoff behandelt und du hast, zusätzli
 
 In den folgenden Sessions werden wir die if-/else-Anweisungen mit skalierbaren und flexibleren Befehlsmodul-Strukturen ersetzen, uns Setups angucken, die mehrere Bots von einem Projekt erlauben und uns mit Verwaltungsbefehlen beschäftigen, die Benutzer mit Warnungen, Kicks und anderen Methoden managen.
 
-[Hier zum Original-Artikel auf English](https://allbitsequal.medium.com/build-a-bot-discordjs-javascript-chatbots-made-easy-bb31f6738a85).
+[Hier zum Original-Artikel auf English](https://allbitsequal.medium.com/build-a-bot-discordjs-javascript-chatbots-made-easy-bb31f6738a85){:rel="noopener noreferrer nofollow"}.

_posts/2021-09-13-discord-bot-teil-2/2021-09-13-discord-bot-teil-2.md

@@ -415,4 +415,4 @@ Wir haben unsere zentrale Indexdatei aufgeräumt, eine klare Trennung von Codeab
 
 Nächstes Mal werde ich dich durch den Prozess des Schreibens eines skalierbaren und sich selbst aktualisierenden Hilfe-Befehls sowie des Hinzufügens unserer ersten Befehle für die Benutzerverwaltung/Administration führen, um den Bot etwas nützlicher zu machen.
 
-[Hier zum Original-Artikel auf English](https://allbitsequal.medium.com/build-a-bot-discordjs-a-scalable-setup-with-command-modules-7fecdda27b40).
+[Hier zum Original-Artikel auf English](https://allbitsequal.medium.com/build-a-bot-discordjs-a-scalable-setup-with-command-modules-7fecdda27b40){:rel="noopener noreferrer nofollow"}.

_posts/2024-02-19-react-tutorial-deutsch/2024-02-19-react-tutorial-deutsch.md

@@ -184,7 +184,7 @@ Bevor wir unsere erste Komponente bauen, schauen wir uns kurz an, wie sich die R
 
 ## Anbindung von React
 
-Auf dem Online-Editor [codesandbox.io](https://codesandbox.io/s/) solltest du nach einem Klick auf "Create Sandbox" in der Liste der Vorlagen eine Option namens "React TypeScript" sehen.
+Auf dem Online-Editor [codesandbox.io](https://codesandbox.io/templates) solltest du nach einem Klick auf "Create Sandbox" in der Liste der Vorlagen eine Option namens "React TypeScript" sehen.
 
 ![codesandbox new project menu](./images/codesandbox-options.png)
 
@@ -1015,15 +1015,15 @@ Sehr schön! Wir haben eine kleine App gebaut, die Daten von einer API abruft un
 
 ## Fazit
 
-Den finalen Code dieses Tutorials findest du in diesem CodeSandBox repository: <https://codesandbox.io/s/react-tutorial-deutsch-5jmm5>.
+Den finalen Code dieses Tutorials findest du in diesem CodeSandBox repository: <https://codesandbox.io/p/sandbox/react-tutorial-deutsch-5jmm5?file=%2Fsrc%2FApp.tsx>.
 
 Forke das Projekt in CodeSandBox und spiele dann damit herum. Extrahiere doch zum Beispiel mal den Code der Bild-Anzeige in eine eigene Komponente. 😉
 
 ### Vergleich mit anderen FrontEnd Technologien
 
 Ganz zu Beginn habe ich erwähnt, dass React als Bibliothek sehr flexibel in der Anwendung ist. Wir haben gesehen, dass wir bei Ordner- und Datei-Struktur, Data-Fetching und State-Management sehr frei entscheiden können.
 
-Bei **Frameworks**, wie [Angular](https://angular.io/) oder [Vue.js](https://vuejs.org/) ist das anders. Dort ist im Gegensatz zur React **Bibliothek** eine relativ feste Struktur vorgegeben. Für komplexere Funktionalität, wie Formulare, Seiten-Navigation, Sprach-Übersetzung etc. bediene ich mich direkt bei den mitgelieferten Bauteilen.
+Bei **Frameworks**, wie [Angular](https://angular.dev/) oder [Vue.js](https://vuejs.org/) ist das anders. Dort ist im Gegensatz zur React **Bibliothek** eine relativ feste Struktur vorgegeben. Für komplexere Funktionalität, wie Formulare, Seiten-Navigation, Sprach-Übersetzung etc. bediene ich mich direkt bei den mitgelieferten Bauteilen.
 
 [Web Components](https://developer.mozilla.org/de/docs/Web/Web_Components) sind wie React Komonenten wiederverwendbare UI-Elemente. Im Gegensatz zu **React**, sind Web Components aber Komponenten, die an keine Bibliothek und an kein Framework gebunden sind. Man erstellt eigene HTML Elemente, z.B. einen eigenen text button `<text-button>Click here</text-button>`, der dann überall genutzt werden kann. Dafür fehlt die Einbettung in ein reaktives Updaten der Komponenten, wie z.B. **Hooks** und **Props** in React.