How can I add ReactJS to the child theme?

Question

So I wrote ReactJS, CSS and HTML code of a calendar, separately from WordPress development, and want to add this calendar to a specific page on my website.

So far I have this code:

function my_custom_scripts() {
    wp_enqueue_script( 'calendar', get_stylesheet_directory_uri() . '/js/calendar.js', array(),null,true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );

To enqueue the script.

Then I can create a template for the specific page in the child theme, but where do I go from here?

I have other content on that page and would just like the add the calendar to the page.

Thank you!

Answer 1

I'd suggest the cleanest option if you want to do a bit more development to make your calendar reusable is to build it as a plugin which implements a shortcode. You'd have to do a bit of PHP programming to build your plugin, but this would be the cleanest solution. It'd give you a nice shortcode like [mycalendar] to put in any content anywhere in Wordpress to render your calendar at that point.

If you just want to do it once as a quick hack you could continue as you are and load the CSS/JS manually then pop the HTML/JS directly in to page content with the Code Editor in the UI.

Either way, you may have some research to do about how to integrate React components into Wordpress.