Wissensdatenbank

React ist eine Open-Source-JavaScript-Bibliothek, die von Facebook entwickelt wurde und zur Erstellung von Benutzeroberflächen (UI) verwendet wird. Sie ist ideal für die Erstellung von Single-Page-Anwendungen (SPA) und die Verwaltung dynamischer Inhalte. Dank seiner komponentenorientierten Architektur, der Verwendung des virtuellen DOM und des deklarativen Programmieransatzes bietet React Entwicklern die Möglichkeit, hochleistungsfähige, skalierbare und wartungsfreundliche Webanwendungen zu erstellen. In diesem umfassenden Leitfaden werden wir jeden Aspekt von React untersuchen, von den Grundlagen bis hin zu fortgeschrittenen Themen. Mit Webentwicklungsdiensten können Sie Ihre Projekte noch weiter voranbringen.

1. Grundlagen von React

1.1. Was ist React und warum sollte man es verwenden?

React ist eine JavaScript-Bibliothek, die speziell für die Erstellung von Benutzeroberflächen entwickelt wurde. Hier sind die Hauptgründe für die Verwendung von React:

• Komponentenbasierte Architektur: React erleichtert die Aufteilung von Anwendungen in kleine, wiederverwendbare Komponenten. Dies sorgt für einen übersichtlicheren und wartungsfreundlicheren Code.
• Virtuelles DOM: React verbessert die Leistung durch die Verwendung des virtuellen DOM. Das virtuelle DOM ist eine Kopie des echten DOM, und das echte DOM wird nur aktualisiert, wenn Änderungen vorliegen.
• Deklarative Programmierung: React verwendet einen deklarativen Ansatz zur Definition von Benutzeroberflächen. Dies ermöglicht es Entwicklern, anzugeben, was sie wollen, und React zu bestimmen, wie es gemacht werden soll.
• Einfache Erlernbarkeit: React ist im Vergleich zu anderen JavaScript-Frameworks einfacher zu erlernen.
• Community-Unterstützung: React hat eine große und aktive Community. Dies hilft Entwicklern, ihre Probleme zu lösen und neue Fähigkeiten zu erlernen.

1.2. Grundlegende Konzepte von React

Um React zu verstehen, ist es wichtig, die folgenden grundlegenden Konzepte zu kennen:

• Komponenten (Components): Sind die grundlegenden Bausteine von React-Anwendungen. Eine Komponente repräsentiert einen Teil der Benutzeroberfläche und hat ihre eigenen Daten und Verhaltensweisen.
• JSX: Ist die Abkürzung für JavaScript XML. Es wird verwendet, um Benutzeroberflächen in React-Komponenten mit einer HTML-ähnlichen Syntax zu definieren.
• Props: Werden verwendet, um Daten an Komponenten zu übergeben. Props definieren die Eigenschaften von Komponenten und bestimmen, wie sich die Komponenten verhalten.
• State: Ist der interne Zustand einer Komponente. Der State kann das Verhalten der Komponente im Laufe der Zeit ändern.
• Lifecycle-Methoden: Sind Methoden, die während der Erstellung, Aktualisierung und Entfernung von Komponenten ausgeführt werden.

1.3. Umgebungseinrichtung und erste React-Anwendung

Um mit der React-Entwicklung zu beginnen, stellen Sie zunächst sicher, dass Node.js und npm (Node Package Manager) oder yarn auf Ihrem Computer installiert sind. Anschließend können Sie eine React-Anwendung erstellen, indem Sie die folgenden Schritte ausführen:

1. Projekt mit Create React App erstellen: Create React App ist ein offiziell unterstütztes Tool zum Erstellen von React-Anwendungen. Sie können ein neues Projekt erstellen, indem Sie den folgenden Befehl im Terminal ausführen:

npx create-react-app my-app

1. Zum Projektordner wechseln: Nachdem das Projekt erstellt wurde, wechseln Sie zum Projektordner:

cd my-app

1. Anwendung starten: Führen Sie den folgenden Befehl aus, um die Anwendung zu starten:

npm start

