by Efim Shliamin shliamin.github.io

React ist eine komponentenbasierte Bibliothek, die von Facebook entwickelt wurde. Das Ziel von React ist es, schnelle, interaktive Benutzeroberflächen (UIs) zu erstellen. Es arbeitet nach dem Prinzip der Unidirektionalen Datenfluss und verwendet ein virtuelles DOM (Document Object Model), um Änderungen effizient zu verwalten.

Wichtige Konzepte in React:

1. Komponenten: Bausteine einer React-Anwendung. Es gibt Funktionskomponenten und Klassenkomponenten.
2. JSX: JavaScript XML – ermöglicht das Schreiben von HTML-ähnlichem Code in JavaScript.
3. Props: Werden verwendet, um Daten zwischen Komponenten zu übergeben.
4. State: Interner Zustand einer Komponente, der sich ändern kann.
5. Hooks: Funktionen, die es Funktionskomponenten ermöglichen, auf Zustände und Lifecycle-Methoden zuzugreifen. Der bekannteste Hook ist useState, es gibt aber auch useEffect, useContext und viele weitere.

Wichtige Interviewfragen zu React:

• Was ist der Unterschied zwischen einer Klassenkomponente und einer Funktionskomponente?
• Was sind Hooks in React?
• Was ist der Unterschied zwischen State und Props?
• Wie funktioniert der unidirektionale Datenfluss in React?
• Was ist das Virtuelle DOM?

Komponentenarchitektur

React ist komponentenbasiert. Eine Anwendung besteht aus vielen kleinen, wiederverwendbaren Komponenten, die jeweils eine eigene Logik und UI haben. Komponenten können entweder Funktionskomponenten oder Klassenkomponenten sein.

• Funktionskomponenten: Diese sind einfacher und basieren auf JavaScript-Funktionen. Sie waren ursprünglich nicht in der Lage, einen Zustand (State) zu verwalten oder auf Lifecycle-Methoden zuzugreifen, bis Hooks eingeführt wurden.

function Welcome(props) {
  return <h1>Hallo, {props.name}</h1>;
}

• Klassenkomponenten: Diese wurden in älteren React-Versionen verwendet, um Zustände zu verwalten und mit Lifecycle-Methoden zu arbeiten. Funktionskomponenten mit Hooks haben sie mittlerweile weitgehend ersetzt.

class Welcome extends React.Component {
  render() {
    return <h1>Hallo, {this.props.name}</h1>;
  }
}