Agence WordPress Be API | Actualités | WordPress | Comment développer un site WordPress avec React ?

WordPress

Comment développer un site WordPress avec React ?

Publié le

22 mai 2025

par

Rémi Corson

REACT, headless, routing ou data fetching, cela vous semble peut-être compliqué… Mais pas de panique, nous allons vous expliquer comment ça marche. Tout d’abord, essayons de démystifier les concepts de base et les termes associés au headless.

WordPress classique : c’est un site WordPress classique, avec un front et un back, une structure de dossiers classique, un thème WordPress classique, etc.
WordPress headless : c’est un site WordPress classique, mais sans front. Il n’a pas de thème WordPress, mais un front React.
React : c’est un framework de développement front‑end basé sur JavaScript.
Routing : il s’agit de la gestion des routes de l’application (l’équivalent des permaliens WordPress).
Data fetching : il est question de la récupération des données du site WordPress (l’équivalent des requêtes SQL, mais depuis une API REST).
API REST : c’est une architecture d’URLs qui permet de récupérer les données du site WordPress.
Vite : c’est un outil de build pour React (vous pouvez aussi utiliser Create React App mais nous allons utiliser Vite dans cet article).

1. Pourquoi utiliser React avec WordPress ?

Utiliser REACT dans un contexte WordPress, c’est avant tout un choix technologique. Mais pourquoi faire ? C’est vrai après tout, il existe des milliers de thèmes WordPress, pourquoi se compliquer la vie avec React ? Et bien, pour plusieurs raisons.

En effet, lorsque nous développons un site WordPress classique, nous sommes souvent limités par le fait que le code HTML, CSS et JavaScript est généré côté serveur. Cela signifie que le code HTML, CSS et JavaScript est généré avant que le navigateur ne l’affiche. Et WordPress charge par défaut une grande quantité de ressources pour générer la page.

Et cela peut devenir un problème lorsque nous souhaitons créer des interfaces modernes et performantes. Bien souvent, la solution qui est privilégiée est la mise en place de solution de cache pour les pages WordPress. Mais cela ne résout pas tous les problèmes performance des pages.

Utiliser React dans un contexte WordPress, c’est avant tout un choix technologique, pour créer des interfaces modernes et performantes.

Nous allons donc utiliser React pour générer le front‑end d’un site WordPress existant. Et nous allons utiliser React Router pour gérer les routes de notre site. Le choix de REACT Router est basé sur le fait que c’est outil populaire et fiable, mais vous pouvez utiliser d’autres outils comme NextJS, Gatsby, react-router-dom, etc.

1.1 Les différences entre un site WordPress classique et un site WordPress headless

Critère	WordPress « classique »	WordPress headless
Rendu des pages	Généré côté serveur par PHP & thèmes	Généré côté client par React (ou SSR optionnel)
Couplage contenu / présentation	Fort	Faible
Performance perçue	Rechargements complets	Navigation fluide (SPA)
Surface d’attaque	PHP exposé	API seule exposée
Stack front‑end	PHP, HTML, CSS, JavaScript	Libre (React, Tailwind, etc.)

1.2 Les atouts de WordPress comme back‑end

Le fait d’utiliser WordPress comme back‑end offre plusieurs avantages. En effet, WordPress est un outil puissant et flexible qui permet de gérer facilement les contenus d’un site web, cela en fait donc la solution à privilégier pour la plupart des sites.

WordPress possède :

Un écosystème riche (plugins, Gutenberg, WooCommerce).
Une interface d’admin familière pour les rédacteurs.
Une gestion des permissions, des utilisateurs, des rôles, etc.
Une API REST prête à l’emploi.

Et c’est cette API REST qui va nous permettre de récupérer les données de notre site WordPress. Par défaut, seuls quelques endpoints sont disponibles, mais nous pouvons en ajouter autant que nous le souhaitons grâce aux hooks WordPress. Aussi, selon que l’on est authentifié ou non, nous pourrons avoir accès à différentes informations.

Une API retourne des données JSON, ce qui est très pratique pour l’intégration avec React. Par exemple, si vous visitez cette URL https://fr.wordpress.org/wp-json/wp/v2/posts, vous obtiendrez une liste d’articles au format JSON. Et ce sont ces données JSON que nous allons récupérer et afficher dans notre application React.

1.3 Les atouts de React côté front‑end

Contrairement à un thème classique ou à un thème FSE, une application React permet de générer un front‑end totalement décorrélé de WordPress. Les principaux avantages étant:

