ReactJS - Beispiel: Ein umfassender Leitfaden für Anfänger

Hallo da draußen, angehende Entwickler! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt von ReactJS zu sein. Als jemand, der seit über einem Jahrzehnt Informatik unterrichtet, habe ich unzählige Schüler gesehen, die aufleuchten, wenn sie die Macht von React erfassen. Also tauchen wir ein und erschaffen wir gemeinsam etwas[jsx]Erstaunliches!

Was ist ReactJS?

Bevor wir uns dem Beispiel zuwenden, lassen Sie uns schnell darüber sprechen, was ReactJS ist. Stellen Sie sich vor, Sie bauen ein Haus aus Lego-Steinen. ReactJS ist wie ein magisches Set von Lego-Steinen, das von alleine Form und Farbe ändern kann! Es ist eine JavaScript-Bibliothek, die uns hilft, Benutzeroberflächen (die Teile von Websites und Apps, die Sie sehen und mit denen Sie interagieren) auf eine wirklich kluge und effiziente Weise zu bauen.

Features von ReactJS

Schauen wir uns einige der Schlüsselmerkmale an, die React so besonders machen:

Feature	Beschreibung
Komponentenbasiert	React lässt uns UIs mit wiederverwendbaren Teilen namens Komponenten bauen
Virtueller DOM	Eine leichte Kopie des tatsächlichen DOM für schnellere Updates
JSX	Eine Syntaxerweiterung, die es uns ermöglicht, HTML-ähnlichen Code in JavaScript zu schreiben
Unidirektionaler Datenfluss	Daten fließen in eine Richtung, was unsere Apps vorhersehbarer macht
React Native	Lässt uns mobile Apps mit React bauen

Nun, da wir einen Überblick haben, erstellen wir ein einfaches React-Beispiel, um diese Features in Aktion zu sehen!

Einrichten unserer React-Umgebung

Zunächst müssen wir unsere Entwicklungsumgebung einrichten. Keine Sorge, es ist einfacher als es klingt! Wir verwenden ein Werkzeug namens Create React App, das alles für uns mit einem einzigen Befehl einrichtet.

Öffnen Sie Ihr Terminal und tippen Sie:

npx create-react-app mein-erstes-react-app
cd mein-erstes-react-app
npm start

Voilà! Sie haben gerade Ihre erste React-App erstellt. Wenn Sie Ihren Browser öffnen und zu http://localhost:3000 gehen, sollten Sie die Standard-React-App sehen.

Erstellen unseres ersten Komponenten

Nun erstellen wir unseren ersten React-Komponenten. Wir werden eine einfache Grußkomponente erstellen, die jemandem "Hallo" sagt.

Öffnen Sie die Datei src/App.js und ersetzen Sie deren Inhalt durch folgendes:

import React from 'react';

function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}

function App() {
return (
<div className="App">
<Greeting name="React Learner" />
</div>
);
}

export default App;

Lassen Sie uns das auseinandernehmen:

1. Wir importieren React (auch wenn wir es nicht explizit verwenden, es ist für JSX erforderlich).
2. Wir definieren eine Greeting-Komponente, die props (Eigenschaften) als Argument nimmt.
3. Die Greeting-Komponente gibt JSX zurück, das wie HTML aussieht, aber tatsächlich JavaScript ist.
4. Wir verwenden die Greeting-Komponente in unserer App-Komponente und übergeben ihr eine name-Prop.

Wenn Sie diese Datei speichern, sollten Sie "Hello, React Learner!" in Ihrem Browser sehen. Gratulation, Sie haben gerade Ihre erste React-Komponente erstellt!

Hinzufügen von Zustand zu unserer Komponente

Nun machen wir unsere App interaktiver, indem wir Zustand hinzufügen. Wir erstellen einen Knopf, der, wenn er geklickt wird, den Namen in unserer Begrüßung ändert.

Aktualisieren Sie Ihre App.js, um wie folgt auszusehen:

import React, { useState } from 'react';

function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}

function App() {
const [name, setName] = useState('React Learner');

const changeName = () => {
setName('React Expert');
};

return (
<div className="App">
<Greeting name={name} />
<button onClick={changeName}>Become an Expert</button>
</div>
);
}

export default App;

Hier ist, was neu ist:

1. Wir importieren useState, ein React-Hook, das uns ermöglicht, Zustand zu unserer Komponente hinzuzufügen.
2. Wir verwenden useState, um eine name-Zustandsvariablen und eine setName-Funktion zu erstellen, um sie zu aktualisieren.
3. Wir erstellen eine changeName-Funktion, die unseren name-Zustand aktualisiert.
4. Wir fügen einen Knopf hinzu, der die changeName-Funktion aufruft, wenn er geklickt wird.

Nun, wenn Sie auf die Schaltfläche "Become an Expert" klicken, sollte die Begrüßung von "Hello, React Learner!" auf "Hello, React Expert!" ändern. Dies demonstrates Reacts unidirektionalen Datenfluss: der Zustandswechsel löst eine Neuanzeige unserer Komponente aus.

Verwendung des virtuellen DOM

Vielleicht fragen Sie sich, "Warum hat sich die ganze Seite nicht neu geladen, als wir auf die Schaltfläche geklickt haben?" Hier kommt Reacts virtueller DOM ins Spiel. Wenn wir den Zustand ändern, erstellt React einen neuen virtuellen DOM-Baum, vergleicht ihn mit dem vorherigen und aktualisiert nur die Teile des echten DOM, die sich geändert haben. Dies macht unsere App superstark schnell und effizient!

Fazit

Und da haben Sie es, Leute! Wir haben eine einfache React-App erstellt, die einige der Kernfunktionen von React zeigt: Komponenten, Props, Zustand und der virtuelle DOM. Wir haben nur die Oberfläche dessen angekratzt, was React leisten kann, aber ich hoffe, dieses Beispiel hat Ihnen einen Vorgeschmack auf seine Macht und Flexibilität gegeben.

Denken Sie daran, das Lernen zu programmieren ist wie das Lernen einer neuen Sprache. Es erfordert Zeit, Übung und Geduld. Lassen Sie sich nicht entmutigen, wenn nicht alles sofort klickt. Halten Sie experimentieren, halten Sie bauen und vor allem, haben Sie Spaß!

In unserer nächsten Lektion tauchen wir tiefer in fortgeschrittene React-Konzepte ein. Bis dahin, fröhliches Coden und möge Ihre Komponenten immer fließend rendern!

Credits: Image by storyset