1. Dieser Befehl öffnet die Anwendung automatisch in Ihrem Browser.

2. Komponenten und JSX

2.1. Definition und Arten von Komponenten

In React gibt es zwei Arten von Komponenten:

• Funktionale Komponenten: Dies sind JavaScript-Funktionen, die Props entgegennehmen und JSX zurückgeben.
• Klassenkomponenten: Dies sind ES6-Klassen, die von React.Component abgeleitet sind. Sie können State- und Lifecycle-Methoden verwenden.

Beispiel für eine funktionale Komponente:

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

Beispiel für eine Klassenkomponente:

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

2.2. JSX-Syntax und -Regeln

Mit JSX können Sie HTML-ähnliche Tags in JavaScript verwenden. Einige grundlegende Regeln von JSX sind:

• Ein einzelnes Wurzelelement: Eine Komponente muss ein einzelnes Wurzelelement zurückgeben. Um mehrere Elemente zurückzugeben, können Sie ein Containerelement (z. B. <div>) verwenden.
• JavaScript-Ausdrücke: Um JavaScript-Ausdrücke in JSX zu verwenden, können Sie geschweifte Klammern ({}) verwenden.
• HTML-Attribute: Bei der Verwendung von HTML-Attributen gibt es einige Unterschiede. Beispielsweise müssen Sie anstelle von "class" "className" und anstelle von "for" "htmlFor" verwenden.

JSX-Beispiel:

function App() {
  const name = 'React';
  return (
    <div className="container">
      <h1>Hallo, {name}!</h1>
      <p>Webentwicklung mit React.</p>
    </div>
  );
}

2.3. Props- und State-Verwaltung

Props werden verwendet, um Daten an Komponenten zu übergeben, während State die internen Daten einer Komponente sind. Props werden verwendet, um Daten von der übergeordneten Komponente an die untergeordnete Komponente zu übergeben, und die untergeordnete Komponente kann die Props nicht ändern. State hingegen sind die internen Daten einer Komponente, und die Komponente kann den State ändern.

Props-Beispiel:

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

function App() {
  return <Welcome name="React" />;
}

State-Beispiel:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Zähler: {count}</p>
      <button onClick={() => setCount(count + 1)}>Erhöhen</button>
    </div>
  );
}

3. Lifecycle-Methoden

3.1. Lifecycle-Methoden in Klassenkomponenten

In Klassenkomponenten gibt es Lifecycle-Methoden, die in verschiedenen Phasen des Lebenszyklus der Komponente ausgeführt werden. Diese Methoden werden verwendet, um bestimmte Operationen während der Erstellung, Aktualisierung und Entfernung der Komponente durchzuführen.

• constructor(): Die erste Methode, die beim Erstellen der Komponente ausgeführt wird. Wird verwendet, um den State zu initialisieren und Ereignisbindungen vorzunehmen.
• render(): Die Methode, die die Benutzeroberfläche der Komponente zurückgibt.
• componentDidMount(): Die Methode, die ausgeführt wird, nachdem die Komponente in das DOM eingefügt wurde. Wird für Datenabruf- oder Abonnementvorgänge verwendet.
• componentDidUpdate(): Die Methode, die ausgeführt wird, nachdem die Komponente aktualisiert wurde. Wird für DOM-Aktualisierungen oder Nebenwirkungen verwendet.
• componentWillUnmount(): Die Methode, die ausgeführt wird, bevor die Komponente aus dem DOM entfernt wird. Wird für Bereinigungsoperationen (z. B. Abbrechen von Abonnements) verwendet.

3.2. useEffect Hook in funktionalen Komponenten

Der useEffect Hook wird in funktionalen Komponenten verwendet, um ähnliche Funktionalität wie Lifecycle-Methoden bereitzustellen. useEffect wird verwendet, um bestimmte Operationen während der Erstellung, Aktualisierung und Entfernung der Komponente durchzuführen.

