React ist eine beliebte JavaScript-Bibliothek für die Entwicklung von Benutzeroberflächen. Damit können Sie dynamische Webanwendungen erstellen, die auf Datenänderungen reagieren und eine reibungslose Benutzererfahrung ermöglichen. Wenn Sie gerade mit dem Lernen von React beginnen und Ihr erstes Projekt erstellen möchten, hilft Ihnen diese Schritt-für-Schritt-Anleitung, schnell zu beginnen.
Für die Entwicklung von React-Projekten ist Visual Studio Code (VS Code) die gebräuchlichste Wahl der Entwicklungsumgebung. VS Code ist ein kostenloser und gebräuchlicher Code-Editor von Microsoft, der eine breite Palette von Tools für die Entwicklung von Webanwendungen bietet.
Was brauchen wir, um mit der Entwicklung eines React-Projekts in VS Code zu beginnen? Stellen Sie zunächst sicher, dass Node auf Ihrem Computer installiert ist.js Version 10 oder höher. Node.js ist eine Plattform zum Ausführen von JavaScript-Code auf dem Server und bietet Tools für die Anwendungsentwicklung. Zweitens, installieren Sie den VS Code selbst, um vollen Zugriff auf alle Funktionen und Erweiterungen zu haben. Jetzt, da wir alles haben, was wir brauchen, beginnen wir mit dem Erstellen eines React-Projekts in VS Code.
VS Code installieren und konfigurieren
Die Schritte zum Installieren und Konfigurieren von VS Code können folgendermaßen ausgeführt werden:
1. Rufen Sie die offizielle Visual Studio Code-Website auf https://code.visualstudio.com / und laden Sie die neueste Version des Editors für das Betriebssystem herunter, das Sie verwenden.
2. Installieren Sie die heruntergeladene Datei gemäß den Anweisungen des Installationsprogramms. Führen Sie nach Abschluss der Installation VS Code aus.
3. Nach dem Ausführen von VS Code wird die erste Begrüßungsseite geöffnet. Auf dieser Seite finden Sie hilfreiche Tipps und Links zur Dokumentation.
4. Klicken Sie im oberen Bereich auf die Schaltfläche Erweiterungen oder drücken Sie die Tastenkombination Strg+ Umschalt+X (für Windows und Linux) oder Cmd+Umschalt+X (für macOS), um das Erweiterungsfenster zu öffnen.
5. Im Erweiterungsfenster können Sie Erweiterungen für VS Code suchen, installieren und verwalten. Um mit React-Projekten zu arbeiten, müssen Sie eine Erweiterung namens "Reactjs code snippets" installieren. Geben Sie den Namen in das Suchfeld ein und drücken Sie die Eingabetaste. Wählen Sie dann die Erweiterung "Reactjs code snippets" aus und klicken Sie auf die Schaltfläche Installieren.
6. Nach der Installation der Erweiterung "Reactjs code snippets" wird in VS Code die Unterstützung für React-Snippets aktiviert, was das Schreiben von Code erheblich vereinfacht.
Nachdem Sie jetzt VS Code installiert und konfiguriert haben, können Sie mit dem Erstellen eines React-Projekts in diesem Editor beginnen.
Erstellen eines neuen Projekts mit der Create React App
Um ein neues Projekt mit der Create React App zu erstellen, müssen Sie es global auf Ihrem Computer installieren. Sie können dies mit dem Befehl tun:
npm install -g create-react-app
Nachdem Sie die Create React App erfolgreich installiert haben, können Sie ein neues Projekt erstellen, indem Sie in den Ordner gehen, in dem Sie das Projekt erstellen möchten, und den Befehl ausführen:
npx create-react-app my-app
Ersetzen Sie "my-app" durch den Namen Ihres Projekts.
Nachdem Sie diesen Befehl ausgeführt haben, erstellt Create React App einen neuen Ordner "my-app" (oder mit dem von Ihnen angegebenen Namen) und konfiguriert alle erforderlichen Dateien und Abhängigkeiten für die Entwicklung der React-Anwendung.
Nachdem die Installation abgeschlossen ist, können Sie in den Projektordner wechseln, indem Sie den Befehl ausführen:
cd my-app
Im Ordner Ihres Projekts finden Sie die folgende Dateistruktur:
my-app├── node_modules├── public│ ├── favicon.ico│ ├── index.html│ └── . ├── src│ ├── App.css│ ├── App.js│ ├── index.css│ └── . ├── .gitignore├── package.json├── README.md└── .
Die Dateien im Ordner "public" sind für das Aussehen Ihrer Anwendung verantwortlich, während die Dateien im Ordner "src" den Hauptcode Ihrer Anwendung enthalten.
Jetzt können Sie Ihre React-Anwendung starten, indem Sie den Befehl ausführen:
npm start
Nach erfolgreichem Start wird Ihre Anwendung unter der folgenden Adresse verfügbar sein http://localhost:3000 .
Jetzt können Sie mit der Entwicklung Ihrer React-Anwendung beginnen, indem Sie die Dateien im Ordner "src" bearbeiten. Ihre Änderungen werden automatisch im Browser aktualisiert, ohne dass der Entwicklungsserver neu gestartet werden muss.
Arbeiten mit Komponenten in React
Um eine Komponente in React zu erstellen, müssen Sie eine Klasse oder Funktion definieren, die für die Logik und Anzeige der Komponente verantwortlich ist. Klassenkomponenten werden mit dem Schlüsselwort class und Funktionskomponenten mit dem Schlüsselwort function definiert.
Verwenden Sie die Eigenschaften (props) und Status (state), um Daten an eine Komponente zu senden und ihren Status zu verwalten. Eigenschaften sind Daten, die bei der Erstellung an eine Komponente übergeben werden. Der Status stellt veränderbare Daten dar, die sich auf die Anzeige der Komponente auswirken können.
Komponenten können durch Erstellen einer Komponentenhierarchie ineinander verschachtelt werden. Dadurch können Sie modulare und skalierbare Anwendungen erstellen.
Um eine Komponente in einer React-Anwendung zu verwenden, müssen Sie sie importieren und an der gewünschten Stelle der übergeordneten Komponente hinzufügen. Sie können eine Komponente mit JSX anzeigen, einer JavaScript-syntaktischen Erweiterung, mit der Sie HTML-ähnlichen Code in JavaScript schreiben können.
Die gesamte Arbeit mit Komponenten in React basiert auf dem Prinzip der "Trennung von Verantwortlichkeiten", mit dem Sie den Code in separate Teile aufteilen können, von denen jeder nur für seine spezifischen Aufgaben verantwortlich ist.
Stilisieren eines Projekts mit CSS und SASS
Erstellen Sie zunächst eine Stildatei für Ihr Projekt mit der Erweiterung .css oder .scss. Legen Sie diese Datei in den src-Ordner Ihres Projekts ab.
In React können Sie Stile mit den Attributen className oder style auf Komponenten anwenden. Wenn Sie das className-Attribut verwenden, können Sie eine Klasse aus Ihrer Stildatei angeben, indem Sie sie auf die gewünschte Komponente anwenden.
Im Falle der Verwendung von SASS können Sie seine leistungsstarken Funktionen wie Variablen, Verschachtelung, Mixins und vieles mehr nutzen. Installieren Sie dazu das node-sass-Paket mit dem Befehl npm install node-sass --save-dev.
Danach können Sie eine Datei mit der Erweiterung erstellen .scss und verwenden Sie es stattdessen .css. SASS wird beim Start des Projekts automatisch in CSS kompiliert.
Um SASS in einem React-Projekt zu verwenden, können Sie eine Stildatei direkt in Komponenten importieren, indem Sie die import-Syntax zusammen mit dem Dateipfad verwenden. Zum Beispiel:
Jetzt können Sie die in der styles-Datei beschriebenen Stile anwenden.scss, zu Ihren Komponenten mit dem className-Attribut.
Wenn Sie Ihr Projekt mit CSS und SASS stylen, können Sie ein schönes und modernes Design für Ihre React-Anwendung erstellen, wodurch sie attraktiver und benutzerfreundlicher wird.
Bereitstellen eines Projekts auf einem Remoteserver
Nachdem Sie Ihr React-Projekt mit VS Code erstellt haben, möchten Sie es möglicherweise auf einem Remote-Server bereitstellen. Dies kann nützlich sein, wenn Sie Ihr Projekt mit anderen Personen teilen oder in einer realen Umgebung ausführen möchten.
Um das Projekt auf einem Remote-Server bereitzustellen, müssen Sie zunächst einen Hosting-Anbieter auswählen. Es gibt viele Hosting-Anbieter, und die Auswahl hängt von Ihren Bedürfnissen und Vorlieben ab. Einige beliebte Optionen sind Amazon Web Services (AWS), Google Cloud Platform (GCP) und Microsoft Azure.
Nachdem Sie einen Hosting-Anbieter ausgewählt haben, müssen Sie den Server einrichten. Detaillierte Anweisungen zu diesem Vorgang erhalten Sie am besten vom Anbieter selbst. Dies beinhaltet in der Regel das Konfigurieren einer virtuellen Maschine oder Containerumgebung, das Installieren der erforderlichen Software und das Konfigurieren von Netzwerkeinstellungen.
Wenn Ihr Server konfiguriert ist, können Sie Ihr React-Projekt auf den Server hochladen. Dazu müssen Sie die vom Anbieter bereitgestellten Dateiverwaltungstools verwenden. Dies ist normalerweise eine FTP- oder SSH-Verbindung.
Laden Sie alle Dateien Ihres Projekts auf den Server hoch, einschließlich aller Abhängigkeiten und Konfigurationsdateien. Stellen Sie sicher, dass Ihre Abhängigkeiten installiert sind und dass Ihre package-Datei installiert ist.json enthält alle Pakete, die zum Ausführen des Projekts benötigt werden.
Nachdem Sie das Projekt auf den Server hochgeladen haben, können Sie die Serverumgebung konfigurieren und das Projekt ausführen. Um dies zu tun, müssen Sie erneut die vom Anbieter bereitgestellten Tools verwenden. Die Konfiguration der Serverumgebung kann die Installation von Node beinhalten.js, Anwendungsserverkonfiguration und Datenbankkonfiguration.
Wenn alles eingerichtet ist, können Sie Ihr React-Projekt mit Befehlen, die Sie bereits kennen, auf einem Remote-Server ausführen - z. B. npm start oder yarn start . Der Server wird erstellt und Ihre Anwendung wird unter dem von Ihnen angegebenen Domainnamen oder der von Ihnen angegebenen IP-Adresse verfügbar sein.
