So erstellen Sie leistungsstarke Full-Stack-Anwendungen mit React und Node.js-js-Tutorial-php.cn

So erstellen Sie leistungsstarke Full-Stack-Anwendungen mit React und Node.js

WBOY

Freigeben： 2023-09-26 17:40:52

Original

736 Leute haben es durchsucht

So erstellen Sie leistungsstarke Full-Stack-Anwendungen mit React und Node.js

Einführung:
Mit der Entwicklung von Webanwendungen ist die Erstellung leistungsstarker Full-Stack-Anwendungen immer wichtiger geworden. React und Node.js werden als beliebte Front-End- und Back-End-Technologien häufig in der Full-Stack-Entwicklung eingesetzt. In diesem Artikel wird erläutert, wie Sie mit React und Node.js leistungsstarke Full-Stack-Anwendungen erstellen und spezifische Codebeispiele bereitstellen.

1. Erstellen Sie ein grundlegendes Projekt-Framework

Erstellen Sie ein Projektverzeichnis: Zuerst müssen wir ein Projektverzeichnis erstellen und ein neues Node.js-Projekt initialisieren. Sie können dies mit dem folgenden Befehl tun:
```
mkdir my-app
cd my-app
npm init -y
```
Nach dem Login kopieren
React und zugehörige Abhängigkeiten installieren: Führen Sie den folgenden Befehl im Projektverzeichnis aus, um React und zugehörige Abhängigkeiten zu installieren:
```
npm install react react-dom react-scripts
```
Nach dem Login kopieren
Erstellen Sie eine React-Komponente: Erstellen Sie eine React-Komponente namens App.js-Datei und fügen Sie den folgenden Code hinzu:
```
import React from 'react';

function App() {
  return (
 <div>
   <h1>Hello, World!</h1>
 </div>
  );
}

export default App;
```
Nach dem Login kopieren

Erstellen Sie die Eintragsdatei: Erstellen Sie eine Datei mit dem Namen index.js und fügen Sie den folgenden Code hinzu:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

Nach dem Login kopieren

Erstellen Sie eine HTML-Vorlage: Erstellen Sie eine Datei mit dem Namen index im Projektverzeichnis.html-Datei und fügen Sie den folgenden Code hinzu:
```
<!DOCTYPE html>
<html>
  <head>
 <title>React App</title>
  </head>
  <body>
 <div id="root"></div>
 <script src="./index.js"></script>
  </body>
</html>
```
Nach dem Login kopieren
Führen Sie die React-Anwendung aus: Führen Sie den folgenden Befehl im Projektverzeichnis aus, um die React-Anwendung zu starten:
```
npm start
```
Nach dem Login kopieren
Jetzt sollten Sie „Hello, World !" in Ihrer Browserausgabe.

2. Node.js-Backend erstellen

Serverdatei erstellen: Erstellen Sie eine Datei mit dem Namen server.js im Projektverzeichnis und fügen Sie den folgenden Code hinzu:

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello, World!');
});

const port = 5000;
app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

Nach dem Login kopieren

Installieren Sie Express und zugehörige Abhängigkeiten: Führen Sie Folgendes aus Befehl im Projektverzeichnis, um Express und zugehörige Abhängigkeiten zu installieren:
```
npm install express
```
Nach dem Login kopieren
Führen Sie den Node.js-Server aus: Führen Sie den folgenden Befehl im Projektverzeichnis aus, um den Node.js-Server zu starten:
```
node server.js
```
Nach dem Login kopieren
Jetzt sollten Sie dazu in der Lage sein Zugriff auf http://localhost:5000 sieht die Ausgabe von „Hello, World!“ im Browser.

3. Verbinden Sie die Front- und Backends

Ändern Sie die React-Komponente: Ändern Sie den Code in App.js wie folgt:

import React, { useState, useEffect } from 'react';

function App() {
  const [message, setMessage] = useState('');

  useEffect(() => {
 fetch('/api')
   .then((response) => response.text())
   .then((data) => setMessage(data));
  }, []);

  return (
 <div>
   <h1>{message}</h1>
 </div>
  );
}

export default App;

Nach dem Login kopieren

Ändern Sie den Node.js-Server: Ändern Sie den Code in server.js als folgt:

const express = require('express');
const app = express();

app.get('/api', (req, res) => {
  res.send('Hello, World from API!');
});

const port = 5000;
app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

Nach dem Login kopieren

Starten Sie die React-Anwendung und den Node.js-Server neu und besuchen Sie http://localhost:3000. Auf der Seite sollte die Ausgabe „Hello, World from API!“ angezeigt werden.

Fazit:
Durch die oben genannten Schritte haben wir erfolgreich eine Full-Stack-Anwendung basierend auf React und Node.js erstellt und die Verbindung zwischen Front- und Back-End realisiert. Die Verwendung von React und Node.js zum Erstellen leistungsstarker Full-Stack-Anwendungen kann die Entwicklungseffizienz und das Benutzererlebnis erheblich verbessern. Ich hoffe, dieser Artikel wird Ihnen hilfreich sein.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie leistungsstarke Full-Stack-Anwendungen mit React und Node.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!