React – Installation

Tutorial 1: Willkommen in der React-Welt

Was ist React?

React ist eine JavaScript-Bibliothek zur Erstellung von Benutzeroberflächen, entwickelt von Meta (Facebook). React ermöglicht es Ihnen, wiederverwendbare UI-Komponenten zu erstellen und komplexe Anwendungen effizient zu bauen.

Warum React lernen?

• Beliebt: Eine der gefragtesten Skills im Web-Development
• Komponentenbasiert: Wiederverwendbarer, wartbarer Code
• Deklarativ: Sie beschreiben, was Sie sehen wollen, nicht wie
• Riesiges Ökosystem: Tausende von Libraries und Tools
• Gute Job-Chancen: React-Entwickler sind sehr gefragt

React vs. Vanilla JavaScript

Vanilla JavaScript:

// DOM-Manipulation mit Vanilla JS
const button = document.getElementById('myButton');
let count = 0;

button.addEventListener('click', () => {
  count++;
  document.getElementById('counter').textContent = count;
});

<strong>React:</strong>

// Derselbe Counter in React
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>
        Klick mich
      </button>
    </div>
  );
}

React ist deklarativer und leichter zu verstehen!

Entwicklungsumgebung einrichten

Schritt 1: Node.js installieren

1. Besuchen Sie nodejs.org
2. Laden Sie die LTS-Version herunter
3. Installieren Sie Node.js
4. Überprüfen Sie die Installation:

bash

node --version
npm --version

Schritt 2: VS Code installieren

1. Laden Sie Visual Studio Code herunter
2. Installieren Sie folgende Extensions:
   • ES7+ React/Redux/React-Native snippets
   • Prettier – Code formatter
   • ESLint

Schritt 3: Ihr erstes React-Projekt

Wir verwenden Vite (schneller als Create React App):

bash

npm create vite@latest mein-erstes-react-projekt -- --template react
cd mein-erstes-react-projekt
npm install
npm run dev

Öffnen Sie <a href="http://localhost:5173">http://localhost:5173</a> in Ihrem Browser!Projektstruktur verstehen

mein-erstes-react-projekt/
├── node_modules/          # Alle installierten Packages
├── public/                # Statische Dateien
├── src/                   # Ihr Code
│   ├── App.css           # Styles für App
│   ├── App.jsx           # Hauptkomponente
│   ├── main.jsx          # Einstiegspunkt
│   └── index.css         # Globale Styles
├── index.html            # HTML-Template
├── package.json          # Projekt-Konfiguration
└── vite.config.js        # Vite-Konfiguration

Die wichtigsten Dateien:

main.jsx – Der Einstiegspunkt:

jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

<br><br><strong>App.jsx</strong> - Ihre Hauptkomponente:

jsx

function App() {
  return (
    <div className="App">
      <h1>Willkommen bei React!</h1>
    </div>
  )
}

✅ Übungsaufgaben

1. Installieren Sie Node.js und VS Code
2. Erstellen Sie Ihr erstes React-Projekt mit Vite
3. Ändern Sie den Text in App.jsx und sehen Sie die Live-Aktualisierung
4. Fügen Sie ein weiteres <p> Tag mit eigenem Text hinzu

🎯 Mini-Challenge

Ändern Sie App.jsx so, dass es Ihren Namen und drei Ihrer Hobbys anzeigt!

Weiter gehts mit Tutorial 2: Was ist JSX oder wie funktioniert React mit HTML?