Guide pour la séparation du front-end et du back-end de React : Comment réaliser le découplage et le déploiement indépendant du front-end et du back-end

Guide pour la séparation du front-end et du back-end de React : Comment réaliser le découplage et le déploiement indépendant du front-end et du back-end, des exemples de code spécifiques sont nécessaires

Dans l'environnement de développement Web actuel, front-end et back-end -la séparation finale est devenue une tendance. En séparant le code front-end et back-end, le travail de développement peut être rendu plus flexible, plus efficace et faciliter la collaboration en équipe. Cet article expliquera comment utiliser React pour réaliser une séparation front-end et back-end, atteignant ainsi les objectifs de découplage et de déploiement indépendant.

Tout d'abord, nous devons comprendre ce qu'est la séparation front-end et back-end. Dans le modèle de développement Web traditionnel, le front-end et le back-end sont couplés. Tous les codes HTML, CSS et JavaScript sont générés par le back-end, et les codes front-end et back-end sont mélangés. La séparation front-end et back-end sépare le code front-end et back-end afin que le front-end et le back-end puissent être développés et déployés indépendamment.

React est un framework front-end très populaire. Il fournit un modèle de développement basé sur des composants, rendant le développement front-end plus modulaire et plus facile à maintenir. Nous utiliserons React comme framework front-end pour réaliser la séparation front-end et back-end.

Ce qui suit est un exemple de code spécifique qui montre comment utiliser React+Node.js pour réaliser la séparation front-end et back-end.

Tout d'abord, nous devons créer un projet React. Vous pouvez utiliser l'outil create-react-app pour créer un nouveau projet React :

npx create-react-app frontend

Ensuite, nous créons un simple composant React pour afficher les données renvoyées par le backend. Créez un nouveau fichier HelloWorld.js dans le dossier src et ajoutez le code suivant :

import React from 'react';

class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: '',
    };
  }

  componentDidMount() {
    fetch('/api/helloworld')
      .then(response => response.json())
      .then(data => this.setState({ message: data.message }));
  }

  render() {
    return (
      <div>
        <h1>Hello World!</h1>
        <p>{this.state.message}</p>
      </div>
    );
  }
}

export default HelloWorld;

Ce composant utilise l'API fetch pour obtenir des données du backend et afficher les données sur la page.

Ensuite, nous devons créer un serveur backend. Un simple serveur backend peut être créé à l'aide de Node.js et du framework Express. Créez un nouveau fichier server.js dans le répertoire racine du projet et ajoutez le code suivant :

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

app.get('/api/helloworld', (req, res) => {
  res.send({ message: 'Hello World from the backend!' });
});

const port = process.env.PORT || 5000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

Ce serveur écoutera le port 5000 et fournira une interface API de /api/helloworld, renvoyant une API contenant "Hello World from the backend ! " "Objet JSON.

Enfin, nous devons connecter les projets front-end et back-end. Créez un nouveau fichier setupProxy.js dans le répertoire racine du projet React et ajoutez le code suivant :

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

Ce fichier est utilisé pour transmettre les requêtes API du front-end vers l'adresse du backend.

Maintenant, nous pouvons gérer les projets front-end et back-end. Dans le terminal, entrez le répertoire racine du projet React et le répertoire où se trouve server.js, puis exécutez les commandes suivantes :

# React项目
npm start

# 后端服务器
node server.js

En accédant à http://localhost:3000, nous pouvons voir un message contenant "Bonjour Le monde depuis le backend!" page.

Grâce aux exemples ci-dessus, nous avons réussi à séparer le front-end et le back-end de React, et le front-end et le back-end peuvent être développés et déployés indépendamment. En dissociant le code front-end et back-end, nous pouvons mieux organiser la structure du projet et améliorer l'efficacité du développement. Dans le même temps, le déploiement indépendant nous permet également d’être plus flexibles dans le lancement et la maintenance des projets.

Dans le développement réel, la pile technologique et le cadre appropriés peuvent être sélectionnés en fonction de besoins et d'une architecture spécifiques pour parvenir à une séparation front-end et back-end. React n'est qu'une des options. Je pense que grâce aux exemples ci-dessus, vous pouvez déjà maîtriser les idées et les méthodes de base.

Pour résumer, la séparation du front-end et du back-end de React nécessite les étapes suivantes : créer un projet React, implémenter des composants front-end, créer un serveur back-end et connecter les projets front-end et front-end . Grâce à ces étapes, nous pouvons parvenir au découplage et au déploiement indépendant des front-ends et des back-ends.

J'espère que cet article vous sera utile et je vous souhaite du succès dans le développement de la séparation front-end et back-end !

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!