Erstellen und Ausführen eines React-Projekts

Was ist React?

React ist eine Open-Source-JavaScript-Bibliothek zur Erstellung von Benutzeroberflächen, die von Facebook verwaltet wird. Sie konzentriert sich auf die Erstellung der Darstellungsschicht und ermöglicht es Entwicklern, durch Komponenten effizient komplexe Benutzeroberflächen zu erstellen. Das Kernkonzept von React sind Komponenten und unidirektionale Datenflüsse, was den Code leichter verständlich und wartbar macht.

Hauptmerkmale und Vorteile von React

• Komponentenbasiert: Benutzeroberflächen werden durch Komponenten erstellt, was den Code modularer und wiederverwendbarer macht.
• Virtuelles DOM: React verwendet ein virtuelles DOM, um die Leistung zu optimieren. Das tatsächliche DOM wird nur bei Bedarf aktualisiert.
• Unidirektionaler Datenfluss: Daten fließen unidirektional zwischen den Komponenten, was das Zustandsmanagement der Anwendung klarer und vorhersagbarer macht.
• Starke Gemeinschaft und Ökosystem: React hat eine große Gemeinschaft und reichlich Unterstützung durch Drittanbieter-Bibliotheken, was die Entwicklung erleichtert.

React hilft Entwicklern, moderne und reaktionsschnelle Webanwendungen effizienter zu erstellen.

Erstellen und Ausführen eines React-Projekts mit ServBay

In diesem Artikel werden wir die von ServBay bereitgestellte Node.js-Umgebung verwenden, um ein React-Projekt zu erstellen und auszuführen. Wir werden die „Host“-Funktion von ServBay nutzen, um einen Webserver einzurichten und durch Reverse-Proxy und statische Datei-Dienste auf das Projekt zuzugreifen.

Erstellen eines React-Projekts

1. Projekt initialisieren

   Zunächst vergewissern Sie sich, dass Sie die von ServBay bereitgestellte Node.js-Umgebung installiert haben. Anschließend initialisieren Sie ein neues React-Projekt mit den folgenden Befehlen:

   cd /Applications/ServBay/www
   npx create-react-app servbay-react-app

2. Abhängigkeiten installieren

   Wechseln Sie ins Projektverzeichnis und installieren Sie die Abhängigkeiten:

   cd servbay-react-app
   npm install

Ausgabedarstellung des React-Projekts ändern

1. Datei src/App.js ändern

   Öffnen Sie die Datei src/App.js und ändern Sie den Inhalt so, dass die Webseite "Hello ServBay!" ausgibt:

   import React from 'react';
   import './App.css';
   
   function App() {
     return (
       <div className="App">
         <header className="App-header">
           <h1>Hello ServBay!</h1>
         </header>
       </div>
     );
   }
   
   export default App;

Entwicklungsmodus starten

1. Entwicklungsserver ausführen

   Starten Sie den Entwicklungsserver und geben Sie einen Port an (z.B. 8585):

   npm start -- --port 8585

   Dies wird einen lokalen Entwicklungsserver starten und den Port 8585 freigeben.

2. Reverse-Proxy im ServBay-Host konfigurieren

   Nutzen Sie die „Host“-Funktion von ServBay, um über einen Reverse-Proxy auf den Entwicklungsserver zuzugreifen. Fügen Sie in den Host-Einstellungen von ServBay einen neuen Reverse-Proxy hinzu:

   • Name: My first React dev site
   • Domain: servbay-react-test.dev
   • Host-Typ: Reverse-Proxy
   • IP: 127.0.0.1
   • Port: 8585

   Detaillierte Schritte siehe Node.js-Entwicklungswebsite hinzufügen.

3. Entwicklungsmodus aufrufen

   Öffnen Sie den Browser und besuchen Sie https://servbay-react-test.dev, um das Projekt in Echtzeit zu testen. Dank der Unterstützung von benutzerdefinierten Domänen und kostenlosen SSL-Zertifikaten von ServBay genießen Sie zusätzliche Sicherheit.

Produktionsversion erstellen

1. Produktionsversion erstellen

   Nach Abschluss der Entwicklung erstellen Sie die Produktionsversion mit dem folgenden Befehl:

   npm run build

   Nach dem Build befinden sich die generierten statischen Dateien im Verzeichnis build.

2. Statische Datei-Dienste einrichten

   Nutzen Sie die „Host“-Funktion von ServBay, um über den Dienst für statische Dateien auf die Produktionsversion zuzugreifen. Fügen Sie in den Host-Einstellungen von ServBay eine neue statische Website hinzu:

   • Name: My first React production site
   • Domain: servbay-react-test.prod
   • Host-Typ: Statisch
   • Website-Root-Verzeichnis: /Applications/ServBay/www/servbay-react-app/build

3. Produktionsmodus aufrufen

   Öffnen Sie den Browser und besuchen Sie https://servbay-react-test.prod, um die gebaute Produktionsversion zu testen. Dank der benutzerdefinierten Domänen und kostenlosen SSL-Zertifikate von ServBay wird Ihre Website sicherer und vertrauenswürdiger.

Durch die obigen Schritte haben Sie erfolgreich ein React-Projekt erstellt und ausgeführt sowie die Funktionen von ServBay genutzt, um Ihr Projekt zu verwalten und darauf zuzugreifen.