creating-react-plugins-for-wordpress

creating-react-plugins-for-wordpress.php

<?php

/* Commands to create the project. */

// mkdir <name> & cd <name>
// npm init react-app <name>
// cd <name>
// npm/yarn install

/* To build and deploy. */

// npm eject
// npm run build


/* Plugin code to pull react app. */

/**
 * Plugin Name: <name>
 * Plugin URI: 
 * Description: 
 * Version: 1.0
 * Author:
 * Author URI: 
 */

function name_react_app($atts)
{
    $a = shortcode_atts(array(
        'item_ids' => '[]',
    ), $atts );

    if (in_array($_SERVER['REMOTE_ADDR'], array('172.22.0.1', '::1'))) {
        // DEV React dynamic loading
        $js_to_load = 'http://localhost:3000/static/js/example-app.js';
    } else {
        $js_to_load = plugin_dir_url(__FILE__) . 'example-app.js';
        $css_to_load = plugin_dir_url(__FILE__) . 'example-app.css';
    }
    wp_enqueue_style('app_css', $css_to_load);
    wp_enqueue_script('app_js', $js_to_load, '', mt_rand(10, 1000), true);
    ?>
    <?php
        if(is_user_logged_in()){
            echo '<div id="wp_nonce" data-nonce="'.wp_create_nonce('wp_rest').'"></div>';
        }
    ?>
    <div id="example-app-data" data-items="<?php echo $a['item_ids'] ?>"></div>
    <div id="example-app">
        <?php print_r($_SERVER['REMOTE_ADDR']); ?>
    </div>
<?php
}

add_shortcode('name_react_app', 'name_react_app');

$files = glob(dirname( __FILE__ ) .'/calls/*.{php}', GLOB_BRACE);
foreach($files as $file) {
    include $file;
}

//JWT AUTH
require plugin_dir_path(__FILE__) . 'includes/class-jwt-auth.php';

function run_jwt_auth()
{
    $plugin = new Jwt_Auth();
    $plugin->run();
}
run_jwt_auth();