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

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

WBOYoriginal: 2023-09-26 17:40:52786parcourir

Comment créer des applications full-stack hautes performances à laide 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
```
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
```

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;

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

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>

Exécutez l'application React : Exécutez la commande suivante dans le répertoire du projet pour démarrer l'application React :
```
npm start
```
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}`);
});

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

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

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!

html express 栈 JS http

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Plug-in de base de données React Query : comment importer et exporter des donnéesArticle suivant：Plug-in de base de données React Query : comment importer et exporter des données

Articles Liés

Voir plus