In this guide, we’ll explain how to use React with WordPress. We’ll discuss what the framework is, outline its benefits, and show you how to use it. Let’s jump in!<\/p>
Download all-in-one WordPress cheat sheet<\/a><\/p> \n\n\n\n\n<\/p> Before we get started, we first want to ask the question, “what is React?”<\/a>. Also known as ReactJS, it’s one of the most popular JavaScript libraries you can use for web development.<\/p> Created and maintained by Facebook, it includes an extensive array of JavaScript code snippets that can be used for building UI components.<\/p> Contrary to popular belief, ReactJS is not a JavaScript framework since it only renders components of an application’s view layer. Therefore, you can pair it with an actual framework like Vue.js<\/a> if you’re looking for more sophisticated functions.<\/p> It’s also important to note that there’s ReactJS and React Native<\/a>. The latter is an open-source JavaScript framework built on the React library. You can use it to create cross-platform apps and platform-specific components for iOS and Android.<\/p> To understand the benefits of React, it’s helpful to know how it works. Here are some of its most significant features and functions:<\/p> The main JavaScript syntax extension used in React is JSX<\/a>. You can use it to embed HTML code in JavaScript objects and simplify complex code structures.<\/p> JSX also helps prevent cross-site scripting (XSS) attacks<\/a> by making it difficult for third parties to inject extra code through user input that isn’t explicitly written in the application.<\/p> JSX tags include a name, children, and attributes. A typical HTML image tag would look something like this:<\/p> However, a JSX tag would look like the following:<\/p> Also, the numeric values are written inside curly brackets. Similar to JavaScript, the quotation marks represent strings:<\/p> You can put any valid JavaScript expression<\/a> inside the curly brackets. For example, it could be “user.firstName” or “formatName(user)”.<\/p> The Document Object Model (DOM)<\/a> presents a web page in a data tree structure, which React stores in its memory. React can implement updates to certain parts of the tree rather than re-render it entirely.<\/p> The Virtual DOM<\/a> offers one-way data binding. This makes manipulating and updating it quicker than the original DOM.<\/p> It uses a process known as diffing. This is when React generates a new Virtual DOM tree, compares it to the old one, then finds the most efficient way to apply changes to the real DOM. This takes less time and requires fewer resources, which is beneficial for large projects that involve a lot of user interaction.<\/p> The DOM also supports the declarative API. This means you can tell React which state you want the UI to be in to ensure that the DOM will match that state.<\/p> As we mentioned, React components<\/a> are standalone, reusable pieces of code that make up the UI. These components work similarly to JavaScript functions. They accept props, which are arbitrary inputs. When a function component returns an element, it influences how the UI will look.<\/p> Props are read-only. Here’s an example:<\/p> There are two main types – class<\/strong> components<\/strong> and functional<\/strong> components<\/strong>. Class components use lifecycle WordPress hooks<\/a> and API calls:<\/p> Meanwhile, a functional component looks something like the example below:<\/p> Functional components are for rendering views without data requests or state management.<\/p> State<\/a> refers to the built-in object of React components. This is where you store property values of elements. If the state changes, the component re-renders.<\/p> State management is the process of managing these application states and storing data in state management libraries. You can use a handful of state management libraries, including Redux<\/a> and Recoil<\/a>, with the latter being more beginner-friendly.<\/p> There are many benefits to using React for WordPress development. For starters, it’s beginner-friendly, and all popular hosting solutions<\/a> support its use.<\/p> Since it relies on plain JavaScript and components, you can use it to create web-based applications after only a few days of learning it. There are also plenty of websites to learn how to code for free online<\/a>. A solid understanding of JavaScript basics can streamline the process.<\/p> Another benefit of React is that it lets you reuse components in other applications. It’s open-source, so you can pre-build your components and nest them between others without bloating your code.<\/p> React components are also relatively straightforward to write, thanks to the JSX integration, which we’ll discuss in a moment. You can incorporate HTML typography, tags and leverage multiple functions rendering for dynamic application development.<\/p> With React, you can also use the official command-line interface (CLI) – Create<\/strong> React<\/strong> App<\/strong> – to expedite single-page application development. It comes with pre-configured tools that can help you streamline the setup and learning process.<\/p> Finally, React is also SEO-friendly. The Virtual DOM implementation helps increase page speed, boosting performance and server-side rendering, making it easier for bots to crawl your site.<\/p> WordPress REST application program interface (API)<\/a> enables developers to integrate JavaScript frameworks such as React with WordPress. You can access WP REST API from the front-end of your site, add custom post types, and build a React app backed by this API.<\/p> WP REST API is a set of protocols used for building software applications. They define how information and data are shared between programs and how their components interact. REST, short for Representational State Transfer, refers to the style-defining architectural constraints of programs.<\/p> The format for structuring data to be read by applications is called JavaScript Object Notation (JSON)<\/a>. It helps streamline communication between WordPress and other applications and programs.<\/p> WP REST API results in a decoupling environment that lets users treat WordPress as a headless<\/a> CMS. This means that a variety of front-end frameworks can be used to hook the back end of WordPress. This is advantageous for developers who aren’t overly enthusiastic about PHP.<\/p> A basic knowledge of JavaScript<\/a>, CSS<\/a>, and HTML<\/a> <\/strong>would help to learn React. In addition, the learning process can be more efficient if you’re familiar with ECMAScript 6<\/a> (also known as ES6), functional programming, and object-oriented programming.<\/p> Program-wise, you’ll also need a few dependencies installed on your computer. This includes NodeJS<\/a> and npm<\/a> and a text editor. Optionally, you may also want to use Git<\/a> for version controlling.<\/p> The most popular way to develop React projects for WordPress is to use Create React App<\/a>:<\/p> CRA provides a simple environment for learning React and using it to build single-page applications. Note that in order to use it, you’ll first need Node and npm on your device.<\/p> To create a new project, you can run the following command in your terminal:<\/p> If you haven’t done so already, it will confirm that you want to install Create React App before creating the demo. This makes a boilerplate template. You can also replace “wp-react-demo” with your own name.<\/p> Next, run the following:<\/p> The directory structure will look like this:<\/p> In the src directory, you’ll find all the JavaScript files you’ll be working on. Now, you can visit localhost:3000<\/strong> to load the index.html<\/strong> <\/em>file.<\/p> The <\/em>public\/index.html<\/strong> <\/em>file doesn’t contain much. However, you can find the following line, which will be the starting point for your project:<\/p> Under the <\/em>index.js<\/strong> file of the src directory, you’ll find the following:<\/p> This means it’s rendering the App<\/strong> component, which you can find under src.\/App.js<\/strong>. You can replace this with your own HTML content. We can use HTML insider By default, you can make a To get started with React, you can run this command in your terminal:<\/p> Then, run the following:<\/p> Next, you can enter the example below:<\/p> The above example uses the React Hooks<\/a> \n Warning!<\/b> When using dangerouslySetInnerHTML<\/b> in your code, be aware of the following risks: You can also use React to create a WordPress custom post type<\/a>. However, there are a few tools that you’ll need to install ahead of time. This will help make the process as seamless and straightforward as possible.<\/p> First, you’ll need to add the Custom Post Type UI<\/a> WordPress plugin.<\/p> This plugin simplifies the process of creating custom post types in WordPress.<\/p> We also recommend installing Advanced Custom Fields (ACF)<\/a>.<\/p> This is also a free tool. The plugin can be used to create and add custom fields to your custom post types. We also suggest installing ACF to REST API<\/a> to make your custom fields available to your post types.<\/p> To get started, navigate to <\/em>CPT UI > Add\/Edit Post Types<\/strong> <\/em>from your admin area. In our example, we’ll use the name “Books”. We’ll also select the option to auto-populate the rest of the fields.<\/p> Under the Show in REST API<\/strong> <\/em>section, set it to True<\/strong> and enter “Books” as the REST API base slug. Under Supports<\/strong>, select the Author<\/strong> <\/em>and <\/em>Custom fields<\/strong> <\/em>checkboxes. Click on Save Post Type<\/strong> when you’re done.<\/p> Next, we can create custom fields for the custom post type. Navigate to Custom Fields > Add New<\/strong>, and enter an appropriate title, such as “Book Info”. You can click on Add Field,<\/strong> <\/em>then complete the field label, name, and type.<\/p> Under <\/em>Location<\/strong>, you can set the post type to equal the <\/em>book<\/strong> custom post type. When you’re done, select Publish<\/strong> to activate the custom field.<\/p> Next, go to My Books > Add New<\/strong> <\/em>and enter its title, summary, and featured image. You can repeat this process to create as many as you’d wish.<\/p> Now, from your terminal, enter the following command, running each one before moving on to the next:<\/p> Next, within the In the <\/em>App.js<\/strong> <\/em>file, enter the following:<\/p> Now, in your terminal, you can run the In Book.js<\/strong>, enter the following:<\/p> Note that you can also separate the collection of books into a single book component. You can do this by creating a file within Perhaps you’re wondering how to create a WordPress theme<\/a> using React. There are a handful of options, so let’s look at two popular methods:<\/p> In typical React apps, you need to import React at the top of the files. However, as of WordPress 5.0<\/a>, the CMS ships with React and ReactDOM libraries and exports them into If you’ve used React before, you’ve likely used Create React App to run your development server. However, this isn’t necessary with WordPress.<\/p> The WordPress team created a To load React in your theme, navigate to your functions.php<\/strong> file of your theme, and add the following code snippet:<\/p> This will add the Once that’s done, run the following:<\/p> WP Scripts will be downloaded to your node_modules,<\/strong> so they’re available to use in your command line. To map the WP Scripts to NPM scripts, you can browse to your package.json<\/strong> file, load the “scripts” settings, and replace them with this example:<\/p> Next, you can run the following:<\/p> This will look for files imported from src\/index.js<\/strong> <\/em>and build them to build\/index.js<\/strong> whenever a file is changed.<\/p> Another option is to use create-react-wptheme<\/a> by devloco. This package is similar to create-react-app. However, it uses WordPress instead of webpack as the development server. You’ll also have access to all the core functions, hooks, actions, filters, etc.<\/p> To set it up, you can start a terminal (or git bash) in your local WordPress installation, then type the following command:<\/p> “Barebones”<\/strong> is the name of the theme. You can change it to whatever you want to call your theme.<\/p> You’ll see a message informing you that the installation created a root folder and a “react-src” directory within it. This directory is important because it will contain your uncompiled code.<\/p> Next, we need to add the styles.css<\/strong>, <\/em>index.php<\/strong>, <\/em>and other necessary files to validate it. In the terminal, enter the following command:<\/p> Now, when you navigate to wp-admin > themes<\/strong>, you should see your new theme. Click on the Activate<\/strong> button, then return to the terminal and run the following:<\/p> This should automatically open a new browser tab. Note that the files located in the root folder (anything outside of react-src) should not be edited. They contain the compiled version of the code required for WordPress and React.<\/p> To create a new theme, you can use the following:<\/p> You can change the “my_react_theme” as you want. Next, you can enter the following command:<\/p> Remember to replace it with the same name you used in the previous step. This will set up the theme to be viewed in the admin area.<\/p> After you’re done developing your theme, you’ll need to use the build command to move it to production. To do this, open your command prompt, navigate to the react-src<\/strong> folder of your theme, and run the following:<\/p> This will optimize your files located within a folder. Then you can deploy it on your server.<\/p> If you’re wondering how to create a WordPress child theme<\/a> using React, the process is relatively similar. You can add React to a custom page template<\/a>.<\/p> Let’s start with a standard theme structure:<\/p> Next, you’ll add the following code to your theme’s functions.php<\/strong> file:<\/p> You’ll also need to add code to your style.css<\/strong> file. Within it, copy and paste the following:<\/p> Next, you can create a basic custom page template page-react.php<\/strong> with this example:<\/p>An Introduction to React<\/h2>
![\"React](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/react.jpg\")
<\/a><\/figure><\/div>React Features and Functions<\/h2>
JSX<\/h3>
<img class=\"\" src=\"\" alt=\"\" ><\/pre>
<img className=\"\" src=\"\" alt=\"\" \/><\/pre>
const name = 'John Doe’;\nconst element = <h1>Hello, {name}<\/h1>;\n\nReactDOM.render(\n element,\n document.getElementById('root')\n);<\/pre>Virtual DOM<\/h3>
Components<\/h3>
import React, { useState } from 'react' \nimport ReactDOM from 'react-dom' \n \nconst ParentComponent = () => { \n const [stateVariable, setStateVariable] = useState('this is the starting value for the variable'); \n \n return ( \n <div> \n <h1>This is a function component view<\/h1>\n <ChildComponent exampleProp={stateVariable} \/>\n <\/div> \n ) \n} \n \nconst ChildComponent = (props) => {\n return (\n <div>\n <h2>{props.exampleProp}<\/h2>\n <\/div>\n )\n}\n \n \nReactDOM.render( <ParentComponent \/>, document.getElementById('app') );\n<\/pre>class ExampleComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = { };\n }\n render() {\n return (\n <div>\n <h1>This is a view created by a class component<\/h1>\n <\/div>\n );\n }\n}<\/pre>const ExampleComponent = (props) => {\n const [stateVariable, setStateVariable] = useState('');\n return (\n <div>\n <h1>This is a function component view<\/h1>\n <\/div>\n )\n}<\/pre>State<\/h3>
![\"\"](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner-1024x300.png\")
<\/a><\/figure>Why Use React?<\/h2>
An Overview of WP REST API<\/h2>
React – Before Getting Started<\/h2>
![\"Create](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/create-react-app.png\")
<\/a><\/figure><\/div>npx create-react-app wp-react-demo<\/pre>
cd wp-react-demo\nnpm start<\/pre>
├── README.md\n├── package.json\n├── public\n│ ├── favicon.ico\n│ ├── index.html\n│ └── manifest.json\n├── src\n│ ├── App.css\n│ ├── App.js\n│ ├── App.test.js\n│ ├── index.css\n│ ├── index.js\n│ ├── logo.svg\n│ └── registerServiceWorker.js<\/pre>
<div id=\"root\"><\/div><\/pre>
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from '.\/App';\n \nReactDOM.render(<App \/>, document.getElementById('root'));<\/pre>render()<\/code> thanks to the JSX syntax extension.<\/p>How to Query WP REST API from React<\/h2>
GET<\/code> request to use WP REST API on the front-end of your site. For example, you can use \/wp-json\/wp\/v2\/posts<\/code> to get all your posts. Sticking with the previous example, this post data would be located in http:\/\/localhost\/wp-json\/wp\/v2\/posts\/<\/strong>.<\/p>npx create-react-app react-app<\/pre>
cd react-app \nnpm install @material-ui\/core<\/pre>
import React, { useEffect, useState } from 'react';\nimport Card from '@material-ui\/core\/Card';\nimport CardContent from '@material-ui\/core\/CardContent';\nimport Typography from '@material-ui\/core\/Typography';\nimport Grid from '@material-ui\/core\/Grid';\n \nexport default function Posts() {\n const [posts, setPosts] = useState([]);\n useEffect(() => {\n async function loadPosts() {\n const response = await fetch('\/wp-json\/wp\/v2\/posts');\n if(!response.ok) {\n \/\/ oups! something went wrong\n return;\n }\n \n const posts = await response.json();\n setPosts(posts);\n }\n \n loadPosts();\n }, [])\n return (\n <Grid container spacing={2}>\n {posts.map((post, index) => (\n <Grid item xs={4} key={index}>\n <Card>\n <CardContent>\n <Typography\n color=\"textSecondary\"\n gutterBottom\n dangerouslySetInnerHTML={{__html: post.title.rendered}} \/>\n <Typography\n variant=\"body2\"\n component=\"p\"\n dangerouslySetInnerHTML={{__html: post.content.rendered}} \/>\n <\/CardContent>\n <\/Card>\n <\/Grid>\n ))}\n <\/Grid>\n );\n}<\/pre>useEffect<\/code> and useState<\/code>. The former declares the array of posts and calls to update it, whereas the latter fetches the code.<\/p>
\n1. Security Vulnerabilities<\/b>: Improper usage can expose your application to cross-site scripting (XSS)<\/b> attacks.
\n2. Code Maintainability<\/b>: It becomes harder to maintain and debug code when HTML is injected directly. <\/p>\n \n\n\n\n<\/p>How to Create a Custom Post Type With React<\/h2>
![\"Custom](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/custom-post-type-plugin.png\")
<\/a><\/figure><\/div>![\"Advanced](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/advanced-custom-field.jpg\")
<\/a><\/figure>![\"The](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/wordpress-edit-post-types-1024x550.png\")
<\/a><\/figure><\/div>![\"Adding](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/wordpress-add-field.png\")
<\/a><\/figure><\/div>npx create-react-app frontend\ncd frontend\nnpm i axios\nnpm start<\/pre>
src<\/code> directory, you can create a folder called components<\/em>, followed by a file called books.js<\/strong>. When you’re done, enter the following:<\/p>import React, { Component } from 'react';\nimport axios from 'axios';\nexport class Books extends Component {\n state = {\n books: [],\n isLoaded: false\n }\n componentDidMount () {\n axios.get('http:\/\/localhost:3000\/wp-json\/wp\/v2\/books')\n .then(res => this.setState({\n books: res.data,\n isLoaded: true\n }))\n .catch(err => console.log(err))\n }\n render() {\n console.log(this.state);\n return (\n <div>\n \n <\/div>\n )\n }\n}\nexport default Books;<\/pre>import React from 'react';\nimport '.\/App.css';\nimport Books from '.\/components\/Books';\nfunction App() {\n return (\n <div className=\"App\">\n <Books>\n <\/div>\n );\n}\nexport default App;<\/pre>npm start<\/code> command. This will launch the React app. You can view the “Book” data console when you open it in a browser. You can display each title by mapping through each book.<\/p>render() {\n const {books, isLoaded} = this.state;\n return (\n <div>\n {books.map(book => <h4>{book.title.rendered}<\/h4>)}\n <\/div>\n )\n }<\/pre>src\/components<\/code>. You can also add custom CSS to style the custom post type (app.css).<\/p>How to Create a React WordPress Theme (2 Methods)<\/h2>
1. Create a React WordPress Theme Using WP Scripts<\/h3>
wp.element<\/code>, a global window object.<\/p>wp-scripts<\/code> package based on the react-scripts<\/code> used with Create React App. WP Scripts includes the commands by default.<\/p>\/\/ Enqueue Theme JS w React Dependency\nadd_action( 'wp_enqueue_scripts', 'my_enqueue_theme_js' );\nfunction my_enqueue_theme_js() {\n wp_enqueue_script(\n 'my-theme-frontend',\n get_stylesheet_directory_uri() . '\/build\/index.js',\n ['wp-element'],\n time(), \/\/ Change this to null for production\n true\n );\n}<\/pre>wp-element<\/code> as a dependency of your JavaScript file. Next, we need to set up a package.json<\/strong> file. From the root of your WordPress theme, run the following command:<\/p>npm init<\/pre>
npm install @wordpress\/scripts --save-dev<\/pre>
{\n \"name\": \"myreacttheme\",\n \"version\": \"1.0.0\",\n \"description\": \"My WordPress theme with React\",\n \"main\": \"src\/index.js\",\n \"dependencies\": {},\n \"devDependencies\": {\n \"@wordpress\/scripts\": \"^5.1.0\"\n },\n \"scripts\": {\n \"build\": \"wp-scripts build\",\n \"check-engines\": \"wp-scripts check-engines\",\n \"check-licenses\": \"wp-scripts check-licenses\",\n \"lint:css\": \"wp-scripts lint-style\",\n \"lint:js\": \"wp-scripts lint-js\",\n \"lint:pkg-json\": \"wp-scripts lint-pkg-json\",\n \"start\": \"wp-scripts start\",\n \"test:e2e\": \"wp-scripts test-e2e\",\n \"test:unit\": \"wp-scripts test-unit-js\"\n },\n \"author\": \"\",\n \"license\": \"1 GNU V2+, MIT\"\n}<\/pre>npm start<\/pre>
<\/a><\/figure>2. Create a React WordPress Theme Using a Create-React-WPTheme<\/h3>
npx create-react-wptheme barebones<\/pre>
cd barebones\/react-src\nnpm run wpstart<\/pre>
npm run wpstart<\/pre>
npx create-react-wptheme my_react_theme<\/pre>
cd my_react_theme\/react-src\nnpm run start<\/pre>
npm run build<\/pre>
How to Add React to a Custom Page Template<\/h2>
\/build\n\/src\n\/-- index.js\nfunctions.php\npackage.json\npage-react.php\nstyle.css<\/pre>
<?php\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );\nfunction my_theme_enqueue_styles() {\n \n $parent_style = 'twentytwenty-style'; \n \n wp_enqueue_style( $parent_style, get_template_directory_uri() . '\/style.css' );\n \n wp_enqueue_style( 'child-style',\n get_stylesheet_directory_uri() . '\/style.css',\n [ $parent_style ],\n time() \/\/For production use wp_get_theme()->get('Version')\n );\n\n wp_enqueue_script(\n 'my-theme-frontend',\n get_stylesheet_directory_uri() . '\/build\/index.js',\n ['wp-element'],\n time() \/\/For production use wp_get_theme()->get('Version') \n );\n \n}<\/pre>\/*\n Theme Name: Twenty Twenty Child\n Description: Twenty Twenty Child Theme\n Author: Your Name\n Author URI: https:\/\/yourwebsite.com\n Template: twentytwenty\n Version: 0.9.0\n License: GNU General Public License v2 or later\n License URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n Text Domain: twentytwentychild\n*\/<\/pre>
<? php\n\/**\n * Template Name: React Template\n *\/\nget_header();\n?>\n\n<main id=\"site-content\" role=\"main\">\n\t<article class=\"post-2 page type-page status-publish hentry\">\n\t\t<?php get_template_part( 'template-parts\/entry-header' ); ?>\n\t\t<div class=\"post-inner thin\">\n\t\t\t<div class=\"entry-content\">\t\t\t\t\n\n\t\t\t\t<div id=\"react-app\"><\/div><!-- #react-app -->\n\n\t\t\t<\/div><!-- .entry-content -->\n\t\t<\/div><!-- .post-inner -->\n\t<\/article><!-- .post -->\n<\/main><!-- #site-content -->\n\n<?php get_template_part( 'template-parts\/footer-menus-widgets' ); ?>\n<?php get_footer(); ?><\/pre>