Wczytywanie i używanie React we wtyczkach i motywach WordPressa

Gdy będziesz chcieć użyć React w JavaScript w twojej wtyczce, z pewnością pierwsze co spróbujesz, to użyć poniższego polecenia w głównym katalogu twojej wtyczki (lub motywu):

# nie rób tego
npm install react react-dom

Nie musisz tego robić. A nawet nie powinieneś, bo na pewno twój kod React nie będzie działać, a w konsoli możesz zobaczyć informacje o konflikcie wersji tego frameworku.

Nawiasem mówiąc, polecam bun zamiast npm, bo został napisany do obecnych wyzwań, a składnię ma taką sam jak ten drugi. Tu dowiesz się wiecej.

Bo WordPress już zawiera w sobie React, który wykorzystuje przecież w Gutenbergu. Powinniśmy skorzystać z niego, oto jak:

Załóżmy, że kod piszesz w skrypcie /assets/react/main.js. Wczytaj ten plik tak jak każdy inny plik JS w WP z użyciem wp_enqueue_script, a React dodaj jako zależność:

wp_enqueue_script(
	'my-plugin-react-main',
	PLUGIN_URL . 'assets/react/main.js',
	[ 'wp-element' ]
);

A w samym JS skrypcie React wczytaj, dodając na samej górze:

const { createRoot, useState, useEffect } = wp.element;

I już. Teraz możesz używać tych funkcji tak, jak jest to opisane w dokumentacji Reacta.