Intégration avec d'autres Technologies

Intégration de React avec PHP

React peut être intégré avec un backend PHP pour créer des applications web dynamiques. Voici un exemple simple de communication entre React et un script PHP :

Backend PHP (api.php)

📋 Copier le code

<?php
header('Content-Type: application/json');
echo json_encode(['message' => 'Bonjour depuis PHP !']);
?>

Frontend React (App.js)

📋 Copier le code

import React, { useEffect, useState } from 'react';

function App() {
const [message, setMessage] = useState('');

useEffect(() => {
fetch('http://localhost/api.php')
.then(response => response.json())
.then(data => setMessage(data.message))
.catch(error => console.error('Erreur :', error));
}, []);

return (
<div>
<h1>Message du backend : {message}</h1>
</div>
);
}

export default App;

Explication du code :

• Backend PHP : Un script simple qui renvoie un message JSON.
• Frontend React : Utilise fetch pour récupérer les données du backend PHP et les afficher.

Intégration de React avec Node.js

React peut également être intégré avec un backend Node.js pour créer des applications full-stack. Voici un exemple simple avec Express :

Backend Node.js (server.js)

📋 Copier le code

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

app.get('/api/message', (req, res) => {
res.json({ message: 'Bonjour depuis Node.js !' });
});

app.listen(port, () => {
console.log(`Serveur en écoute sur http://localhost:${port}`);
});

Frontend React (App.js)

📋 Copier le code

import React, { useEffect, useState } from 'react';

function App() {
const [message, setMessage] = useState('');

useEffect(() => {
fetch('http://localhost:3001/api/message')
.then(response => response.json())
.then(data => setMessage(data.message))
.catch(error => console.error('Erreur :', error));
}, []);

return (
<div>
<h1>Message du backend : {message}</h1>
</div>
);
}

export default App;

Explication du code :

• Backend Node.js : Un serveur Express qui renvoie un message JSON.
• Frontend React : Utilise fetch pour récupérer les données du backend Node.js et les afficher.

Intégration de React avec MySQL

Pour intégrer React avec une base de données MySQL, vous pouvez utiliser un backend Node.js avec Express et le module mysql. Voici un exemple :

Backend Node.js avec MySQL (server.js)

📋 Copier le code

const express = require('express');
const mysql = require('mysql');
const app = express();
const port = 3001;

const connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'testdb'
});

connection.connect();

app.get('/api/users', (req, res) => {
connection.query('SELECT * FROM users', (error, results) => {
if (error) throw error;
res.json(results);
});
});

app.listen(port, () => {
console.log(`Serveur en écoute sur http://localhost:${port}`);
});

Frontend React (App.js)

📋 Copier le code

import React, { useEffect, useState } from 'react';

function App() {
const [users, setUsers] = useState([]);

useEffect(() => {
fetch('http://localhost:3001/api/users')
.then(response => response.json())
.then(data => setUsers(data))
.catch(error => console.error('Erreur :', error));
}, []);

return (
<div>
<h1>Liste des utilisateurs</h1>
<ul>
	{users.map(user => (
		<li key={user.id}>{user.name}</li>
	))}
</ul>
</div>
);
}

export default App;

Explication du code :

• Backend Node.js : Un serveur Express qui interroge une base de données MySQL et renvoie les résultats en JSON.
• Frontend React : Utilise fetch pour récupérer les données des utilisateurs depuis le backend et les afficher.

Conclusion

Vous avez maintenant une solide compréhension de l'intégration de React avec d'autres technologies comme PHP, Node.js, et MySQL. Que ce soit pour créer une application full-stack ou interagir avec une base de données, ces techniques vous permettront de construire des applications web puissantes et flexibles.

Pour continuer votre apprentissage, découvrez comment ajouter des animations et des transitions à vos applications React dans le chapitre suivant : Animations et Transitions.