Wie man seine erste React.js App Schritt fuer Schritt erstellt
Den ersten Schritt in die React-Entwicklung zu wagen, fuehlt sich fuer viele anfangs einschuechtert an. JSX, Komponenten, State, Props, Hooks: Die Begriffe klingen technisch, und es ist nicht immer klar, wo man anfangen soll. Dabei ist der Einstieg in React heute leichter als je zuvor. Mit den richtigen Werkzeugen und einem klaren Fahrplan hat man in wenigen Stunden eine funktionierende Anwendung, die echte React-Konzepte anwendet.
In diesem Leitfaden bauen wir gemeinsam eine vollstaendige kleine React-Anwendung von Null auf. Dabei erklaere ich nicht nur die Schritte, sondern auch das Warum hinter jeder Entscheidung. Am Ende hast du nicht nur eine laufende App, sondern auch ein solides Verstaendnis der Konzepte, auf denen jede groessere React-Anwendung aufbaut.
Dieser Artikel richtet sich an Einsteigerinnen und Einsteiger mit Grundkenntnissen in HTML, CSS und JavaScript. Vorkenntnisse in React sind nicht erforderlich.
Was wir bauen werden
Um die wichtigsten React-Konzepte praxisnah zu zeigen, bauen wir eine einfache Aufgabenverwaltung, auch bekannt als To-do-Liste. Das klingt nach einem Klassiker, und das ist es auch. Der Grund: Eine To-do-App deckt alle wesentlichen Grundkonzepte ab, ohne unnoetig komplex zu sein. Wir werden:
- Aufgaben anzeigen
- Neue Aufgaben hinzufuegen
- Aufgaben als erledigt markieren
- Aufgaben loeschen
Das mag schlicht klingen, aber auf dem Weg dorthin lernen wir Komponentenstruktur, Props, State-Management mit useState, Ereignisbehandlung und bedingte Darstellung kennen. Das sind die Bausteine, auf denen jede React-Anwendung basiert.
Schritt 1: Die Entwicklungsumgebung einrichten
Bevor wir Code schreiben, muessen wir sicherstellen, dass die notwendigen Werkzeuge installiert sind.
Node.js installieren
React selbst laeuft im Browser, aber die Entwicklungswerkzeuge rund um React laufen in Node.js. Node.js ist eine JavaScript-Laufzeitumgebung, die es erlaubt, JavaScript ausserhalb des Browsers auszufuehren. Ausserdem enthaelt es den Paketmanager npm, den wir benoetigen, um React und andere Abhaengigkeiten zu installieren.
Lade Node.js von der offiziellen Website nodejs.org herunter. Empfohlen wird die LTS-Version (Long Term Support), da diese stabiler und besser getestet ist als die aktuellste Entwicklungsversion. Nach der Installation kannst du in deinem Terminal ueberpruefen, ob alles korrekt eingerichtet ist:
node --version
npm --versionBeide Befehle sollten eine Versionsnummer ausgeben. Wenn das der Fall ist, sind wir bereit fuer den naechsten Schritt.
Einen Code-Editor waehlen
Fuer die React-Entwicklung brauchst du einen guten Code-Editor. Visual Studio Code, kurz VS Code, ist heute der Industriestandard und fuer die meisten Entwicklerinnen und Entwickler die erste Wahl. Er ist kostenlos, unterstuetzt TypeScript und JSX von Haus aus, bietet hervorragendes IntelliSense und verfuegt ueber ein riesiges Oekosystem an Erweiterungen.
Besonders nuetzliche VS-Code-Erweiterungen fuer React-Entwicklung sind ES7+ React/Redux/React-Native Snippets, Prettier fuer automatische Codeformatierung und ESLint fuer die Erkennung von Codefehlern in Echtzeit.
Schritt 2: Ein neues React-Projekt erstellen
Frueher musste man ein React-Projekt von Hand aufsetzen, was zahlreiche Konfigurationsschritte bedeutete. Heute gibt es deutlich schnellere Wege. Der empfohlene Ansatz 2026 ist Vite.
Warum Vite statt Create React App?
Create React App, kurz CRA, war lange der offizielle Weg, um ein neues React-Projekt zu starten. Es funktioniert noch immer, aber es ist langsam und wird nicht mehr aktiv weiterentwickelt. Vite ist die moderne Alternative: blitzschnell beim Starten des Entwicklungsservers, schlanker in der Konfiguration und deutlich besser fuer groessere Projekte geeignet.
Oeffne dein Terminal und fuehre den folgenden Befehl aus:
npm create vite@latest meine-erste-react-app -- --template reactDieser Befehl erstellt einen neuen Ordner mit dem Namen meine-erste-react-app und richtet ein React-Projekt mit Vite als Entwicklungsserver und Build-Werkzeug ein. Wechsle dann in den neuen Ordner und installiere alle Abhaengigkeiten:
cd meine-erste-react-app
npm installStarte anschliessend den Entwicklungsserver:
npm run devVite gibt dir eine lokale URL aus, in der Regel http://localhost:5173. Oeffne diese in deinem Browser, und du siehst die Standard-React-Startseite. Herzlichen Glueckwunsch, dein erstes React-Projekt laeuft.
Also Read: Was ist React.js und warum ist es 2026 so beliebt?
Die Projektstruktur verstehen
Schauen wir uns an, was Vite fuer uns erstellt hat. Im Projektordner findest du folgende Struktur:
meine-erste-react-app/
node_modules/
public/
src/
assets/
App.css
App.jsx
index.css
main.jsx
index.html
package.json
vite.config.jsDie wichtigsten Dateien und Ordner:
- index.html: Der einzige HTML-Einstiegspunkt der Anwendung. React haengt sich an das div-Element mit der id "root".
- src/main.jsx: Der JavaScript-Einstiegspunkt. Hier wird die App-Komponente in den DOM gerendert.
- src/App.jsx: Die Wurzelkomponente der Anwendung. Hier beginnen wir mit unserem Code.
- package.json: Listet alle Abhaengigkeiten und verfuegbaren Skripte auf.
- node_modules/: Enthaelt alle installierten Pakete. Dieser Ordner wird nie manuell bearbeitet und sollte nicht in die Versionskontrolle aufgenommen werden.
Schritt 3: Aufraeumen und vorbereiten
Das Standard-Vite-Projekt enthaelt Demo-Inhalte, die wir nicht benoetigen. Bevor wir anfangen, raeumen wir auf.
Ersetze den gesamten Inhalt von src/App.jsx mit diesem Startpunkt:
function App() {
return (
<div>
<h1>Meine Aufgabenliste</h1>
</div>
);
}
export default App;Ersetze ausserdem den Inhalt von src/index.css und src/App.css mit leerem Inhalt, oder losche den Inhalt einfach vollstaendig. So starten wir mit einer sauberen Basis.
Speichere die Dateien. Vite aktualisiert den Browser automatisch, und du siehst jetzt nur noch die Ueberschrift "Meine Aufgabenliste". Das nennt sich Hot Module Replacement (HMR): Aenderungen im Code werden sofort im Browser sichtbar, ohne dass du die Seite manuell neu laden musst.
Schritt 4: Die erste eigene Komponente erstellen
Jetzt wird es interessant. Wir erstellen unsere erste eigene Komponente: eine einzelne Aufgabenkarte, die eine Aufgabe darstellt.
Erstelle im Ordner src eine neue Datei mit dem Namen AufgabenItem.jsx und fuege folgenden Code ein:
function AufgabenItem({ text, erledigt }) {
return (
<li>
<span>{erledigt ? <s>{text}</s> : text}</span>
</li>
);
}
export default AufgabenItem;Was passiert hier? Die Funktion AufgabenItem ist unsere Komponente. Sie empfaengt Props, also Eigenschaften, die von einer uebergeordneten Komponente weitergegeben werden. In unserem Fall sind das text (der Aufgabentext) und erledigt (ein Boolean, der angibt, ob die Aufgabe abgeschlossen ist).
Der Ausdruck {erledigt ? <s>{text}</s> : text} ist ein ternary operator in JSX. Wenn erledigt den Wert true hat, wird der Text durchgestrichen dargestellt. Anderenfalls erscheint er normal. Das ist bedingte Darstellung in React.
Komponente in App.jsx einbinden
Gehe zurueck zu App.jsx und importiere und verwende die neue Komponente:
import AufgabenItem from './AufgabenItem';
function App() {
return (
<div>
<h1>Meine Aufgabenliste</h1>
<ul>
<AufgabenItem text="Einkaufen gehen" erledigt={false} />
<AufgabenItem text="React lernen" erledigt={true} />
<AufgabenItem text="Projekt starten" erledigt={false} />
</ul>
</div>
);
}
export default App;Speichere und schau in den Browser. Du siehst jetzt drei Aufgaben, wobei "React lernen" durchgestrichen ist. Das ist Komponentenkomposition in Aktion: App ist eine uebergeordnete Komponente, die mehrere AufgabenItem-Komponenten zusammensetzt und ihnen Daten via Props uebergibt.
Schritt 5: State einfuehren mit useState
Bisher sind unsere Aufgaben hartcodiert. Das ist nicht sehr nuetzlich. Wir wollen, dass Aufgaben dynamisch verwaltet werden koennen. Hier kommt useState ins Spiel.
useState ist ein React-Hook, der es einer Komponente erlaubt, einen eigenen Zustand zu halten. Wenn sich der Zustand aendert, rendert React die Komponente neu und aktualisiert die Darstellung im Browser.
Aktualisiere App.jsx wie folgt:
import { useState } from 'react';
import AufgabenItem from './AufgabenItem';
const startaufgaben = [
{ id: 1, text: 'Einkaufen gehen', erledigt: false },
{ id: 2, text: 'React lernen', erledigt: true },
{ id: 3, text: 'Projekt starten', erledigt: false },
];
function App() {
const [aufgaben, setAufgaben] = useState(startaufgaben);
return (
<div>
<h1>Meine Aufgabenliste</h1>
<ul>
{aufgaben.map((aufgabe) => (
<AufgabenItem
key={aufgabe.id}
text={aufgabe.text}
erledigt={aufgabe.erledigt}
/>
))}
</ul>
</div>
);
}
export default App;Einige wichtige Punkte zu diesem Code:
- useState(startaufgaben) initialisiert den State mit unserer Startliste. Die Funktion gibt zwei Werte zurueck: den aktuellen State (aufgaben) und eine Funktion, um den State zu aktualisieren (setAufgaben).
- aufgaben.map() durchlaeuft das Array und erstellt fuer jede Aufgabe eine AufgabenItem-Komponente.
- key={aufgabe.id}: React benoetigt bei Listen einen eindeutigen key fuer jedes Element, um Aenderungen effizient verfolgen zu koennen.
Schritt 6: Aufgaben als erledigt markieren
Jetzt fuegen wir Interaktivitaet hinzu. Wenn ein Nutzer auf eine Aufgabe klickt, soll sie als erledigt markiert werden.
Zuerst uebergeben wir der AufgabenItem-Komponente eine Funktion als Prop, die beim Klicken aufgerufen wird. Aktualisiere App.jsx:
import { useState } from 'react';
import AufgabenItem from './AufgabenItem';
const startaufgaben = [
{ id: 1, text: 'Einkaufen gehen', erledigt: false },
{ id: 2, text: 'React lernen', erledigt: true },
{ id: 3, text: 'Projekt starten', erledigt: false },
];
function App() {
const [aufgaben, setAufgaben] = useState(startaufgaben);
function aufgabeUmschalten(id) {
setAufgaben(aufgaben.map((aufgabe) =>
aufgabe.id === id
? { ...aufgabe, erledigt: !aufgabe.erledigt }
: aufgabe
));
}
return (
<div>
<h1>Meine Aufgabenliste</h1>
<ul>
{aufgaben.map((aufgabe) => (
<AufgabenItem
key={aufgabe.id}
text={aufgabe.text}
erledigt={aufgabe.erledigt}
beimKlick={() => aufgabeUmschalten(aufgabe.id)}
/>
))}
</ul>
</div>
);
}
export default App;Die Funktion aufgabeUmschalten erstellt ein neues Array, in dem nur die geklickte Aufgabe den erledigt-Wert wechselt. Wir aendern niemals den bestehenden State direkt, sondern erstellen immer eine neue Version. Das ist ein grundlegendes Prinzip in React: State ist unveraenderlich (immutable).
Jetzt aktualisiere AufgabenItem.jsx, damit der Klick verarbeitet wird:
function AufgabenItem({ text, erledigt, beimKlick }) {
return (
<li onClick={beimKlick} style={{ cursor: 'pointer' }}>
<span>{erledigt ? <s>{text}</s> : text}</span>
</li>
);
}
export default AufgabenItem;Klicke jetzt im Browser auf eine Aufgabe. Sie wird sofort durchgestrichen. Klicke nochmals, und die Markierung wird aufgehoben. Das ist reaktive UI-Logik mit React in der einfachsten Form.
Schritt 7: Neue Aufgaben hinzufuegen
Als naechstes brauchen wir ein Eingabefeld, ueber das Nutzerinnen und Nutzer neue Aufgaben hinzufuegen koennen. Wir erstellen dafuer eine eigene Komponente.
Erstelle eine neue Datei src/AufgabenEingabe.jsx:
import { useState } from 'react';
function AufgabenEingabe({ beimHinzufuegen }) {
const [eingabe, setEingabe] = useState('');
function absenden(e) {
e.preventDefault();
if (eingabe.trim() === '') return;
beimHinzufuegen(eingabe.trim());
setEingabe('');
}
return (
<form onSubmit={absenden}>
<input
type="text"
value={eingabe}
onChange={(e) => setEingabe(e.target.value)}
placeholder="Neue Aufgabe eingeben..."
/>
<button type="submit">Hinzufuegen</button>
</form>
);
}
export default AufgabenEingabe;Diese Komponente hat ihren eigenen lokalen State fuer den aktuellen Inhalt des Eingabefeldes. Das nennt sich kontrolliertes Eingabeelement (Controlled Input): Der Wert des Eingabefeldes wird immer vom React-State gesteuert, und jede Tastatureingabe aktualisiert diesen State ueber die onChange-Funktion.
Beim Abschicken des Formulars wird e.preventDefault() aufgerufen, um das Standard-Browserverhalten (Seite neu laden) zu verhindern. Dann pruefen wir, ob die Eingabe nicht leer ist, rufen die uebergebene Funktion beimHinzufuegen auf und leeren anschliessend das Eingabefeld.
Jetzt binden wir diese Komponente in App.jsx ein und erstellen die Hinzufuegen-Logik:
import { useState } from 'react';
import AufgabenItem from './AufgabenItem';
import AufgabenEingabe from './AufgabenEingabe';
const startaufgaben = [
{ id: 1, text: 'Einkaufen gehen', erledigt: false },
{ id: 2, text: 'React lernen', erledigt: true },
{ id: 3, text: 'Projekt starten', erledigt: false },
];
function App() {
const [aufgaben, setAufgaben] = useState(startaufgaben);
function aufgabeUmschalten(id) {
setAufgaben(aufgaben.map((aufgabe) =>
aufgabe.id === id
? { ...aufgabe, erledigt: !aufgabe.erledigt }
: aufgabe
));
}
function aufgabeHinzufuegen(text) {
const neueAufgabe = {
id: Date.now(),
text,
erledigt: false,
};
setAufgaben([...aufgaben, neueAufgabe]);
}
return (
<div>
<h1>Meine Aufgabenliste</h1>
<AufgabenEingabe beimHinzufuegen={aufgabeHinzufuegen} />
<ul>
{aufgaben.map((aufgabe) => (
<AufgabenItem
key={aufgabe.id}
text={aufgabe.text}
erledigt={aufgabe.erledigt}
beimKlick={() => aufgabeUmschalten(aufgabe.id)}
/>
))}
</ul>
</div>
);
}
export default App;Als ID fuer neue Aufgaben verwenden wir Date.now(), der den aktuellen Zeitstempel in Millisekunden zurueckgibt. Das ist fuer kleine Anwendungen eine einfache und praktische Loesung, solange keine echte Datenbank im Spiel ist.
Schritt 8: Aufgaben loeschen
Der letzte fehlende Baustein ist das Loeschen von Aufgaben. Das ist konzeptionell der einfachste Teil: Wir filtern das Array und entfernen die Aufgabe mit der entsprechenden ID.
Fuege in App.jsx eine weitere Funktion hinzu:
function aufgabeLoeschen(id) {
setAufgaben(aufgaben.filter((aufgabe) => aufgabe.id !== id));
}Uebergib diese Funktion ebenfalls als Prop an AufgabenItem:
<AufgabenItem
key={aufgabe.id}
text={aufgabe.text}
erledigt={aufgabe.erledigt}
beimKlick={() => aufgabeUmschalten(aufgabe.id)}
beimLoeschen={() => aufgabeLoeschen(aufgabe.id)}
/>Aktualisiere AufgabenItem.jsx mit einem Loeschen-Button:
function AufgabenItem({ text, erledigt, beimKlick, beimLoeschen }) {
return (
<li>
<span onClick={beimKlick} style={{ cursor: 'pointer' }}>
{erledigt ? <s>{text}</s> : text}
</span>
<button onClick={beimLoeschen}>Loeschen</button>
</li>
);
}
export default AufgabenItem;Die fertige Anwendung erlaubt es jetzt, Aufgaben hinzuzufuegen, als erledigt zu markieren und zu loeschen. Das ist eine vollstaendige CRUD-Anwendung (Create, Read, Update, Delete) in ihrer einfachsten Form, aufgebaut mit echten React-Konzepten.
Schritt 9: Daten in localStorage speichern
Momentan gehen alle Aufgaben verloren, wenn die Seite neu geladen wird. Mit ein wenig zusaetzlichem Code koennen wir den State im Browser-localStorage speichern, sodass die Aufgaben auch nach einem Neuladen erhalten bleiben.
Aktualisiere den useState-Aufruf in App.jsx wie folgt:
const [aufgaben, setAufgaben] = useState(() => {
const gespeichert = localStorage.getItem('aufgaben');
return gespeichert ? JSON.parse(gespeichert) : startaufgaben;
});Und fuege einen useEffect-Hook hinzu, der die Aufgaben bei jeder Aenderung speichert:
import { useState, useEffect } from 'react';
// ... im Funktionsrumpf von App:
useEffect(() => {
localStorage.setItem('aufgaben', JSON.stringify(aufgaben));
}, [aufgaben]);Der useEffect-Hook fuehrt die uebergebene Funktion aus, sobald sich der Wert in dem Abhaengigkeits-Array, hier aufgaben, aendert. Das bedeutet: Jedes Mal, wenn die Aufgabenliste veraendert wird, werden die aktuellen Daten automatisch im localStorage gespeichert.
Die Initialisierungsfunktion fuer useState liest beim ersten Laden den gespeicherten Wert aus dem localStorage. Gibt es noch keinen gespeicherten Wert, werden die Startaufgaben verwendet.
Schritt 10: Einen einfachen Filter hinzufuegen
Als abschliessende Erweiterung fuegen wir eine Filterfunktion hinzu: Nutzerinnen und Nutzer sollen zwischen allen Aufgaben, offenen Aufgaben und erledigten Aufgaben wechseln koennen.
const [filter, setFilter] = useState('alle');
const gefilterteAufgaben = aufgaben.filter((aufgabe) => {
if (filter === 'offen') return !aufgabe.erledigt;
if (filter === 'erledigt') return aufgabe.erledigt;
return true;
});Und im JSX:
<div>
<button onClick={() => setFilter('alle')}>Alle</button>
<button onClick={() => setFilter('offen')}>Offen</button>
<button onClick={() => setFilter('erledigt')}>Erledigt</button>
</div>
<ul>
{gefilterteAufgaben.map((aufgabe) => (
<AufgabenItem ... />
))}
</ul>Dieser Filter arbeitet rein auf der Darstellungsebene. Der urspruengliche State wird nicht veraendert: Wir zeigen lediglich eine gefilterte Ansicht der vorhandenen Aufgaben an. Das ist ein wichtiges Muster in React: State ist die einzige Quelle der Wahrheit (Single Source of Truth), und die Darstellung ist immer eine Funktion des States.
Schritt 11: Projekt fuer die Produktion bauen
Wenn deine Anwendung fertig ist und du sie veroeffentlichen moechtest, kannst du sie mit einem einzigen Befehl fuer die Produktion bauen:
npm run buildVite erstellt einen dist-Ordner mit optimierten, minimierten Dateien, die bereit sind, auf einem Webserver oder einer Hosting-Plattform veroeffentlicht zu werden. Zum Testen des fertigen Builds lokal:
npm run previewMoegliche Hosting-Plattformen fuer React-Apps sind unter anderem Vercel, Netlify und GitHub Pages. Vercel ist besonders empfehlenswert, da es nahtlos mit GitHub integriert ist und automatische Deployments bei jedem Push unterstuetzt.
Haeufige Anfaengerfehler und wie man sie vermeidet
State direkt veraendern
Ein sehr haeufiger Fehler ist das direkte Veraendern des State-Objekts oder State-Arrays. In React darf der State niemals direkt veraendert werden. Stattdessen muss immer eine neue Kopie erstellt werden:
// Falsch - State wird direkt veraendert:
aufgaben.push(neueAufgabe);
setAufgaben(aufgaben);
// Richtig - neues Array erstellen:
setAufgaben([...aufgaben, neueAufgabe]);Den key-Prop in Listen vergessen
Wenn du eine Liste von Komponenten renderst, muss jedes Element einen eindeutigen key-Prop haben. Ohne diesen zeigt React eine Warnung in der Konsole an und kann Listenelemente nicht effizient aktualisieren. Verwende niemals den Index des Arrays als key, wenn sich die Reihenfolge der Elemente aendern kann, da das zu unerwarteten Verhaltensweisen fuehrt.
useEffect-Abhaengigkeiten vergessen
Wenn du useEffect verwendest und auf Variablen oder State aus dem Komponentenrumpf zugreifst, muessen diese im Abhaengigkeits-Array angegeben werden. Andernfalls wird der Effect moeglicherweise mit veralteten Werten ausgefuehrt. ESLint mit dem Plugin eslint-plugin-react-hooks warnt dich automatisch, wenn Abhaengigkeiten fehlen.
Zu frueh globalen State verwenden
Anfaengerinnen und Anfaenger greifen oft zu schnell auf globale State-Loesungen wie Redux. In den meisten Faellen ist lokaler Komponenten-State mit useState voellig ausreichend. Fuehre globalen State erst dann ein, wenn du merkst, dass du denselben State zwischen mehreren weit voneinander entfernten Komponenten teilen musst.
Naechste Schritte nach der ersten App
Mit der fertigen To-do-App hast du die grundlegenden Konzepte von React in der Praxis angewendet. Was kommt als naechstes?
- TypeScript einfuehren: Erweitere dein Projekt um TypeScript, um Typen fuer Props und State zu definieren und Fehler fruehzeitig zu erkennen.
- React Router lernen: Sobald eine App mehrere Seiten haben soll, braucht es clientseitiges Routing. React Router ist die Standardloesung.
- Daten von einer API laden: Verbinde deine App mit einer echten REST-API oder GraphQL-API. TanStack Query erleichtert das Laden, Cachen und Aktualisieren von Serverdaten erheblich.
- Next.js erkunden: Next.js baut auf React auf und fuegt serverseitiges Rendering, Dateisystem-Routing und API-Routen hinzu. Es ist heute der Standard fuer produktionsreife React-Anwendungen.
- Testen lernen: Schreibe Unit-Tests fuer deine Komponenten mit der React Testing Library und Vitest.
Haeufig gestellte Fragen zum Einstieg in React
Wie lange dauert es, React zu lernen?
Mit soliden JavaScript-Grundlagen kann man die Kernkonzepte von React in ein bis zwei Wochen erlernen. Um produktiv damit zu arbeiten, braucht man erfahrungsgemaess ein bis drei Monate regelmaessiges Ueben. Echte Beherrschung kommt durch das Bauen eigener Projekte, nicht durch das Lesen von Dokumentation allein.
Brauche ich JavaScript-Kenntnisse, bevor ich React lerne?
Ja, unbedingt. React ist JavaScript, und wer React lernt, ohne die Grundlagen von JavaScript zu kennen, wird schnell an Grenzen stossen. Besonders wichtig sind Funktionen, Arrays und deren Methoden (map, filter, reduce), Objekte, Destructuring, Arrow-Funktionen, der Spread-Operator, Promises und async/await.
Muss ich CSS fuer React-Entwicklung koennen?
Grundkenntnisse in CSS sind sehr hilfreich, da React ausschliesslich die Logik der Oberflaeche steuert. Das Styling kommt nach wie vor von CSS. Fuer Einsteiger empfiehlt sich Tailwind CSS, das die Notwendigkeit, komplexe CSS-Regeln von Hand zu schreiben, erheblich reduziert.
Kann ich React ohne JSX verwenden?
Ja, technisch ist das moeglich. React stellt eine Funktion namens React.createElement zur Verfuegung, mit der Elemente ohne JSX erstellt werden koennen. In der Praxis schreibt jedoch so gut wie jeder React-Code mit JSX, da es deutlich lesbarer und produktiver ist. JSX ist keine Pflicht, aber ein De-facto-Standard.
Was ist der Unterschied zwischen einer Komponente und einem Element in React?
Eine Komponente ist eine Funktion (oder Klasse), die beschreibt, wie ein Teil der Oberflaeche aussehen soll. Ein Element ist ein React-Objekt, das das Ergebnis des Aufrufens dieser Komponente darstellt, also die konkrete Beschreibung eines DOM-Knotens oder einer Komponenteninstanz. Kurz gesagt: Komponenten sind Schablonen, Elemente sind die konkreten Instanzen.
Soll ich React oder Next.js lernen?
Lerne React zuerst. Next.js baut auf React auf, und wer die Grundkonzepte von React nicht versteht, wird mit Next.js Schwierigkeiten haben. Sobald du React-Grundlagen beherrschst, ist der Schritt zu Next.js vergleichsweise einfach und ergibt dann wirklich Sinn.
Published By: IIHGlobal Deutschland
