React App inside WordPress

Δημοσιεύθηκε 23/07/2024

Παρακάτω φαίνεται ο τρόπος να ενσωματωθεί ένα αυτόνομο React app μέσα στο WordPress, ώστε να τρέχει σε slug του WordPress site.
πχ domain .com / react-app-slug

Δημιουργία React App

Αναπτύσσουμε το React App μας με το create-react-app.

npx create-react-app my-react-app
cd my-react-app
...
npm run build

Ενσωμάτωση React App στο WordPress

Αντιγράφουμε όλο το περιεχόμενο του build folder σε ένα φάκελο μέσα στο WordPress theme, για παράδειγμα σε φάκελο react-app.

Και στο functions.php:

function enqueue_react_app() {
    $theme_directory = get_template_directory_uri();

    wp_enqueue_style('react-app-css', $theme_directory . '/react-app/static/css/main.css');
    wp_enqueue_script('react-app-js', $theme_directory . '/react-app/static/js/main.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_react_app');

Το μόνο που απομένει για να τρέξει το app, είναι σε ένα custom page template να περάσουμε το <div id=”root”></div>, όπου και τρέχει το React App.

<?php

/**
 * Template Name: React App Page
 * @package MyTheme
 */
?>

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="Owner" content="<?php bloginfo('name'); ?>">
    <meta name="description" content="<?php bloginfo('description'); ?>">
    <link rel="icon" type="image/png" href="<?php bloginfo('template_directory'); ?>/assets/img/favicon.png" sizes="16x16">
    <?php wp_head(); ?>
</head>

<div id="root"></div>

<?php wp_footer(); ?>
</body>

</html>

Δείτε επίσης το άρθρο Nonce WordPress API for React App inside WordPress.

Δες όλα τα άρθρα