Einführung in React.js für Anfänger 2024

React.js, entwickelt von Facebook, ist eine der beliebtesten JavaScript-Bibliotheken zur Erstellung von Benutzeroberflächen (UI). Es ermöglicht Entwicklern, wiederverwendbare UI-Komponenten zu erstellen, die effizient auf Änderungen im Datenmodell reagieren. Dieser Leitfaden soll dir helfen, die Grundlagen von React.js zu verstehen und dein erstes Projekt zu erstellen.

Was ist React.js und warum solltest du es lernen?

React.js ist besonders wegen seiner Effizienz und Flexibilität beliebt. Es verwendet eine virtuelle DOM (Document Object Model), die es ermöglicht, nur die tatsächlich geänderten Teile der Webseite zu aktualisieren, anstatt die gesamte Seite neu zu rendern. Dies führt zu einer deutlich besseren Performance und einer reibungslosen Benutzererfahrung.

Darüber hinaus fördert React eine komponentenbasierte Architektur, die es einfacher macht, komplexe Benutzeroberflächen zu verwalten und wiederverwendbare Codebausteine zu erstellen.

Voraussetzungen für React.js

Bevor du mit React.js beginnst, solltest du folgende Kenntnisse mitbringen:

• Grundlegende JavaScript-Kenntnisse: Ein Verständnis der JavaScript-Grundlagen, einschließlich ES6-Funktionen wie Arrow Functions und das Konzept von this, ist entscheidend.
• HTML und CSS: Du solltest mit den Grundlagen von HTML und CSS vertraut sein, da diese Technologien zur Strukturierung und Gestaltung von React-Komponenten verwendet werden.

Installation und Einrichtung von React

Um mit React.js zu beginnen, musst du Node.js und npm (Node Package Manager) auf deinem Computer installieren.

Node.js und npm installieren

Besuche die offizielle Node.js-Webseite und lade die neueste Version herunter. Die Installation von Node.js enthält automatisch npm.

Ein neues React-Projekt erstellen

Der einfachste Weg, ein neues React-Projekt zu starten, ist die Verwendung von create-react-app, einem von Facebook bereitgestellten Tool, das die Projektstruktur einrichtet und die notwendigen Abhängigkeiten installiert.

Öffne dein Terminal und führe den folgenden Befehl aus:

npx create-react-app mein-erstes-react-projekt

Wechsle nach der Installation in das neue Projektverzeichnis:

cd mein-erstes-react-projekt

Starte die Entwicklungsumgebung:

npm start

Dein Browser sollte sich automatisch öffnen und die Standard-React-Seite anzeigen.

Erste Schritte mit React-Komponenten

React basiert auf Komponenten. Eine Komponente ist ein wiederverwendbarer Codebaustein, der einen Teil der Benutzeroberfläche darstellt. Komponenten können als JavaScript-Funktionen oder als Klassen definiert werden.

Erstellen einer einfachen Komponente

Lass uns eine einfache Komponente erstellen, die eine Begrüßungsnachricht anzeigt. Öffne die Datei src/App.js und ersetze den Inhalt mit folgendem Code:

import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Hallo, Willkommen zu deinem ersten React-Projekt!</h1>
    </div>
  );
}

export default App;

Speichere die Datei. Dein Browser wird die Änderung automatisch aktualisieren, und du solltest nun die Begrüßungsnachricht sehen.

Komponenten mit Props

Props (kurz für „Properties“) sind Parameter, die an Komponenten übergeben werden können, um sie dynamischer zu gestalten. Lass uns die App-Komponente anpassen, um eine Nachricht basierend auf einem Prop anzuzeigen:

function App(props) {
  return (
    <div className="App">
      <h1>Hallo, {props.name}!</h1>
    </div>
  );
}

export default App;

Jetzt kannst du den Namen als Prop an die App-Komponente übergeben:

<App name="Max" />

Diese Änderung würde „Hallo, Max!“ anzeigen.

Zustand (State) in React

Neben Props haben Komponenten auch einen internen Zustand, der über den State verwaltet wird. Der State ermöglicht es Komponenten, sich dynamisch zu ändern und auf Benutzerinteraktionen zu reagieren.

Hier ist ein einfaches Beispiel für eine Komponente mit Zustand:

import React, { useState } from 'react';

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

  return (
    <div className="App">
      <h1>Du hast {count} mal geklickt</h1>
      <button onClick={() => setCount(count + 1)}>
        Klick mich
      </button>
    </div>
  );
}

export default App;

In diesem Beispiel wird die Anzahl der Klicks im State gespeichert. Jedes Mal, wenn der Button geklickt wird, erhöht sich der Zähler um 1.

* Werbung/Affiliate Link

Komplexeres Beispiel – To-Do-Liste mit React.js

Hier ist ein komplexeres Beispiel für eine React.js-Anwendung, die eine einfache Aufgabenverwaltung (To-Do-Liste) implementiert. In diesem Beispiel verwenden wir React-Komponenten, Zustand (State), Props und Ereignishandlung (Event Handling).

Projektstruktur:

1. src/App.js – Die Hauptkomponente, die die gesamte Anwendung rendert.
2. src/components/TodoList.js – Eine Komponente, die die Liste der Aufgaben rendert.
3. src/components/TodoItem.js – Eine einzelne Aufgabe als wiederverwendbare Komponente.
4. src/components/TodoForm.js – Ein Formular zum Hinzufügen neuer Aufgaben.

Schritt 1: Erstelle ein neues React-Projekt

npx create-react-app todo-app
cd todo-app

Schritt 2: Erstellen der Hauptkomponente (App.js)

Beginnen wir mit der Hauptkomponente, App.js, die als Container für die To-Do-Liste und das Formular fungiert.

import React, { useState } from 'react';
import TodoList from './components/TodoList';
import TodoForm from './components/TodoForm';

function App() {
  const [todos, setTodos] = useState([]);

  const addTodo = (todo) => {
    setTodos([...todos, { text: todo, completed: false }]);
  };

  const toggleComplete = (index) => {
    const newTodos = [...todos];
    newTodos[index].completed = !newTodos[index].completed;
    setTodos(newTodos);
  };

  const removeTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  return (
    <div className="App">
      <h1>Meine To-Do-Liste</h1>
      <TodoForm addTodo={addTodo} />
      <TodoList todos={todos} toggleComplete={toggleComplete} removeTodo={removeTodo} />
    </div>
  );
}

export default App;

Was passiert hier?

1. Imports:
   • useState: Ein React-Hook, der es uns ermöglicht, Zustand (State) in einer Funktionskomponente zu verwenden.
   • TodoList und TodoForm: Zwei Komponenten, die weiter unten erklärt werden.
2. useState Hook:
   • const [todos, setTodos] = useState([]);:
     • Wir initialisieren den Zustand todos als ein leeres Array. todos speichert die Liste der Aufgaben.
     • setTodos ist die Funktion, mit der wir den Zustand aktualisieren können.
3. Funktionen:
   • addTodo: Fügt eine neue Aufgabe zum todos-Array hinzu. Jedes todo hat einen text (die Beschreibung der Aufgabe) und ein completed-Flag, das angibt, ob die Aufgabe erledigt ist.
   • toggleComplete: Schaltet den completed-Status einer Aufgabe um (also von „erledigt“ zu „unerledigt“ und umgekehrt).
   • removeTodo: Entfernt eine Aufgabe aus der Liste.
4. JSX-Rendern:
   • TodoForm und TodoList sind die beiden Hauptkomponenten, die in dieser App gerendert werden.
   • TodoForm wird verwendet, um neue Aufgaben hinzuzufügen, und TodoList, um die Aufgaben anzuzeigen und zu verwalten.

Schritt 3: Erstellen der To-Do-Liste-Komponente (TodoList.js)

Diese Komponente rendert eine Liste von TodoItem-Komponenten.

import React from 'react';
import TodoItem from './TodoItem';

function TodoList({ todos, toggleComplete, removeTodo }) {
  return (
    <ul>
      {todos.map((todo, index) => (
        <TodoItem 
          key={index} 
          todo={todo} 
          index={index} 
          toggleComplete={toggleComplete} 
          removeTodo={removeTodo} 
        />
      ))}
    </ul>
  );
}

export default TodoList;

Was passiert hier?

1. Props:
   • TodoList empfängt todos, toggleComplete, und removeTodo als Props von der App-Komponente.
   • todos ist das Array von Aufgaben, das durch die map-Funktion iteriert wird, um jede Aufgabe darzustellen.
2. Rendern von TodoItem:
   • TodoItem ist eine Komponente, die für jede Aufgabe gerendert wird.
   • key ist eine spezielle Prop, die React hilft, Elemente effizient zu aktualisieren.
   • Jede TodoItem-Komponente erhält die Aufgabe (todo), den Index der Aufgabe (index), sowie die Funktionen toggleComplete und removeTodo.

Schritt 4: Erstellen der To-Do-Item-Komponente (TodoItem.js)

Diese Komponente repräsentiert eine einzelne Aufgabe. Sie ermöglicht das Markieren als erledigt und das Entfernen der Aufgabe.