Une expérience utilisateur fluide (SPA).
L’utilisation de composants réutilisables.
Un immense écosystème JS (UI kits, i18n, tests, etc.).
La possibilité d’ajouter SSR (server‑side rendering) plus tard si besoin.

2. Création d’une application React en lien avec WordPress

Dans ce tutoriel, nous allons utiliser Vite pour créer notre application React. Vite est un outil de build pour React qui permet de créer une application React facilement et rapidement. Mais pour commencer, nous aurons besoin des éléments listés ci-dessous.

2.1 Pré‑requis WordPress

Un site WordPress fonctionnel.
Des permaliens configurés sur « Nom de l’article ».
Dans certains cas, CORS ouvert vers le domaine/front (plugin ou headers serveur).

2.2 Création d’une application REACT avec Vite

Nous allons utiliser le terminal pour la plupart des actions, notamment pour la création des fichiers et des dossiers de notre application. Cependant, Vite va créer pour nous un environnement de travail local qui nous permettra de développer notre application. Il n’y pas besoin de créer un serveur local, Vite va nous permettre de lancer notre application React localement.

Commençons par créer notre projet React avec Vite. Dans votre terminal, lancez la commande suivante (wp-react-front est le nom de notre projet, vous pouvez le modifier si vous le souhaitez) :

# Lance l’assistant Vite
npm create vite@latest wp-react-front

Puis sélectionner les valeurs suivantes:

Select a framework: › react
Select a variant: › React Router v7

Suivez ensuite la procédure en utilisant les valeurs par défaut, puis une fois le projet créé, rentrez dans le dossier et installez les dépendances:

cd wp-react-front
npm install

Nous allons dès à présent configurer l’adresse du site WordPress que nous souhaitons utiliser. Cette commande à pour but de créer un fichier .env.local à la source du projet et de renseigner l’adresse de l’API REST de WordPress. L’utilisation d’un fichier .env.local permet de ne pas commiter cette information sur le répertoire utilisé pour le versionning.

echo "VITE_WP_API_URL=http://mon-wordpress.local/wp-json" > .env.local

Vous devriez alors avoir une arborescence similaire à celle‑ci:

wp-react-front/
 ├─ app/
 │   ├─ root.tsx            # point d’entrée React Router (TypeScript)
 │   ├─ routes.ts           # définition des routes
 │   ├─ routes/
 │   │   └─ home.tsx        # page d’exemple
 │   └─ ...
 ├─ react-router.config.ts  # config du routeur
 ├─ vite.config.ts
 └─ ...

Dans ce tutoriel, nous utilisons TypeScript. Si vous préférez JavaScript pur, choisissez le variant « JavaScript », puis npm install react-router-dom@latest et suivez la structure src/ classique.

À ce stade, notre projet est déjà fonctionnel dans le sens où nous pouvons accéder à la page d’accueil de notre application React. Il nous faut maintenant faire le nécessaire pour connecter cette application REACT à WordPress.

2.3 Nettoyer l’application et créer nos propres fichiers

Nous allons d’abord nettoyer l’application en supprimant les fichiers et dossiers inutiles qui ont été créés par défaut.

# Supprimez les fichiers de démo
rm -rf app/welcome app/routes/home.tsx

Puis créer les fichiers nécessaires à notre application.

# Créer les fichiers nécessaires
mkdir -p app/components
 touch app/main.jsx \
       app/components/PostsList.jsx \
	   app/components/Post.jsx \
       app/App.jsx \
       app/App.css \
	   tailwind.config.js \

Cette dernière commande va créer les fichiers qui vont constituer notre application React.

main.jsx: le point d’entrée de notre application.
components: le dossier qui va contenir nos composants REACT.
App.jsx: le composant principal de notre application.
App.css: le fichier CSS de notre application.
tailwind.config.js: le fichier de configuration de Tailwind CSS.
PostsList.jsx: le composant qui va afficher la liste des articles.
Post.jsx: le composant qui va afficher le détail d’un article.

3. Créer les routes

Lorsque nous naviguons sur une page WordPress, nous pouvons voir que l’URL change en fonction de la page que nous consultons.

Par exemple, si nous sommes sur la page d’accueil, l’URL sera http://mon-wordpress.local/

Si nous sommes sur la page d’articles, l’URL sera http://mon-wordpress.local/posts/

Enfin, si nous sommes sur la page d’un article, l’URL sera http://mon-wordpress.local/posts/mon-article/

