![]() Find out how to do it below using wpenqueuescripts. However, once you have that setup, you can easily write simple or advanced React UIs on the frontend of a WordPress site via a theme or plugin or in the admin area with your plugins. Daniel Pataki, NovemIn WordPress, instead of simply adding these to the header, you should use a method called enqueueing which is a standardized way of handling your assets with the added bonus of managing dependencies. Using React in Your WordPress Themes and PluginsĪs mentioned, at the beginning of this article, you must have the proper development tools processing your JavaScript if you want to write JSX. It would simply find an HTML element with the id my-app and allow you to render into that whatever React you want to write. Like this previous example, this would not do much. Compatibility: WooCommerce 7.8 (outdated templates, mini cart JS enqueue)Improve. Wp.element.render(, document.getElementById("my-app") ) Here is what that might look like in our plugin.js file enqueued above. Enqueueing in WordPress refers to registering and adding scripts and stylesheets to your site. You can now add very simple or quite complex React code in your plugins. This would allow us to have access to the ReactDOM render() method just like in the theming example. add_action( 'wp_enqueue_scripts', 'my_enqueue_plugin_js' ) // Loads on frontendĪdd_action( 'admin_enqueue_scripts', 'my_enqueue_plugin_js' ) // Loads in admin area The code below shows how to make React available on both the frontend and in the admin area for a plugin. We simply, make wp-element a dependency for our plugin JavaScript. The code we use for making React available in a plugin is quite similar to the theme. The most interesting parts in that wpenqueuescript() call is the first parameter ('wpa-main-js') and the last parameter (true). You can use the adminenqueuescripts hook if you would like to enqueue a script into wp-admin. wpenqueuescripts is the proper hook to use when enqueuing scripts and styles that are meant to appear on the front end. However, you now have React loaded and can write React now just like you would outside of WordPress. and take a note that we’re using the wpenqueuescripts hook here, which loads the script into your theme. ![]() For your theme you will need to make sure you have the correct HTML element selected to render your React code into. It would display Hello World inside of any markup in our theme with an ID of content. Wp.element.render(, document.getElementById("content") ) So, we could write something like this in our theme.js file we enqueued above. This contains the ReactDOM render() function as well as createElement() if you wanted to write React without JSX. Once we do this we will have window.wp.element available in our JavaScript. Time(), // Change this to null for production add_action( 'wp_enqueue_scripts', 'my_enqueue_theme_js' ) Making React available in a theme is as easy as adding wp-element as a dependency to our JavaScript files enqueued with the normal wp_enqueue_scripts hook. NOTE: Before getting into how this is done, make sure that you have the proper babel and build configurations setup to be able to process the React and JSX code you will write. In WordPress, we will access React via the global window object. ![]() This is a little different from how we would normally make React a dependency in our project. When we make the Element (React) library available, WordPress will load React into the global window object as window.wp.element. In WordPress, React is abstracted into a library called Element Despite the name, it is used for enqueuing both scripts and styles.Starting with WordPress 5.0, React is made available as a dependency we can load in our WordPress themes and plugins. Wp_enqueue_scripts is the proper hook to use when enqueuing scripts and styles that are meant to appear on the front end. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |