React.js, entwickelt und gepflegt von Facebook, hat sich zu einer der beliebtesten JavaScript-Bibliotheken zum Erstellen von Benutzeroberflächen, insbesondere Single-Page-Anwendungen (SPAs), entwickelt. React ist für seine Flexibilität, Effizienz und Benutzerfreundlichkeit bekannt und verfügt über eine große Community und eine Fülle von Ressourcen für Entwickler auf allen Ebenen. Egal, ob Sie ein Anfänger oder ein erfahrener Entwickler sind, der React zu Ihren Fähigkeiten hinzufügen möchte, dieses Tutorial führt Sie durch die Grundlagen von React.js.

1. Was ist React.js?

React.js ist eine Open-Source-JavaScript-Bibliothek, die zum Erstellen von Benutzeroberflächen verwendet wird, insbesondere für Einzelseitenanwendungen, bei denen Sie ein schnelles, interaktives Benutzererlebnis wünschen. Mit React können Entwickler große Webanwendungen erstellen, die als Reaktion auf Datenänderungen effizient aktualisiert und gerendert werden können. Es ist komponentenbasiert, was bedeutet, dass die Benutzeroberfläche in kleine, wiederverwendbare Teile, sogenannte Komponenten, unterteilt ist.

2. Einrichten Ihrer Reaktionsumgebung

Bevor Sie mit dem Codieren beginnen, müssen Sie Ihre Entwicklungsumgebung einrichten. Befolgen Sie diese Schritte:

Schritt 1: Node.js und npm installieren

• Node.js: React benötigt Node.js für seine Build-Tools.
• npm: Node Package Manager (npm) wird zum Installieren von Bibliotheken und Paketen verwendet.

Sie können Node.js von der offiziellen Website herunterladen und installieren. npm wird im Paket mit Node.js geliefert.

Schritt 2: Create React App installieren

Facebook hat ein Tool namens „Create React App“ erstellt, mit dem Sie schnell und effizient ein neues React-Projekt einrichten können. Führen Sie den folgenden Befehl in Ihrem Terminal aus:

npx create-react-app my-app

Dieser Befehl erstellt ein neues Verzeichnis namens my-app mit allen notwendigen Dateien und Abhängigkeiten, um ein React-Projekt zu starten.

Schritt 3: Entwicklungsserver starten

Navigieren Sie in Ihr Projektverzeichnis und starten Sie den Entwicklungsserver:

cd my-app
npm start

Ihre neue React-App sollte jetzt auf http://localhost:3000 ausgeführt werden.

3. Reaktionskomponenten verstehen

Bei React dreht sich alles um Komponenten. Eine Komponente in React ist ein eigenständiges Modul, das eine Ausgabe rendert, normalerweise HTML. Komponenten können entweder als funktionale Komponenten oder als Klassenkomponenten definiert werden.

Funktionskomponenten

Eine funktionale Komponente ist eine einfache JavaScript-Funktion, die HTML zurückgibt (unter Verwendung von JSX).

Beispiel:

function Welcome(props) {
  return 
Hello, {props.name}
;
}

Klassenkomponenten

Eine Klassenkomponente ist eine leistungsfähigere Möglichkeit zum Definieren von Komponenten und ermöglicht Ihnen die Verwaltung lokaler Status- und Lebenszyklusmethoden.

Beispiel:

class Welcome extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

4. JSX – JavaScript XML

JSX ist eine Syntaxerweiterung für JavaScript, die HTML ähnelt. Es ermöglicht Ihnen, HTML direkt in JavaScript zu schreiben, das React dann in echte DOM-Elemente umwandelt.

Beispiel:

const element = 
Hello, world!
;

JSX erleichtert das Schreiben und Visualisieren der Struktur Ihrer Benutzeroberfläche. Unter der Haube wird JSX jedoch in React.createElement()-Aufrufe konvertiert.

5. Staat und Requisiten

Requisiten

Props (kurz für „Eigenschaften“) werden verwendet, um Daten von einer Komponente an eine andere zu übergeben. Sie sind unveränderlich, das heißt, sie können von der empfangenden Komponente nicht geändert werden.

