the native web
tech:lounge – React
Learning
Learning React allows you to build complex, scalable, and predictable web clients. This entirely free video course guides you on your journey.
techlounge-react

React – a lightweight UI framework

React is a lightweight UI framework developed by Facebook to build complex, scalable, and predictable web clients. This video course takes you from installing React and integrating it into a web application via building and wiring components to bundling code and connecting your web clients to the backend, and much more. If you need any further guidance or support, we provide consulting, workshops, and development services.

Diversity

Human in front of world
To learn React there is a variety of amazing resources on the web – at least, if you speak English. As we want to improve the diversity of languages and to raise inclusion, we produce these videos in German.

Free forever

Present
Everyone working at the native web has learned so much for free in their lives that we believe it is fair to give something in return. That's why we provide the tech:lounge video courses for free, forever.

Let's get in touch

Speech bubbles
We would like to get to know you, and to learn about your current situation. Together, we can figure out how to empower you, and find answers to your individual visions, ideas, and questions. Let's get in touch!

Welcome to React

We welcome you to the free tech:lounge video course on React. The first episode introduces you to this course and guides your first steps on your journey to learn React. All further videos can be found in the playlist below. This course as well as other interesting courses are also available directly on our YouTube channel. We always look forward to questions and feedbacks, and we would be more than happy about positive reviews or comments. For anything else, let's get in touch!

Folge 1: Vorstellung und EinführungPlay
Folge 1: Vorstellung und Einführung (24:41)
React ist eine Bibliothek zum Entwickeln von Benutzeroberflächen für Webanwendungen. Sie wird seit dem Jahr 2011 von Facebook entwickelt und steht als Open-Source zur Verfügung. React zeichnet sich durch einen deklarativen und Komponenten-basierten Programmierstil aus. Die Bbliothek verwendet zum Erreichen einer hohen Performance ein Virtual-DOM, und nutzt die Spracherweiterung JSX, um JavaScript und HTML in einer gemeinsamen Datei verwalten zu können. David Losert stellt sich und React kurz vor und erläutert den Ablauf des Videokurses.
Veröffentlicht am 2. Mai 2020

Playlist

