Comment créer des applications full-stack hautes performances à l'aide de React et Node.js-js tutoriel-php.cn

Comment créer des applications full-stack hautes performances à l'aide de React et Node.js

WBOY

Libérer： 2023-09-26 17:40:52

original

766 Les gens l'ont consulté

Comment créer des applications full-stack hautes performances à laide de React et Node.js

Comment créer des applications full-stack hautes performances à l'aide de React et Node.js

Introduction :
Avec le développement d'applications Web, la création d'applications full-stack hautes performances est devenue de plus en plus importante. React et Node.js, en tant que technologies front-end et back-end populaires, sont largement utilisées dans le développement full-stack. Cet article explique comment utiliser React et Node.js pour créer des applications full-stack hautes performances et fournit des exemples de code spécifiques.

1. Construire le cadre de base du projet

Créer le répertoire du projet : Tout d'abord, nous devons créer un répertoire de projet et initialiser un nouveau projet Node.js. Vous pouvez le faire en utilisant la commande suivante :
```
mkdir my-app
cd my-app
npm init -y
```
Copier après la connexion
Installer React et les dépendances associées : Exécutez la commande suivante dans le répertoire du projet pour installer React et les dépendances associées :
```
npm install react react-dom react-scripts
```
Copier après la connexion

Créer un composant React : Créez un composant React appelé App.js et ajoutez le code suivant :

import React from 'react';

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

export default App;

Copier après la connexion

Créez le fichier d'entrée : Créez un fichier nommé index.js et ajoutez le code suivant :

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

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

Copier après la connexion

Créez un modèle HTML : Créez un fichier nommé index dans le project.html et ajoutez le code suivant :

<!DOCTYPE html>
<html>
  <head>
 <title>React App</title>
  </head>
  <body>
 <div id="root"></div>
 <script src="./index.js"></script>
  </body>
</html>

Copier après la connexion

Exécutez l'application React : Exécutez la commande suivante dans le répertoire du projet pour démarrer l'application React :
```
npm start
```
Copier après la connexion
Maintenant, vous devriez pouvoir voir "Hello, World !" dans la sortie de votre navigateur.

2. Créez le backend Node.js

Créez un fichier serveur : créez un fichier nommé server.js dans le répertoire du projet et ajoutez le code suivant :

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

Copier après la connexion

Installez Express et les dépendances associées : Exécutez ce qui suit commande dans le répertoire du projet pour installer Express et les dépendances associées :
```
npm install express
```
Copier après la connexion
Exécutez le serveur Node.js : Exécutez la commande suivante dans le répertoire du projet pour démarrer le serveur Node.js :
```
node server.js
```
Copier après la connexion
Maintenant, vous devriez pouvoir accédez à http://localhost:5000 pour voir la sortie « Hello, World ! » dans le navigateur.

3. Connectez le front et le backend

Modifiez le composant React : Modifiez le code dans App.js comme suit :

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;

Copier après la connexion

Modifiez le serveur Node.js : Modifiez le code dans server.js comme suit :

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

Copier après la connexion

Redémarrez l'application : redémarrez l'application React et le serveur Node.js, et visitez http://localhost:3000. Vous devriez voir la sortie de "Hello, World from API !"

Conclusion :
Grâce aux étapes ci-dessus, nous avons réussi à créer une application full-stack basée sur React et Node.js, et à réaliser la connexion entre le front-end et le back-end. L'utilisation de React et Node.js pour créer des applications full-stack hautes performances peut considérablement améliorer l'efficacité du développement et l'expérience utilisateur. J'espère que cet article vous sera utile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!