Heim >Web-Frontend >js-Tutorial >So erstellen Sie leistungsstarke Full-Stack-Anwendungen mit React und Node.js

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

WBOYOriginal: 2023-09-26 17:40:52789Durchsuche

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
```
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
```
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;
```

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')
);

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>

Führen Sie die React-Anwendung aus: Führen Sie den folgenden Befehl im Projektverzeichnis aus, um die React-Anwendung zu starten:
```
npm start
```
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}`);
});

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
```
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
```
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;

Ä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}`);
});

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!

html express 栈 JS http

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：React Query-Datenbank-Plug-in: So importieren und exportieren Sie DatenNächster Artikel：React Query-Datenbank-Plug-in: So importieren und exportieren Sie Daten

In Verbindung stehende Artikel

Mehr sehen