Folge 1: Vorstellung und EinführungPlay
Folge 1: Vorstellung und Einführung (24:41)
React ist eine Bibliothek zum Entwickeln von Benutzeroberflächen für Webanwendungen. Sie wird seit dem Jahr 2011 von Facebook entwickelt und steht als Open-Source zur Verfügung. React zeichnet sich durch einen deklarativen und Komponenten-basierten Programmierstil aus. Die Bbliothek verwendet zum Erreichen einer hohen Performance ein Virtual-DOM, und nutzt die Spracherweiterung JSX, um JavaScript und HTML in einer gemeinsamen Datei verwalten zu können. David Losert stellt sich und React kurz vor und erläutert den Ablauf des Videokurses.
Veröffentlicht am 2. Mai 2020
Folge 2: React-SetupPlay
Folge 2: React-Setup (35:58)
Bevor man Anwendungen mit React entwickeln kann, gilt es zunächst, React zu installieren und zu konfigurieren. Dafür stehen verschiedene Möglichkeiten zur Verfügung, von der Verwendung eines CDNs bis zum Einsatz von npm. Außerdem wird ein Webserver benötigt, um die Anwendung zu veröffentlichen. Für die ersten Zeilen und das erste React-Element ist schließlich noch die Frage zu beantworten, ob man mit JSX arbeiten will, wofür man wiederum Babel benötigt. David Losert zeigt, wie man in wenigen Schritten zu einem Setup und einer ersten ausführbaren Anwendung gelangt.
Veröffentlicht am 23. Mai 2020
Folge 3: React-ComponentsPlay
Folge 3: React-Components (50:33)
Einer der wichtigsten Aspekte von React ist die Komponentenorientierung, denn React-Components bilden die Grundlage für die Wiederverwendbarkeit von UI-Elementen. React-Components lassen sich sowohl funktional als auch klassenbasiert definieren, und können von Außen über sogenannte Props konfiguriert werden. David Losert zeigt, wie man solche Komponenten schreibt, wie man sie konfiguriert und für komplexere Anwendungen komponiert. Außerdem stellt er verschiedene Wege vor, um in React geschriebene Komponenten per CSS gestalten zu können.
Veröffentlicht am 13. Juni 2020
Folge 4: WebpackPlay
Folge 4: Webpack (59:11)
Wer Anwendungen mit React entwickelt, braucht über kurz oder lang einen Bundler wie Webpack. Ein solches Werkzeug ist erforderlich, um React als npm-Modul installieren und weitere Komponenten integrieren zu können. Außerdem vereinfacht ein Bundler das Deployment, da die gesamte Anwendung als eine einzige JavaScript-Datei zusammengefasst wird. David Losert zeigt in dieser Folge, wie man Webpack für React konfiguriert, und integriert schließlich auf dem Weg sogar CSS.
Veröffentlicht am 27. Juni 2020
Folge 5: React-StatePlay
Folge 5: React-State (01:05:00)
Anwendungen zeigen nicht nur Daten an, sondern nehmen auch Eingaben entgegen und ändern ihren Zustand. Dieser Zustand wird in React als States bezeichnet, und er ist im Gegensatz zu den bereits bekannten Props veränderlich. David Losert zeigt in dieser Folge, wie die State-Verwaltung von React funktioniert und welche Möglichkeiten es gibt, State zu verändern und anzupassen – und auf welche Stolperfallen es dabei zu achten gilt.
Veröffentlicht am 11. Juli 2020
Folge 6: React-State, Teil 2Play
Folge 6: React-State, Teil 2 (01:01:11)
Eines der wichtigsten Konzepte für Anwendungen ist das Entgegennehmen und Verarbeiten von Eingaben. React kennt hierfür verschiedene Erweiterungspunkte, über die man ereignisbehandelnde Funktionen anbinden kann. Allerdings gibt es dabei, insbesondere in Verbindung mit dem this-Schlüsselwort, einige Aspekte zu beachten. David Losert zeigt in dieser Folge, wie das alles funktioniert und wie diese Themen mit dem Verwalten von State zusammenhängen.
Veröffentlicht am 1. August 2020
Folge 7: React-FormsPlay
Folge 7: React-Forms (01:04:32)
Nahezu jede Anwendung basiert an der ein oder anderen Stelle auf Formularen. Üblicherweise basieren diese auf verschiedenen Steuerelementen und setzen Validierung und Fehlerbehandlung ein. David Losert zeigt in dieser Folge, wie Formulare mit React integriert werden, wie sich Teile der UI in Abhängigkeit von Bedingungen rendern lassen, und was typische Stolperfallen im Umgang mit Ereignissen sind – und wie sie sich vermeiden lassen.
Veröffentlicht am 24. August 2020
Folge 8: Fortgeschrittenes JSXPlay
Folge 8: Fortgeschrittenes JSX (01:01:05)
JSX kann mehr als nur einzelne Elemente rendern, unter anderem auch Listen und komplexe Objekte. Dazu bedarf es jedoch fortgeschrittener Techniken, beispielsweise dem Destructuring oder dem Zugriff auf die untergeordneten Elemente. David Losert erklärt in dieser Folge, welche fortgeschrittenen JSX-Techniken es gibt und wie man sie verwendet, um umfangreiche Komponenten zu entwickeln, beispielsweise eine Tab-Komponente.
Veröffentlicht am 11. September 2020
Folge 9: Hands-on (Teil 1)Play
Folge 9: Hands-on (Teil 1) (01:17:14)
Die Hands-On-Folge führt keine neuen Konzepte von React ein, sondern zeigt alles bisher Gelernte im Zusammenspiel – vom Setup und dem Definieren von Komponenten über den Umgang mit State und Formularen bis hin zu den verschiedenen JSX-Techniken. Zu diesem Zweck entwickelt David Losert in dieser Folge eine Anwendung zum Verwalten einer Einkaufsliste.
Veröffentlicht am 12. Oktober 2020
Folge 9: Hands-on (Teil 2)Play
Folge 9: Hands-on (Teil 2) (01:07:33)
Die Hands-On-Folge führt keine neuen Konzepte von React ein, sondern zeigt alles bisher Gelernte im Zusammenspiel – vom Setup und dem Definieren von Komponenten über den Umgang mit State und Formularen bis hin zu den verschiedenen JSX-Techniken. Zu diesem Zweck entwickelt David Losert in dieser Folge eine Anwendung zum Verwalten einer Einkaufsliste.
Veröffentlicht am 12. Oktober 2020
Folge 10: React-HooksPlay
Folge 10: React-Hooks (01:05:58)
Hooks sind in React die moderne Variante der Lifecycle-Methoden, stehen allerdings nur in funktionalen Komponenten zur Verfügung. An die Stelle von componentDidMount, componentWillMount & Co. treten nun Funktionen wie useState, useEffect, … Wie funktionieren Hooks und worauf gilt es bei ihrem Einsatz zu achten?
Veröffentlicht am 2. November 2020
Folge 11: ReviewPlay
Folge 11: Review (26:20)
Die vergangenen Folgen der Einführung in React haben die Grundlagen der Entwicklung von Anwendungen mit React vermittelt. Diese Folge zeigt rückblickend noch einmal die Grundlagen in einer Zusammenfassung und legt auf dem Weg das Fundament für die fortgeschrittenen Themen, die David Losert in den kommenden Folgen behandeln wird.
Veröffentlicht am 30. November 2020
Folge 12: React-DebuggingPlay
Folge 12: React-Debugging (24:49)
React-Anwendungen debuggen zu können, ist eine wichtige Voraussetzung, um Fehler im Code aufzuspüren und anschließend zu beheben. In dieser Folge zeigt David Losert, welche Möglichkeiten React zu diesem Zweck bietet, welche Kniffe es dabei gibt und auf welche Stolperfallen es zu achten gilt.
Veröffentlicht am 16. Dezember 2020
Folge 13: React-Developer-ToolsPlay
Folge 13: React-Developer-Tools (29:14)
Zur professionellen Entwicklung mit React gehört auch das Aufspüren und Beheben von Fehlern. Für diesen Zweck stehen verschiedene Werkzeuge zur Verfügung, allen voran die React-Developer-Tools. In dieser Folge stellt David Losert die Developer-Tools im Detail vor und zeigt, wie man sie für die Fehlersuche nutzen kann.
Veröffentlicht am 5. Januar 2021
Folge 14: Prop-TypesPlay
Folge 14: Prop-Types (31:37)
Prop-Types sind eine Erweiterung für React, mit der die Props von React-Komponenten typsicher gestaltet werden können. Sie bilden eine gute Grundlage, um die Qualität des Codes einer React-Anwendung zu erhöhen und Fehler einfacher und zielgerichteter aufzuspüren. In dieser Folge erklärt David Losert, wie Prop-Types funktionieren.
Veröffentlicht am 27. Januar 2021
Folge 15: Advanced Prop-TypesPlay
Folge 15: Advanced Prop-Types (32:14)
Die vorgefertigten Prop-Types genügen nicht allen Anforderungen, die in der Entwicklung von React-Anwendungen auftreten. Das ist beispielsweise dann der Fall, wenn React-Elemente an eine Komponente übergeben werden sollen oder wenn eine eigene Validierung benötigt wird. Was lässt sich in einem solchen Fall machen?
Veröffentlicht am 17. Februar 2021
Folge 16: Update React und WebpackPlay
Folge 16: Update React und Webpack (22:19)
Im Oktober 2020 gab es gleich zwei wichtige Updates für Entwicklerinnen und Entwickler, die mit React arbeiten. Zum einen wurde React 17 veröffentlicht, zum anderen ist Webpack 5 erschienen. Daher gibt David Losert in dieser Folge einen Überblick über die Neuerungen und zeigt, wie das Update auf die neuen Versionen gelingt und was es dabei zu beachten gilt.
Veröffentlicht am 3. März 2021
Folge 17: TypeScript installierenPlay
Folge 17: TypeScript installieren (31:18)
React-Anwendungen können außer in JavaScript auch in TypeScript geschrieben werden. Um TypeScript für React nutzen zu können, gilt es zunächst, den Compiler und andere dafür erforderliche Werkzeuge zu installieren. David Losert erklärt in dieser Folge, wie das funktioniert und worauf es zu achten gilt.
Veröffentlicht am 17. März 2021
Folge 18: TypeScript nutzen, Teil 1Play
Folge 18: TypeScript nutzen, Teil 1 (37:54)
TypeScript in React zu nutzen bedeutet, verschiedene Typen explizit anzugeben. Das betrifft in erster Linie Komponenten, den useState-Hook, Domain-Objekte und Events beziehungsweise Eventhandler. In dieser Folge zeigt David Losert, welche Typen zu dem Zweck zur Verfügung stehen, wie die Typen anzugeben sind und worauf bei der Typisierung zu achten ist.
Veröffentlicht am 31. März 2021
Folge 19: TypeScript nutzen, Teil 2Play
Folge 19: TypeScript nutzen, Teil 2 (36:06)
TypeScript in React zu nutzen bedeutet nicht nur, Komponenten und State zu typisieren, sondern auch, sich um Spezialfälle zu kümmern. Dazu zählen unter anderem Services, asynchrone Funktionen, Hooks wie useEffect und klassenbasierte Komponenten. In dieser Folge zeigt David Losert, wie das alles funktioniert und worauf es dabei zu achten gilt.
Veröffentlicht am 14. April 2021

