Anfänger152025-01-15

React Einführung - Was ist React?

Lerne React von Grund auf kennen. Was ist React, warum React verwenden und was macht es besonders? Der perfekte Einstieg in die React-Welt.

#react#javascript#frontend#library#spa

React Einführung

React ist eine JavaScript-Bibliothek zum Erstellen von User Interfaces. Entwickelt von Facebook (Meta), ist es heute das beliebteste Frontend-Framework weltweit!

Was ist React?

React in einem Satz
// React = JavaScript Library für UI-Komponenten
// Komponenten sind wiederverwendbare Bausteine

function Welcome() {
  return <h1>Hallo React!</h1>
}

// Das ist JSX - sieht aus wie HTML, ist aber JavaScript!

React ist:

  • ✅ Eine JavaScript Library (keine Full Framework wie Angular)
  • ✅ Component-Based - alles ist eine Komponente
  • ✅ Declarative - beschreibe WAS, nicht WIE
  • ✅ Learn Once, Write Anywhere - React Native für Mobile Apps

Warum React?

1. Component-Based Architecture

Komponenten sind wiederverwendbar
// Button-Komponente erstellen
function Button({ text, onClick }) {
  return <button onClick={onClick}>{text}</button>
}

// Mehrfach verwenden
function App() {
  return (
    <div>
      <Button text="Klick mich" onClick={() => alert('Hi!')} />
      <Button text="Speichern" onClick={() => console.log('Save')} />
      <Button text="Löschen" onClick={() => console.log('Delete')} />
    </div>
  )
}

2. Virtual DOM - Super schnell!

React nutzt einen Virtual DOM für maximale Performance:

1. Änderung in Komponente
2. React erstellt Virtual DOM
3. React vergleicht mit echtem DOM (Diffing)
4. Nur Unterschiede werden aktualisiert

Ergebnis: Extrem schnelle Updates! 🚀

3. Declarative Syntax

Declarative vs Imperative
// ❌ Imperativ (Vanilla JS)
const button = document.createElement('button')
button.textContent = 'Klick mich'
button.addEventListener('click', () => {
  alert('Geklickt!')
})
document.body.appendChild(button)

// ✅ Deklarativ (React)
function App() {
  return (
    <button onClick={() => alert('Geklickt!')}>
      Klick mich
    </button>
  )
}

// React kümmert sich um das DOM!

4. Riesiges Ökosystem

  • 📦 React Router - Routing/Navigation
  • 🎨 Styled Components - CSS-in-JS
  • 📊 Redux/Zustand - State Management
  • 🔥 Next.js - React Framework (SSR)
  • 📱 React Native - Mobile Apps
  • ⚡ Vite/Create React App - Build Tools

JSX - HTML in JavaScript

JSX ist die Syntax von React - sieht aus wie HTML, ist aber JavaScript!

JSX Basics
// JSX
function Greeting() {
  const name = 'Anna'

  return (
    <div>
      <h1>Hallo {name}!</h1>
      <p>Willkommen bei React</p>
    </div>
  )
}

// Wird zu JavaScript:
function Greeting() {
  const name = 'Anna'

  return React.createElement(
    'div',
    null,
    React.createElement('h1', null, 'Hallo ', name, '!'),
    React.createElement('p', null, 'Willkommen bei React')
  )
}

JSX Regeln

Wichtige JSX Regeln
// ✅ Ein Root-Element (oder Fragment)
function Component() {
  return (
    <div>
      <h1>Titel</h1>
      <p>Text</p>
    </div>
  )
}

// ✅ Oder Fragment
function Component() {
  return (
    <>
      <h1>Titel</h1>
      <p>Text</p>
    </>
  )
}

// ❌ Mehrere Root-Elemente ohne Wrapper
function Component() {
  return (
    <h1>Titel</h1>
    <p>Text</p> // Error!
  )
}

// ✅ className statt class
<div className="container">Content</div>

// ✅ Selbstschließende Tags brauchen /
<img src="bild.jpg" />
<input type="text" />

// ✅ JavaScript in {}
<h1>{2 + 2}</h1> // 4
<p>{user.name}</p>
<button onClick={handleClick}>Klick</button>

Deine erste React-App

Mit Create React App

React App erstellen
# Create React App
npx create-react-app meine-app
cd meine-app
npm start

# Oder mit Vite (schneller!)
npm create vite@latest meine-app -- --template react
cd meine-app
npm install
npm run dev

Projekt-Struktur

meine-app/
├── public/
│   └── index.html
├── src/
│   ├── App.jsx          # Haupt-Komponente
│   ├── main.jsx         # Entry Point
│   └── index.css        # Styles
├── package.json
└── vite.config.js

Erste Komponente

App.jsx - Deine erste Komponente
function App() {
  return (
    <div className="App">
      <h1>Hallo React!</h1>
      <p>Meine erste React-App 🚀</p>
    </div>
  )
}

export default App

Komponenten-Typen

Function Components (Modern)

Function Component
function Welcome({ name }) {
  return <h1>Hallo {name}!</h1>
}

// Oder als Arrow Function
const Welcome = ({ name }) => {
  return <h1>Hallo {name}!</h1>
}

// Oder noch kürzer
const Welcome = ({ name }) => <h1>Hallo {name}!</h1>

// Verwenden
<Welcome name="Anna" />

Class Components (Alt, aber noch verwendet)

Class Component
import React, { Component } from 'react'

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

// Verwenden
<Welcome name="Max" />

// ⚠️ Function Components sind heute Standard!

Props - Daten übergeben

Props = Properties - übergebe Daten an Komponenten!

Props verwenden
// UserCard Komponente
function UserCard({ name, age, city }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>Alter: {age}</p>
      <p>Stadt: {city}</p>
    </div>
  )
}

// Verwenden
function App() {
  return (
    <div>
      <UserCard name="Anna" age={25} city="Berlin" />
      <UserCard name="Max" age={30} city="München" />
      <UserCard name="Lisa" age={28} city="Hamburg" />
    </div>
  )
}

Props Destructuring

Props aufräumen
// ❌ Ohne Destructuring
function UserCard(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>{props.age}</p>
    </div>
  )
}

// ✅ Mit Destructuring
function UserCard({ name, age, city }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{age}</p>
    </div>
  )
}

React vs. andere Frameworks

| Feature | React | Vue | Angular | |---------|-------|-----|---------| | Typ | Library | Framework | Framework | | Lernkurve | Mittel | Einfach | Schwer | | Größe | Klein | Klein | Groß | | Popularität | #1 | #2 | #3 | | Mobile | React Native | Native Script | Ionic | | Company | Meta | Community | Google |

📝 Quiz

Was ist JSX?

⚡

Tipps & Tricks

React DevTools

Installiere die React DevTools Browser Extension:

  • Chrome: React Developer Tools
  • Firefox: React DevTools

Damit kannst du:

  • Komponenten inspizieren
  • Props/State ansehen
  • Performance analysieren

Naming Conventions

// ✅ Komponenten: PascalCase
function UserCard() {}
function ShoppingCart() {}

// ✅ Funktionen: camelCase
function handleClick() {}
function fetchUserData() {}

// ✅ Konstanten: UPPER_CASE
const API_URL = 'https://api.example.com'
const MAX_ITEMS = 100

Fragment Shorthand

// Lange Form
<React.Fragment>
  <h1>Titel</h1>
  <p>Text</p>
</React.Fragment>

// Kurze Form
<>
  <h1>Titel</h1>
  <p>Text</p>
</>
❌

Häufige Fehler

Fehler 1: JSX ohne Return

❌ FALSCH:

function Component() {
  <div>Content</div> // Kein return!
}

✅ RICHTIG:

function Component() {
  return <div>Content</div>
}

Fehler 2: class statt className

❌ FALSCH:

<div class="container">Content</div>

✅ RICHTIG:

<div className="container">Content</div>

Fehler 3: for statt htmlFor

❌ FALSCH:

<label for="name">Name:</label>

✅ RICHTIG:

<label htmlFor="name">Name:</label>

Fehler 4: Selbstschließende Tags

❌ FALSCH:

<img src="bild.jpg">
<input type="text">

✅ RICHTIG:

<img src="bild.jpg" />
<input type="text" />
🎯

Zusammenfassung

Du hast gelernt:

  • ✅ React ist eine UI-Library von Meta
  • ✅ Component-Based Architecture
  • ✅ Virtual DOM für Performance
  • ✅ JSX = HTML in JavaScript
  • ✅ Function Components sind modern
  • ✅ Props übergeben Daten
  • ✅ React ist #1 Frontend-Framework

Key Takeaways:

  • React = Komponenten + Props + JSX
  • Komponenten sind wiederverwendbar
  • JSX wird zu JavaScript kompiliert
  • className statt class
  • Selbstschließende Tags brauchen /
  • Function Components > Class Components

Nächste Schritte:

  • Lerne State und Hooks
  • Verstehe Component Lifecycle
  • Baue deine erste App
  • Lerne Event Handling

Verwandte Module

Voraussetzungen:

React mit TypeScript:

Styling:

  • 🎨 CSS Modules - Component-based Styling
  • 💅 SCSS - Advanced Styling für React Components

Praktische Übungen

Übung 1: Erste Komponente

Erstelle eine Greeting Komponente die einen Namen als Prop nimmt und "Hallo [Name]!" anzeigt.

Übung 2: Card Component

Erstelle eine ProductCard mit Props:

  • name (string)
  • price (number)
  • image (string)

Übung 3: List Rendering

Erstelle eine Liste von 5 Users mit:

  • Name
  • Email
  • Avatar

Übung 4: Button Component

Erstelle einen wiederverwendbaren Button:

  • text prop
  • onClick prop
  • color prop (primary/secondary)

Übung 5: Layout Component

Erstelle ein einfaches Layout:

  • Header
  • Main Content
  • Footer
← React•Lektion 1 von 10
10% abgeschlossen
Lektion abgeschlossen!

Gut gemacht! 🎉

Du hast "React Einführung - Was ist React?" abgeschlossen

Erste Lektion
Nächste Lektion
React State & Hooks - useState erklärt
Alle Lektionen anzeigen

Artikel bewerten

0.0 (0 Bewertungen)

Bitte einloggen um zu bewerten

Das könnte dich auch interessieren

React Components & Props

Verstehe React Components und Props. Komponentenarchitektur, Props Drilling, Children und Component Composition.

Anfängerreact

React Event Handling - onClick, onChange & mehr

Event Handling in React. onClick, onChange, onSubmit und alle wichtigen Events mit praktischen Beispielen.

Anfängerreact

React State & Hooks - useState erklärt

Lerne React State mit dem useState Hook. State Management, Hooks Regeln und praktische Beispiele für interaktive Komponenten.

Anfängerreact
Zurück zu React