import React from 'react';

function TodoItem({ todo, index, toggleComplete, removeTodo }) {
  return (
    <li style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
      {todo.text}
      <div>
        <button onClick={() => toggleComplete(index)}>
          {todo.completed ? 'Undo' : 'Complete'}
        </button>
        <button onClick={() => removeTodo(index)}>Remove</button>
      </div>
    </li>
  );
}

export default TodoItem;

Was passiert hier?

1. Rendern einer Aufgabe:
   • Jede Aufgabe wird als Listenelement (<li>) angezeigt.
   • style: Wenn todo.completed wahr ist, wird der Text der Aufgabe durchgestrichen (textDecoration: 'line-through'), was bedeutet, dass die Aufgabe erledigt ist.
2. Buttons:
   • Der Complete/Undo-Button schaltet den completed-Status der Aufgabe um.
   • Der Remove-Button entfernt die Aufgabe aus der Liste.

Schritt 5: Erstellen der Formular-Komponente (TodoForm.js)

Diese Komponente enthält ein Eingabefeld und einen Button zum Hinzufügen neuer Aufgaben.

import React, { useState } from 'react';

function TodoForm({ addTodo }) {
  const [value, setValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!value) return;
    addTodo(value);
    setValue('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={value} 
        onChange={(e) => setValue(e.target.value)} 
        placeholder="Neue Aufgabe hinzufügen..." 
      />
      <button type="submit">Hinzufügen</button>
    </form>
  );
}

export default TodoForm;

Was passiert hier?

1. State und Input-Feld:
   • useState(''): Der Zustand value speichert den Text, den der Benutzer in das Eingabefeld schreibt.
   • setValue: Aktualisiert den value-Zustand, wenn der Benutzer tippt.
2. Formular-Handling:
   • handleSubmit: Verhindert die Standardaktion des Formulars (die Seite neu zu laden) und fügt stattdessen die neue Aufgabe hinzu, wenn der Benutzer auf „Hinzufügen“ klickt.
   • Nach dem Hinzufügen wird das Eingabefeld wieder geleert (setValue('')).

Schritt 6: Styles hinzufügen (optional)

Füge einfache CSS-Stile hinzu, um die Anwendung besser aussehen zu lassen.

/* src/App.css */

.App {
  text-align: center;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

button {
  margin-left: 10px;
}

Schritt 7: Anwendung testen

Nachdem du alle Komponenten erstellt hast, starte deine Anwendung:

npm start

Nach der Eingabe von npm start in der Konsole sollte dein Browser automatisch öffnen und du solltest deine To-Do-Liste sehen. Du kannst Aufgaben hinzufügen, als erledigt markieren oder entfernen.

Zusammenfassung:

Diese Anwendung kombiniert mehrere Schlüsselkonzepte in React:

• Zustandsmanagement (useState): Verfolgt den aktuellen Zustand der Anwendung, z.B. die Liste der Aufgaben und den Text im Eingabefeld.
• Props: Ermöglichen die Kommunikation zwischen Komponenten.
• JSX: Eine JavaScript-Erweiterung, die es ermöglicht, HTML-Strukturen direkt im JavaScript-Code zu definieren.
• Event Handling: Reaktion auf Benutzeraktionen wie das Klicken auf einen Button oder das Einreichen eines Formulars.

Fazit

Diese To-Do-Liste ist ein großartiges Beispiel dafür, wie du eine einfache, aber funktionale React.js-Anwendung erstellen kannst. Du hast dabei gelernt:

• Staatliches Management: Verwalten und Aktualisieren des Zustands in einer React-Anwendung.
• Props: Übergabe von Daten und Funktionen an Komponenten.
• Event Handling: Reaktion auf Benutzeraktionen wie Klicks.

Experimentiere weiter, indem du neue Features hinzufügst, wie zum Beispiel:

• Persistenz mit Local Storage: Speichere die Aufgaben, sodass sie nach einem Seiten-Reload noch verfügbar sind.
• Editierbare Aufgaben: Füge die Möglichkeit hinzu, bestehende Aufgaben zu bearbeiten.

Dieser Ansatz hilft dir, dein Verständnis von React.js weiter zu vertiefen und gleichzeitig eine nützliche Anwendung zu entwickeln.

Dieser Artikel sollte dir einen guten Einstieg in React.js gegeben haben. Du hast schon einiges gelernt. React bietet noch viele weitere mächtige Funktionen, wie etwa Lifecycle-Methoden, Context API und Hooks, die dir helfen, komplexere Anwendungen zu entwickeln.