Workshops

Learn about the advantages of React and its benefits for your project. Become an expert in designing and setting up highly scalable architectures for client applications. Learn how to build components and what patterns to use to wire them up. Write high-quality React code and know how to test it in an efficient way in real-world browsers. You can learn all of this in our workshops, which of course are also available tailor-made, suitable to your individual needs – remote or on-site. Let's get in touch!

On demand – remote or on-site

You define place and time

An advanced introduction to React

In English or German

Learn how to use React and its ecosystem for modern and professional web development. In a small group you will experience the theoretical basics as well as the hands-on usage.

This workshop includes

  • Learning React's core concepts
  • Rendering views and using JSX
  • Handling input and managing state
  • Building custom components
  • Rendering applications on the client and on the server
  • Using frameworks: Next.js & co.
  • Testing React
  • And much more…
Susanna Roden
Susanna Roden
Let's get in touch

On demand – remote or on-site

You define place and time

Building design systems with React

In English or German

Learn how to build, test, and deploy a design system, and how to use it in applications. In a small group you will experience the theoretical basics as well as the hands-on usage.

This workshop includes

  • Understanding design systems
  • Building reusable components
  • Testing in real-world browsers
  • Setting up a styleguide
  • Documenting components
  • Preparing for extensibility
  • Versioning and deploying your design system
  • And much more…
Matthias Wagler
Matthias Wagler
Let's get in touch

On demand – remote or on-site

You define place and time

Your individual React workshop

In English or German

Do you need an individual React workshop? In close collaboration with you we setup a tailor-made agenda that addresses what's most important to your individual project requirements.

This workshop includes

  • Tailor-made agenda
  • Balanced mix of theory and hands-on
  • Your place, your time
  • Close collaboration with the speaker
  • Group size according to your wishes
  • Follow-up support from our experts
  • Everything according to your needs
  • And much more…
Sophie van Sky
Sophie van Sky
Let's get in touch

Contact

If you share our core values and like our approach, we would be more than happy to support you in achieving your goals and visions. To get started, send us a message and tell us about you and your situation, no matter which project phase you are in. We are confident that together we will figure out the right way to help you. Whether you are a start-up or an established corporation, we will shape and provide a tailor-made solution for your individual needs.

Golo Roden

Golo Roden, founder and CTO, is looking forward to receive your message and to get to know you!