Beispiel:

function Greeting(props) {
  return 
Hello, {props.name}!
;
}

Zustand

State ähnelt Requisiten, wird jedoch innerhalb der Komponente verwaltet und kann sich im Laufe der Zeit ändern. Der Status wird häufig für Daten verwendet, die eine Komponente verfolgen muss, beispielsweise Benutzereingaben.

Beispiel:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count   1 });
  }

  render() {
    return (
      

        
Count: {this.state.count}
        Increment
      
    );
  }
}

6. Umgang mit Ereignissen

Die Verarbeitung von Ereignissen in React ähnelt der Verarbeitung von Ereignissen in DOM-Elementen. Allerdings gibt es einige syntaktische Unterschiede:

• React-Ereignisse werden in CamelCase statt in Kleinbuchstaben benannt.
• Mit JSX übergeben Sie eine Funktion als Event-Handler und nicht einen String.

Beispiel:

function Button() {
  function handleClick() {
    alert('Button clicked!');
  }

  return (
    
      Click me
    
  );
}

7. Lebenszyklusmethoden

Klassenkomponenten in React verfügen über spezielle Lebenszyklusmethoden, die es Ihnen ermöglichen, Code zu bestimmten Zeiten während der Lebensdauer der Komponente auszuführen. Dazu gehören:

• componentDidMount: Wird aufgerufen, nachdem die Komponente gemountet wurde.
• componentDidUpdate: Wird nach den Komponentenaktualisierungen aufgerufen.
• componentWillUnmount: Wird aufgerufen, bevor die Komponente ausgehängt wird.

Beispiel:

class Timer extends React.Component {
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  render() {
    return (
      

        
{this.state.date.toLocaleTimeString()}
      
    );
  }
}

8. Bedingtes Rendering

In React können Sie je nach Status Ihrer Komponente unterschiedliche Ansichten erstellen.

Beispiel:

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return 
Welcome back!
;
  }
  return 
Please sign up.
;
}

9. Listen und Schlüssel

Wenn Sie eine Liste von Daten anzeigen müssen, kann React jedes Element als Komponente rendern. Es ist wichtig, jedem Element eine eindeutige „Schlüssel“-Requisite zu geben, damit React erkennen kann, welche Elemente sich geändert haben.

Beispiel:

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    

{listItems}

10. Reagieren Sie auf Hooks

React Hooks ermöglichen die Verwendung von Status- und anderen React-Funktionen in Funktionskomponenten. Zu den am häufigsten verwendeten Hooks gehören:

• useState: Ermöglicht das Hinzufügen eines Status zu einer Funktionskomponente.
• useEffect: Ermöglicht das Ausführen von Nebenwirkungen in Ihren Funktionskomponenten.
• useContext: Bietet eine Möglichkeit, Daten durch den Komponentenbaum zu leiten, ohne Requisiten auf jeder Ebene manuell weitergeben zu müssen.

Beispiel für useState:

function Counter() {
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(count   1)}>
        Click me
      
    
  );
}

11. React-Anwendungen erstellen und bereitstellen

Sobald Ihre Anwendung fertig ist, können Sie sie für die Produktion erstellen. Verwenden Sie den folgenden Befehl:

npm run build

Dadurch wird ein optimierter Produktions-Build Ihrer React-App im Build-Ordner erstellt. Sie können es dann auf jedem Webserver bereitstellen.

Abschluss

React.js ist ein leistungsstarkes Tool zum Erstellen moderner Webanwendungen. Durch das Verständnis von Komponenten, Zustandsverwaltung, Ereignisbehandlung und Hooks können Sie dynamische und interaktive Benutzeroberflächen erstellen. Dieses Tutorial behandelt die Grundlagen, aber das Ökosystem von React bietet noch viel mehr, einschließlich erweiterter Zustandsverwaltung mit Redux, Routing mit React Router und serverseitiges Rendering mit Next.js.

Denken Sie bei Ihrer weiteren Reise mit React daran, die Fülle an Online-Ressourcen zu nutzen, einschließlich der offiziellen React-Dokumentation, Community-Foren und Tutorials. Viel Spaß beim Codieren!