Requirements for integrating React with WordPress.
WordPress 4.7 or higher
Project Setup
- Run
npm install -g create-react-app
on your terminal, if you have not installed globally - Run create-react-app wordpress-react-app to install react
- After the packages have been installed navigate into wordpress-react-app
- To start the project:
npm start
Connecting React with WordPress
Open the project in your editor. Create a new folder named components inside the src folder. For React to work with WordPress, the connection can be established via REST API.
Defining the backend URL’s in React
Create a file GetData.js inside components. Let’s create a constant named appUrl to add the WordPress URL+ JSON path.
const appUrl = “http://dev.wpreactbackend.com/wp-json/wp/v2/";
For this example I’ll be listing the posts I’ve got on my WordPress. So to do that lets create another constant, this time name it has getPost.
const getPosts = `${appUrl}posts`;
This can be tested by typing /wp-json/wp/v2/posts after the WordPress URL.
Make sure you export
the created constants.
Getting Posts
Create a file PostList.js inside components.
- To begin with lets import React and getPosts to this newly created file.
import React, {Component} from ‘react’
import {getPosts} from ‘./getData’
2. Define a state array as posts
state = {
posts: []
}
3. Now lets fetch API under componentDidMount function.
componentDidMount is performed when received data from the server
componentDidMount() {
let postUrl = `${getPosts}`;
fetch(postUrl)
.then(data => data.json())
.then(data => {
this.setState({
posts: data
})
})
}
What happens here is we are collecting the data from the JSON and then (.then which is a promise) we set it to the state(setState) we created as posts.
4. Under render() lets define another variable and loop the received data
![React + WordPress : REST API REST API Results](https://synceight.com/wp-content/uploads/2020/04/1_67-Rr_ezZceMO7bLHVpp7A.jpeg)
let listposts = this.state.posts.map((post, index) => {
return(
<div key={index}>
<h4>{post.title.rendered}</h4>
<p dangerouslySetInnerHTML={{__html: post.content.rendered}}/>
</div>
)
})
let listposts = this.state.posts.map((post, index)
: Posts inside the array is looped
post
: One post
post.title.rendered
: To get the title of the post
![React + WordPress : REST API Returned values](https://synceight.com/wp-content/uploads/2020/04/1_gK3ng1SwQnTQM9xLkHzAdQ.jpeg)
If you use post.content.rendered
to get the post content then it will render with the HTML tags.
![React + WordPress : REST API Returned with HTML tags](https://synceight.com/wp-content/uploads/2020/04/1_90lxgPRQdTD3hZAFRAOGIQ.jpeg)
As you can see it returns with the HTML tags. To eliminate the that we use dangerouslySetInnerHTML
Displaying the Data
return (
<article>
<h1>Posts</h1>
{listposts}
</article>
);
Go to the App.js and import PostList from postList.js
<PostList/>
This will do the trick and hopefully your site will display as below;
![React + WordPress : REST API React and WordPress API returned site](https://synceight.com/wp-content/uploads/2020/04/1_AJjxak-uhSUbFyNJ1fcFfg.jpeg)
Note: Have the React app and the WordPress hosted in the same environment to overcome any issues that could arise with CORs.
Host Information
Frontend: thisisreactwithwordpress.com
Backend: backendadmin.thisisreactwithwordpress.com
Leave a comment