Was ist React? ⚛️

React ist eine beliebte JavaScript-Bibliothek, die 2013 von Facebook erstellt wurde. Mit dieser Bibliothek können Sie schnelle und benutzerfreundliche Oberflächen für Webanwendungen entwickeln. Wenn Sie jemals Facebook, Instagram oder Netflix benutzt haben, sind Sie React bereits begegnet! 🚀

Der Hauptvorteil von React ist Komponentenansatz. Du kannst kleine unabhängige Blöcke (Komponenten) erstellen und sie wie LEGO-Würfel wiederverwenden! 🧱

Wie fange ich an, mit React zu programmieren? 💻

Um mit React zu arbeiten, benötigen Sie:

• ✅ Node.js — JavaScript-Laufzeitumgebung (kann heruntergeladen werden von der offiziellen Website).

• ✅ Texteditor, zum Beispiel Visual Studio Code.

• ✅ React installieren mit create-react-app.

Wie installiert man React? 🛠

Öffne das Terminal (oder die Befehlszeile) und gib ein:

npx create-react-app my-app
cd my-app
npm start

Dieser Befehl erstellt ein neues React-Projekt und startet einen lokalen Server. Jetzt kann entwickelt werden! 🚀

Hauptfunktionen von React 🔧

• Komponenten: Ermöglichen es, den Code in kleine, wiederverwendbare Teile aufzuteilen.

• Zustand (state): Verwaltet Daten innerhalb der Anwendung.

• Ereignisse: Ermöglichen die Reaktion auf Benutzeraktionen.

• Virtuelles DOM: Beschleunigt die Aktualisierung der Benutzeroberfläche.

Grundlagen von React 📚

1. Komponenten 📦

Komponenten sind das Hauptmerkmal von React. Sie können funktional oder klassisch sein.

Beispiel für eine einfache Komponente:

function Welcome() {
  return <h1>Привет, React!</h1>;
}

Diese Komponente kann an jeder Stelle der Anwendung eingefügt werden.

2. JSX — JavaScript + HTML 📜

React verwendet JSX, mit dem Sie HTML direkt in JavaScript schreiben können.

Beispiel für JSX-Code:

const element = <h1>Привет, мир!</h1>;

JSX macht den Code lesbarer und benutzerfreundlicher.

3. Zustand (state) 🎛

Mit dem Status können Sie dynamische Daten in der Komponente verwalten.

Beispiel für eine Komponente mit state:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

Wenn der Benutzer auf die Schaltfläche klickt, erhöht sich die Zahl! 🔢

4. Ereignishandler 🖱

Mit React können Sie ganz einfach mit Ereignissen wie Klicks arbeiten.

Beispiel für einen Ereignishandler:

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

  return <button onClick={handleClick}>Нажми меня</button>;
}

5. Arbeiten mit Effekten (useEffect) ⚙️

Hook useEffect ermöglicht es, den Code auszuführen, wenn sich der Zustand ändert.

Beispiel:

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

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);
    
    return () => clearInterval(interval);
  }, []);

  return <p>Прошло {seconds} секунд</p>;
}

Diese Komponente zählt die Sekunden ab dem Zeitpunkt, an dem die Seite geladen wird. ⏳

Einfache Projekte in React 💡

1. Zähler 📊

Erstellen Sie einen Zähler, der sich erhöht, wenn Sie auf die Schaltfläche klicken.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

2. Zufallszahlengenerator 🎲

Jedes Mal, wenn Sie auf die Schaltfläche klicken, wird eine neue Zahl angezeigt.

import React, { useState } from 'react';

function RandomNumber() {
  const [number, setNumber] = useState(0);

  return (
    <div>
      <p>Число: {number}</p>
      <button onClick={() => setNumber(Math.floor(Math.random() * 100))}>Сгенерировать</button>
    </div>
  );
}

Fazit 🎉

React ist ein leistungsstarkes Tool zum Erstellen moderner Webanwendungen. Wir haben uns die Grundlagen angesehen: Komponenten, Status, Ereignisse und Effekte. Jetzt kannst du mit der Entwicklung deiner ersten React-Apps beginnen! 🚀

Übung macht den Meister! Je mehr Code du schreibst, desto besser verstehst du ihn. Experimentiere also frei und erstelle deine eigenen Projekte! Viel Glück beim Lernen von React! 😊