Cela est dû au fait que WordPress gère le routage côté serveur et que nous devons faire de même pour que notre application React fonctionne de la même manière.

Pour cela, nous allons utiliser le fichier routes.ts dans le dossier app et nous allons y définir les routes de notre application. Cela permettra à l’application de savoir quoi afficher en fonction de l’URL visitée.

// app/routes.ts
import type { RouteObject } from "react-router";

// Definition des routes.
const routes: RouteObject[] = [
	{
		path: "/",
		file: "./routes/_index.tsx"
	},
	{
		path: "/post/:id",
		file: "./routes/post.$id.tsx"
	}
];

export default routes;

Ce que nous indiquons ici, c’est que nous avons deux routes:

La route / qui affichera la page d’accueil de notre application et qui chargera le composant PostsList.jsx.
La route /post/:id qui affichera le détail d’un article et qui chargera le composant Post.jsx.

On peut noter qu’il existe des systèmes de routing plus complexes, notamment NextJS, mais nous allons nous contenter ici de ces deux routes pour le moment.

Nous allons maintenant éditer les fichiers correspondants à ces routes. Le code de la route d’accueil sera le suivant :

// app/routes/_index.tsx
import PostsList from "../components/PostsList";
import type { LoaderFunctionArgs } from "react-router";

const API_URL = import.meta.env.VITE_WP_API_URL;

// Récupération des articles côté serveur.
export async function loader({ request }: LoaderFunctionArgs) {
	try {
		const response = await fetch(`${API_URL}/wp/v2/posts`);

		if (!response.ok) {
			throw new Error(`API responded with status: ${response.status}`);
		}

		const posts = await response.json();
		return { posts };
	} catch (error) {
		console.error("Error fetching posts from server:", error);
		return {
			posts: [],
			error: error instanceof Error ? error.message : "Unknown error"
		};
	}
}

// Retourne le composant PostsList.
export default function Index() {
	return <PostsList />;
}

Ce que fait ce code, c’est que lorsque nous sommes sur la page d’accueil, nous récupérons les articles depuis l’API REST de WordPress et nous les affichons dans le composant PostsList.jsx.

Nous devons également créer la route pour le détail d’un article.

// app/routes/post.$id.tsx
import Post from "../components/Post";
import type { LoaderFunctionArgs } from "react-router";

const API_URL = import.meta.env.VITE_WP_API_URL;

// Récupération des données du post côté serveur.
export async function loader({ params }: LoaderFunctionArgs) {
	try {
		const { id } = params;
		const response = await fetch(`${API_URL}/wp/v2/posts/${id}?_embed`);

		if (!response.ok) {
			throw new Error(`API responded with status: ${response.status}`);
		}

		const post = await response.json();
		return { post };
	} catch (error) {
		console.error("Error fetching post from server:", error);
		return {
			post: null,
			error: error instanceof Error ? error.message : "Unknown error"
		};
	}
}

export default function PostDetail() {
	return <Post />;
}

Ici nous faisons exactement la même chose que pour la route d’accueil, mais cette fois ci nous récupérons les données du post côté serveur et nous les affichons dans le composant Post.jsx.

Ces deux fichiers vont nous permettre de récupérer les données des articles et du détail d’un article et de les afficher dans notre application React via les composants PostsList.jsx et Post.jsx.

Ces composants, nous les avons déjà créés dans le dossier app/components. Nous devons désormais modifier les fichiers correspondants pour qu’ils soient utilisables par React Router.

// app/components/PostsList.jsx
import { Link, useLoaderData } from 'react-router';

export default function PostsList() {
	// Récupère les articles.
	const { posts = [], error: loaderError } = useLoaderData();

	if (loaderError) {
		return (
			<div>
				<h1>Erreur lors du chargement</h1>
				<p>Impossible de charger les articles: {loaderError}</p>
			</div>
		);
	}

	return (
		<div>
		<h1>Articles du blog fr.wordpress.org</h1>
		<ul className="space-y-6">
			{posts.length === 0 ? (
				<p>Aucun article trouvé</p>
			) : (
				posts.map(post => (
					<li key={post.id}>
						<h2 className="text-xl font-bold mb-2">
							<Link to={`/post/${post.id}`}>{post.title.rendered}</Link>
						</h2>
						<div
							className="prose"
							dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
						/>
					</li>
				))
			)}
		</ul>
		</div>
	);
}

et le code du composant Post.jsx sera le suivant:

// app/components/Post.jsx
import { Link, useLoaderData } from 'react-router';

export default function Post() {
	// Récupère les données du post.
	const { post, error } = useLoaderData();

	if (error) {
		return (
			<div>
				<h1>Erreur lors du chargement</h1>
				<p>Impossible de charger l'article: {error}</p>
				<p>
				<Link to="/">← Retour à la liste</Link>
				</p>
			</div>
		);
	}

	if (!post) {
		return (
			<div>
				<p>Chargement de l'article en cours...</p>
			</div>
		);
	}

	return (
		<article className="prose mx-auto">
			<h1 className="text-3xl font-bold">{post.title.rendered}</h1>
			<div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
			<p className="mt-8">
				<Link to="/">← Retour à la liste</Link>
			</p>
		</article>
	);
}

Vous pouvez noter que nous utilisons le composant Link de React Router pour créer des liens entre les pages. L’avantage de ce composant est qu’il permet de créer des liens qui fonctionnent dans l’application React, c’est‑à‑dire que lorsque nous cliquons sur un lien, nous ne sommes pas redirigé vers une nouvelle page, mais que nous restons sur la même page et que le contenu est mis à jour. La page n’est pas rechargée entièrement, mais seulement le contenu de la page est mis à jour. C’est l’un des principaux avantages des applications React.

Vous noterez également l’utilisation de classes de type text-3xl font-bold ou prose pour mettre en forme le contenu. Cela provient de l’utilisation de Tailwind CSS, qui est un framework CSS très puissant et très utilisé, malheureusement assez peu dans les environnements WordPress. C’est pourtant un excellent outil dans un contexte REACT.

Bien, nous avons créé les routes et les composants. Il ne nous reste plus qu’à configurer le routeur.

// react-router.config.ts
import type { Config } from "@react-router/dev/config";

export default {
	ssr: true,
} satisfies Config;

Enfin nous pouvons modifier les fichiers principaux de notre application, root.tsx et main.jsx pour qu’ils puissent permettre à l’application de fonctionner.

Le fichier root.tsx agit ici comme un layout, c’est‑à‑dire que c’est lui qui va contenir le contenu de toutes les pages de notre application.

// app/root.tsx
import { Outlet, Meta, Scripts } from "react-router";
import "./app.css";

export function meta() {
	return [
		{ charset: "utf-8" },
		{ name: "viewport", content: "width=device-width, initial-scale=1" },
		{ title: "WordPress React Front" },
		{ name: "description", content: "WordPress React Frontend" }
	];
}

export default function Root() {
	return (
		<html lang="en">
			<head>
				<Meta />
			</head>
			<body className="bg-white dark:bg-gray-950 text-black dark:text-white">
				<div id="root" className="max-w-4xl mx-auto px-4 py-8">
					<Outlet />
				</div>
				<Scripts />
			</body>
		</html>
	);
}

Le fichier main.jsx est lui le point d’entrée de notre application.

// app/main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './app.css';

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

Nous avons créé les fichiers nécessaires et configuré notre application pour qu’elle fonctionne. Il ne nous reste plus qu’à lancer notre application et à la tester. Pour cela, nous lançons la commande suivante: npm run dev

Le terminal nous affichera une URL, généralement http://localhost:5173, que nous pouvons visiter pour voir notre application. Si tout fonctionne correctement, nous devrions voir la liste des articles du blog fr.wordpress.org. Lorsque nous cliquons sur un article, nous sommes redirigé vers la page du post et nous pouvons voir le contenu de l’article. Nous avons donc bien un site qui affiche les données de WordPress avec une application React.

Bien entendu, cette application REACT est très simpliste. Mais elle nous permet de comprendre comment nous pouvons utiliser React pour afficher les données de WordPress. Nous verrons dans la suite des articles consacrés à REACT comment ajouter une pagination, du cache, un meilleur système de routing, etc.

La liste des articles s’affiche ainsi:

Le détail de l’article quant à lui:

Conclusion

WordPress est un gestionnaire de contenu qui offre la possibilité d’utiliser ses données via une API REST. Cette API REST permet de récupérer les données de WordPress et de les utiliser dans une application React. Nous avons vu comment nous pouvons utiliser cette API REST pour alimenter notre application React et comment nous pouvons utiliser React Router pour gérer les routes de notre application.

Nous avons également vu comment utiliser Tailwind CSS pour mettre en forme notre application.

Nous verrons dans la suite des articles comment nous pouvons faire évoluer cette application pour qu’elle soit plus performante, plus sûre, plus optimale, etc.