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