Technologies
Concepts
Services
wolkenkit
Learning
Company
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.

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

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

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

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ü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ü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-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-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: 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

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
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
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
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, founder and CTO, is looking forward to receive your message and to get to know you!