02 6100 4040
Building React Apps on the Top of the WordPress REST API: Complete Guide
WordPressWordPress is a very wonderful Content Management tool, when it comes to develop the best of it, it becomes a tough deal for the WordPress Developers Sydney. The mixture of HTML and PHP in WordPress can become hard to maintain.
Since the launch of version 4.7, WordPress has been coming with built-in REST API that doesn’t need any plugins. This feature of WordPress makes it easier to use it as a backend data storage and also allows to customise the front end solution depending on the requirement.
First of all what is WordPress REST API?
An API is a set of protocols for building software applications. This defines the way information is shared between programs and structures along with the way different components of an application will interact with each other. The program development is made easier by providing all the necessary pieces.
Let us now begin with creating our first component.
<!-- DOCTYPE HTML --> <html> <head> <meta charset="UTF-8" /> <title>React Thoreau App</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> </head> <body> <div id="content"></div> </body> </html>
Post this, we will be creating a specification object with the following code.
var ThoreauApp = React.createClass({
render: function(){
return (<div><p>A foolish consistency is the hobgoblin of little minds.</p></div>);
}
});
Post this, you can add child components and sprinkle some style to the website to make it more professional and wonderful.
Let us talk something about data in React.
Data in React is able to handle the ‘state’ or ‘props’. These data can be slippery concepts to grasp, so, let us take a review of thinking in React and the relevant documentation is recommended.
Talking To The WordPress REST API
Moving the WordPress website to the business by making our app aware of the source of the data.
ReactDOM.render(<ThoreauApp dataURL="http://walden.dev/wp-json/wp/v2/posts" />, document.getElementById('content'));
componentDidMount: function() {
$.ajax({
url: this.props.dataURL,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data});
this.chooseRandomQuote();
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
Let us call another function to pick a random quote.
chooseRandomQuote: function () {
var randomNumber = Math.floor(Math.random() * this.state.data.length);
var selectedQuote = this.state.data[randomNumber];
this.setState({selectedQuote: selectedQuote.content.rendered});
},
Now, it is needed to feed the information into the Quote component. It can be done by passing as a prop Quote:
<Quote quote={this.state.selectedQuote} />
Now to display it, we need to call the function:
<div>{this.props.quote}</div>
There are certain procedures that can be followed by you to add external HTML content and add interaction with some basic button.
Hope you found it helpful. Contact Elsner today for an expert WordPress Developer in Melbourne and make your WordPress development easier.