useEffect-Beispiel:

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    // Wird ausgeführt, wenn die Komponente gemountet wird und sich count ändert
    document.title = `Zähler: ${count}`;

    // Aufräumfunktion (wird ausgeführt, wenn die Komponente unmountet wird)
    return () => {
      document.title = 'React-Anwendung';
    };
  }, [count]); // Abhängigkeitsarray (useEffect wird ausgeführt, wenn sich count ändert)

  return (
    <div>
      <p>Zähler: {count}</p>
      <button onClick={() => setCount(count + 1)}>Erhöhen</button>
    </div>
  );
}

4. Ereignisbehandlung und Formulare

4.1. Ereignisbehandlung in React

Die Ereignisbehandlung in React ähnelt der Ereignisbehandlung in HTML, es gibt jedoch einige Unterschiede. React-Ereignisse verwenden die CamelCase-Syntax (z. B. onClick anstelle von onclick). Darüber hinaus werden React-Ereignis-Handler verwendet, um den Status von Komponenten zu aktualisieren und die Benutzeroberfläche zu ändern.

Beispiel für die Ereignisbehandlung:

import React, { useState } from 'react';

function Button() {
  const [text, setText] = useState('Klicken');

  const handleClick = () => {
    setText('Geklickt!');
  };

  return (
    <button onClick={handleClick}>{text}</button>
  );
}

4.2. Kontrollierte und unkontrollierte Formular-Komponenten

In React werden Formular-Komponenten in kontrollierte und unkontrollierte Komponenten unterteilt:

• Kontrollierte Komponenten: Der Wert der Formularelemente wird vom Status der React-Komponente verwaltet. Dies erleichtert die Kontrolle und Validierung des Werts der Formularelemente.
• Unkontrollierte Komponenten: Der Wert der Formularelemente wird vom DOM verwaltet. Dies erfordert die Verwendung von ref, um den Wert der Formularelemente abzurufen.

Beispiel für eine kontrollierte Formular-Komponente:

import React, { useState } from 'react';

function NameForm() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Ihr Name: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Ihr Name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Senden</button>
    </form>
  );
}

Beispiel für eine unkontrollierte Formular-Komponente:

import React, { useRef } from 'react';

function NameForm() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Ihr Name: ${inputRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Ihr Name:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">Senden</button>
    </form>
  );
}

5. Stilverwaltung

5.1. Styling mit CSS

Sie können CSS verwenden, um React-Komponenten zu gestalten. Sie können CSS-Dateien direkt in Ihre Komponenten importieren oder Inline-Stile verwenden.

CSS-Datei importieren:

import './MyComponent.css';

function MyComponent() {
  return <div className="my-component">Hallo, React!</div>;
}

Inline-Stile:

function MyComponent() {
  const style = {
    color: 'blue',
    fontSize: '20px'
  };

  return <div style={style}>Hallo, React!</div>;
}

5.2. CSS-in-JS-Lösungen

CSS-in-JS ist ein Ansatz, mit dem Sie CSS in JavaScript schreiben können. Auf diese Weise können Sie den Stil von Komponenten direkt im Komponentencode definieren. Beliebte CSS-in-JS-Lösungen sind:

• Styled Components: Eine Bibliothek zum Definieren von Stilen für React-Komponenten.
• Emotion: Eine weitere beliebte Option für CSS-in-JS.
• JSS: Eine Bibliothek, mit der Sie CSS mit JavaScript schreiben können.

Beispiel für Styled Components:

import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
`;

function MyComponent() {
  return <StyledButton>Klicken</StyledButton>;
}

6. Routing

6.1. Verwendung von React Router Dom

React Router Dom ist eine Bibliothek, die zum Verwalten von Routing-Operationen in React-Anwendungen verwendet wird. Es wird verwendet, um in Single-Page-Anwendungen (SPAs) zu verschiedenen Seiten zu wechseln.

Installation:

npm install react-router-dom

Beispiel für die Verwendung:

import React from 'react';
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';

function Home() {
  return <h2>Startseite</h2>;
}

function About() {
  return <h2>Über uns</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Startseite</Link>
          </li>
          <li>
            <Link to="/about">Über uns</Link>
          </li>
        </ul>
      </nav>

      <Routes>
        <Route path="/" element={<Home/>} />
        <Route path="/about" element={<About/>} />
      </Routes>
    </Router>
  );
}

6.2. Dynamische Routen und Parameter

React Router Dom ermöglicht es Ihnen, dynamische Routen und Parameter zu verwenden, um zu verschiedenen Seiten zu navigieren. Beispielsweise können Sie für jedes Produkt in einer Produktlistenanwendung eine andere Seite erstellen.

Beispiel für eine dynamische Route:

import React from 'react';
import { BrowserRouter as Router, Route, Link, Routes, useParams } from 'react-router-dom';

function Product() {
  const { id } = useParams();
  return <h2>Produkt ID: {id}</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/product/1">Produkt 1</Link>
          </li>
          <li>
            <Link to="/product/2">Produkt 2</Link>
          </li>
        </ul>
      </nav>

      <Routes>
        <Route path="/product/:id" element={<Product/>} />
      </Routes>
    </Router>
  );
}

7. Datenverwaltung

7.1. Context API

Die Context API ist ein Mechanismus, der in React verwendet wird, um Daten zwischen Komponenten auszutauschen. Sie wird insbesondere verwendet, um Props-Drilling (das Übertragen von Props an untergeordnete Komponenten) zu vermeiden.

Context erstellen:

import React from 'react';

const MyContext = React.createContext();

export default MyContext;

Context-Anbieter:

import React, { useState } from 'react';
import MyContext from './MyContext';

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <MyContext.Provider value={{ theme, setTheme }}>
      <MyComponent/>
    </MyContext.Provider>
  );
}

Context-Konsument:

import React, { useContext } from 'react';
import MyContext from './MyContext';

function MyComponent() {
  const { theme, setTheme } = useContext(MyContext);

  return (
    <div style={{ backgroundColor: theme === 'light' ? 'white' : 'black', color: theme === 'light' ? 'black' : 'white' }}>
      <p>Thema: {theme}</p>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Thema ändern</button>
    </div>
  );
}

7.2. Redux

Redux ist ein vorhersehbarer State-Container für JavaScript-Anwendungen. Es wird insbesondere verwendet, um das State-Management in großen und komplexen Anwendungen zu vereinfachen.

Grundlegende Konzepte:

• Store: Das Objekt, das den State der Anwendung enthält.
• Actions: Die Objekte, die zum Ändern des States verwendet werden.
• Reducers: Die Funktionen, die Actions verarbeiten und den State aktualisieren.
• Dispatch: Die Funktion, die zum Senden von Actions an die Reducer verwendet wird.
• Subscribe: Die Funktion, die zum Überwachen von Änderungen im Store verwendet wird.

Redux Beispiel:

1. Redux Installation:

npm install redux react-redux

1. Actions:

const INCREMENT = 'INCREMENT';

export const increment = () => ({
  type: INCREMENT
});

1. Reducer:

const initialState = {
  count: 0
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return {
        ...state,
        count: state.count + 1
      };
    default:
      return state;
  }
};

export default reducer;

1. Store:

import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer);

export default store;

1. Komponente:

import React from 'react';
import { connect } from 'react-redux';
import { increment } from './actions';

function Counter(props) {
  return (
    <div>
      <p>Zähler: {props.count}</p>
      <button onClick={props.increment}>Erhöhen</button>
    </div>
  );
}

const mapStateToProps = (state) => ({
  count: state.count
});

const mapDispatchToProps = {
  increment
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

1. Provider:

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

function App() {
  return (
    <Provider store={store}>
      <Counter/>
    </Provider>
  );
}

8. API-Integration

8.1. Verwendung der Fetch API

Die Fetch API ist eine Schnittstelle, die in Webbrowsern verwendet wird, um HTTP-Anfragen zu stellen. Sie wird in React-Anwendungen verwendet, um Daten von APIs abzurufen und zu senden.

Beispiel für das Abrufen von Daten:

import React, { useState, useEffect } from 'react';

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

8.2. Axios-Bibliothek

Axios ist ein Promise-basierter HTTP-Client für Browser und Node.js. Es bietet mehr Funktionen und Komfort als die Fetch API. Beispielsweise bietet es Funktionen wie automatische JSON-Konvertierung, Anforderungsabbruch und Fehlermanagement.

Installation:

npm install axios

Beispiel für das Abrufen von Daten:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then(response => setUsers(response.data));
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

9. Testen

9.1. Komponententests (Unit Tests)

Unit-Tests werden verwendet, um die kleinsten Teile einer Anwendung (z. B. Funktionen, Komponenten) einzeln zu testen. Unit-Tests sind wichtig, um zu überprüfen, ob der Code korrekt funktioniert und keine unerwarteten Nebenwirkungen auftreten.

Beliebte Testbibliotheken:

• Jest: Ist ein von Facebook entwickeltes Test-Framework. Es wurde speziell für React-Anwendungen entwickelt.
• Mocha: Ist ein flexibles und erweiterbares Test-Framework.
• Chai: Ist eine Assertion-Bibliothek. Sie wird verwendet, um Testergebnisse zu überprüfen.

9.2. Integrationstests

Integrationstests werden verwendet, um zu testen, ob die verschiedenen Teile der Anwendung (z. B. Komponenten, Module) korrekt zusammenarbeiten. Integrationstests sind über Unit-Tests hinaus wichtig, um die Interaktion verschiedener Teile zu überprüfen.

9.3. End-to-End-Tests

End-to-End-Tests werden verwendet, um zu testen, ob die gesamte Anwendung (Benutzeroberfläche, Backend, Datenbank) korrekt zusammenarbeitet. End-to-End-Tests sind wichtig, um Benutzer-Szenarien zu simulieren und zu überprüfen, wie die Anwendung unter realen Bedingungen funktioniert.

10. Leistungsoptimierung

10.1. Tools zur Leistungsanalyse

Es gibt verschiedene Tools, mit denen die Leistung von React-Anwendungen analysiert werden kann. Diese Tools helfen, Leistungsprobleme zu erkennen und Optimierungsmöglichkeiten zu identifizieren.

• React Profiler: Ist ein Teil der React-Entwicklungstools. Er wird verwendet, um die Renderzeiten von Komponenten und Leistungsengpässe zu analysieren.
• Chrome DevTools: Sind die Entwicklungstools des Browsers. Sie werden verwendet, um verschiedene Metriken wie Leistung, Speicher und Netzwerkverkehr zu analysieren.
• Lighthouse: Ist ein Tool zur Analyse der Leistung, Barrierefreiheit, SEO und anderer Metriken von Webseiten.

10.2. Speicherverwaltung

Die Speicherverwaltung ist ein wichtiger Faktor, der die Leistung von React-Anwendungen beeinflusst. Es ist wichtig, unnötigen Speicherverbrauch zu vermeiden und Speicherlecks zu verhindern.

• Vermeidung unnötiger Renderings: Die Hooks React.memo, useMemo und useCallback können verwendet werden, um unnötige Renderings von Komponenten zu vermeiden.
• Verwaltung großer Datenstrukturen: Techniken wie Paginierung, Virtualisierung und Lazy Loading können verwendet werden, um große Datenstrukturen (z. B. Arrays, Objekte) effizient zu verwalten.
• Verhindern von Speicherlecks: Das Durchführen von Bereinigungsoperationen (z. B. Abbrechen von Abonnements, Stoppen von Timern), wenn Komponenten unmountet werden, hilft, Speicherlecks zu verhindern.

11. Beispiele aus dem echten Leben und Fallstudien

11.1. E-Commerce-Anwendung

In einer E-Commerce-Anwendung kann React verwendet werden, um verschiedene Komponenten wie Produktlisten, Warenkorbverwaltung, Zahlungsabwicklung und Benutzeroberfläche zu erstellen. Die komponentenbasierte Architektur von React stellt sicher, dass die Anwendung modular und wartungsfreundlich ist.

11.2. Social-Media-Plattform

Auf einer Social-Media-Plattform kann React verschiedene Komponenten wie Benutzerprofile, Newsfeeds, Benachrichtigungen und Messaging erstellen.